效果：
wxml
<view class='warp'>
<view class='list'>
<view class='style {{item.id==num?"active":""}}' catchtap='clickList' wx:for="{{message}}" wx:key="" id="{{index}}">{{item.text}}</view>
</view>
<view class='list2'>
<view class='content' wx:for="{{content}}" wx:key="index">{{item.text}}</view>
</view>
</view>
wxss
.warp {
width: 100%;
height: 100%;
background: #fafafa;
display: flex
}
.list {
width: 200rpx;
height: 100%;
background-color: #f2f2f2;
}
.list2 {
width: 200rpx;
height: 100%;
background-color: #d3d3d3;
}
.style {
width: 200rpx;
height: 100rpx;
line-height: 100rpx;
padding-left: 20rpx;
box-sizing: border-box;
}
.content {
background-color: #d3d3d3;
width: 200rpx;
height: 100rpx;
line-height: 100rpx;
padding-left: 20rpx;
/* box-sizing: border-box; */
/* display: flex;
flex-direction: column;
justify-content: center;
align-items: center; */
}
.active{
color: red;
font-weight: bold;
background-color: #fafafa;
}
js
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
num:'',
content:'请选择',
message:[
{
id:'0',
text:"商区",
children:[
{
id:'0',
text:"爸爸1",
},
{
id:'0',
text:"爸爸2",
}
]
},
{
id: '1',
text:'地铁',
children:[
{
id:'0',
text:"妈妈1",
},
{
id:'0',
text:"妈妈2",
}
]
},
]
},
clickList:function(e){
console.log(e)
let num = e.target.id
console.log(num)
let content = this.data.message[num].children
console.log(content.text)
this.setData({
num:num,
content:content
})
console.log(this)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})