微信小程序之折叠面板--数据动态化、可实现多级
.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
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: 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() {
}
})
代码不易，还望鼓励..
浙公网安备 33010602011771号