微信小程序之折叠面板--数据动态化、可实现多级
作者：互联网
.cell-class{
display: block;
width: 100%;
border-bottom: 4rpx solid #EBEBEB;
font-size:26rpx;
}
.kind-list-item-bd {
height: 0;
overflow: hidden;
}
.kind-list-item-bd-show {
height: auto;
}
.kind-list-item-bd-list {
height: 0;
overflow: hidden;
}
.kind-list-item-bd-show-list-item {
height: auto;
}
.clear {
clear: both;
}
.borderContainer {
height: 10vw;
line-height: 10vw;
background-color: #5cacee;
}
.show {
background-color: #9f9f9f;
}
.rightBorder {
float: right;
padding-right: 2vw;
}
.rightBorder1 {
float: right;
padding-right: 2vw;
}
.rightBorder2 {
display: flex;
align-items: center;
}
.dataBorder {
/* height: 12vw; */
line-height: 12vw;
}
.dataBorder1 {
background-color: #9f9f9f;
font-size: 28rpx;
color: #fff;
}
.dataBorder2 {
border-bottom: 2rpx solid #fff;
}
.dataBorder3 {
background-color: #5cacee;
font-size: 28rpx;
color: #fff;
}
.lefrBorder {
float: left;
}
.nickText {
margin: 0vw 3vw;
display: inline-block;
}
.homeId {
margin: 0vw 5vw;
color: #fff;
display: inline-block;
}
.borderLeft {
width: 35%;
}
.borderRight {
width: 2rpx;
height: 10vw;
background-color: #ccc;
}
.borderRight1 {
width: 55%;
}
.showText {
height: 12vw;
line-height: 12vw;
display: flex;
justify-content: space-between;
font-size: 25rpx;
border-bottom: 2rpx solid #ebebeb;
}
.showText1 {
padding-right: 1vw;
background-color: #eee;
}
.showText2 {
margin: 0vw 3vw;
}
.showText3 {
margin: 0 2vw;
display: inline-block;
}
<view wx:for="{{homelistkey}}" wx:for-index="index" dat wx:for-item="item" wx:key="index" class="dataBorder2">
<view>
<view class="dataBorder" bindtap="onTap" data-homeid="{{item.homeId}}" data-ide="{{index}}" data-id="{{item.id}}"
data-change="{{item.change}}">
<view class="{{item.homeId==nowText?'dataBorder3':'dataBorder1'}}">
<view class="lefrBorder">
<view class="nickText" bindlongtap="updateHomeName" data-id="{{item.homeId}}">
{{item.homeName}}
</view>
<view class="homeId">{{item.homeId}}</view>
</view>
<view wx:if="{{item.homeId==nowText}}" class="rightBorder1">
<view class="rightBorder2">
右布局
</view>
</view>
<view wx:else class="rightBorder" data-globalid="{{item.homeId}}" catchtap="addHomePersion">
</view>
<view class="clear"></view>
</view>
<view class="kind-list-item-bd {{item.onClick? 'kind-list-item-bd-show' : ''}}">
<view>
<!-- <slideitem id="slideitem-{{index}}" class='cell-class' row="{{index}}" itemColor="#fff"
data-homeid="{{item.homeId}}" data-userphone="{{items.userPhone}}" catch:deleteItemEvent='deleteAction'
catch:slideItemEvent='slideAction' cellHeight="120rpx" wx:for="{{item.dataList}}" wx:for-item="items"
wx:key="{{index}}" wx:for-index="idx" data-item="{{items}}"> -->
<view wx:for="{{item.dataList}}" wx:for-item="items" wx:for-index="idx" wx:key="idx" data-item="{{items}}">
<view catchtap="clickItem" data-homeid="{{items.homeId}}" data-ide="{{index}}" data-id="{{items.id}}"
data-change="{{items.change}}">
<view>
<view class="showText2" style="float:left;">{{items.userPhone}}</view>
</view>
<view class="showText1">
<view bindtap="updataNameDialog" data-homeid="{{item.homeId}}" data-tel="{{items.userPhone}}"
data-usernickname="{{items.userNickname}}" class="showText3">
{{items.userNickname}}
</view>
</view>
</view>
<view class="kind-list-item-bd-list {{items.onClick? 'kind-list-item-bd-show-list-item' : ''}}">
<view>
<!-- <slideitem id="slideitem-{{index}}" class='cell-class' row="{{index}}" itemColor="#fff"
data-homeid="{{item.homeId}}" data-userphone="{{items.userPhone}}"
catch:deleteItemEvent='deleteAction' catch:slideItemEvent='slideAction' cellHeight="120rpx"
wx:for="{{items.listItem}}" wx:for-item="gitem" wx:key="{{inde}}" wx:for-index="idx"
data-item="{{gitem}}"> -->
<view wx:for="{{items.listItem}}" wx:for-item="gitem" wx:key="idxx" wx:for-index="idxx"
data-item="{{gitem}}">
<view catchtap="clickItem" data-homeid="{{gitem.homeId}}" data-ide="{{idxx}}" data-id="{{gitem.id}}"
data-change="{{gitem.change}}">
<view>
<view class="showText2" style="float:left;">{{gitem.userPhone}}</view>
</view>
<view class="showText1">
<view bindtap="updataNameDialog" data-homeid="{{item.homeId}}" data-tel="{{gitem.userPhone}}"
data-usernickname="{{gitem.userNickname}}" class="showText3">
{{gitem.userNickname}}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
// index/userClick/userClick.js
Page({
/**
* 页面的初始数据
*/
data: {
nowText: '120000',
homelistkey: [{
id: 0,
homeName: '小海',
homeId: '120000',
onClick: false,
isMain: 1,
dataList: [{
id: 10,
userPhone: 11111111111,
userNickname: '用户名',
onClick: false,
listItem: [{
id: 100,
userPhone: '1-1-1689-1-1-1-',
userNickname: '12-91用户名',
}]
}, {
id: 11,
userPhone: 12121212121,
userNickname: '用户名_22',
onClick: false,
listItem: [{
id: 101,
userPhone: '1-1-19031-1-1-1-',
userNickname: '1-0231用户名',
}]
}]
},
{
id: 1,
homeName: '张三',
homeId: '1223400',
onClick: false,
isMain: 0,
dataList: [{
id: 12,
userPhone: 232323232323,
userNickname: '用户名_57',
onClick: false,
listItem: [{
id: 102,
userPhone: '1-1-1594-1-1-1-',
userNickname: '167用户名',
}]
}, {
id: 13,
userPhone: 45454545454,
userNickname: '用户名_231',
onClick: false,
listItem: [{
id: 103,
userPhone: '1-1-156-1-1-1-',
userNickname: '1-561用户名',
}]
}]
},
{
id: 2,
homeName: '李四',
homeId: '230000',
onClick: false,
isMain: 0,
dataList: [{
id: 14,
userPhone: 16767676767,
userNickname: '用户名',
onClick: false,
listItem: [{
id: 104,
userPhone: '1-1-1331-1-1-1-',
userNickname: '1331用户名',
}]
}, {
id:15,
userPhone: 13434556789,
userNickname: '用户名_21',
onClick: false,
listItem: [{
id: 105,
userPhone: '1-1-1-22-1-1-1-',
userNickname: '1-22用户名',
}]
}]
}
]
},
homepasswordInput: function(e) {
this.setData({
homePassword: e.detail.value
})
},
//家庭新增人员
nickNameInput: function(e) {
this.setData({
nickName: e.detail.value
})
},
//新的成员名称
updatenickNameInput: function(e) {
this.setData({
updatenickName: e.detail.value
})
},
/**
* cell绑定事件,删除触发(删除家庭成员以及家庭)
*/
deleteAction: function(e) {},
/**
* cell绑定事件,滑动触发
*/
slideAction: function(e) {
//拿到角标
var row = e.detail.row;
//获取角标cell
var slideSender = this.selectComponent("#slideitem-" + row);
//在data中定义lastSlideSender 属性,用户记录上一个打开的cell
var lastSlideSender = this.data.lastSlideSender;
//如果存在已经打开的cell则关闭
if (lastSlideSender != null && lastSlideSender != slideSender) {
lastSlideSender.restoreSalid();
}
this.setData({
lastSlideSender: slideSender
})
},
//查询每个家庭的家庭成员
onTap: function(e) {
var range = [];
var range1 = [];
var r;
var key = e.currentTarget.dataset.ide;
let homelistkey = this.data.homelistkey;
var homeid = e.currentTarget.dataset.homeid;
var userphone = e.currentTarget.dataset.userphone;
homelistkey[key].onClick = !homelistkey[key].onClick;
this.setData({
homelistkey
});
},
clickItem(e) {
console.log("这里是子集");
let that=this;
const{homelistkey}=that.data;
var id = e.currentTarget.dataset.id;
homelistkey.forEach(item=>{
item.dataList.forEach(ite => {
if (ite.id == id) {
ite.onClick = !ite.onClick;
}
})
})
console.log(homelistkey);
that.setData({
homelistkey
});
},
alertMessage: function() {
this.setData({
showModal: true
})
},
bindPickerChange: function(e) {
//console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
/**
* 生命周期函数--监听页面加载
*/
onl oad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
addHomePersion(e) {
var globalId = e.currentTarget.dataset.globalid;
//console.log(globalId);
this.setData({
showModal: true,
globalId
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
代码不易，还望鼓励..
标签：function,--,微信,userNickname,height,userPhone,onClick,id,动态化 来源： https://www.cnblogs.com/yuan-xiaohai/p/14119678.html