HTML页面：
<view class="box">
<view class="fenlei">
<scroll-view scroll-y="true" style="height: 100vh;">
<view class="{{countindex==index?'active':''}} fenlei-item" wx:for="{{categories}}" wx:key="index" wx:for-item="categories" bindtap="get" data-children="{{categories.children}}" data-index="{{index}}">
{{categories.name}}
</view>
</scroll-view>
</view>
<view class="content">
<scroll-view scroll-y="true" style="height: 100vh;">
<view wx:for="{{categories}}" wx:key="index" wx:for-item="icon">
<view wx:for="{{icon.children}}" wx:key="index" wx:for-item="list">
<block wx:if="{{pid==icon.id}}">
{{list.name}}
</block>
</view>
</view>
</scroll-view>
</view>
</view>
CSS样式：
.box {
display: flex;
}
.fenlei {
height: 100vh;
background: #ccc;
}
.content {
flex: 1;
height: 100vh;
background: red;
}
.fenlei-item {
width: 100%;
line-height: 150rpx;
text-align: center;
background-color: #F7F8FA;
box-sizing: border-box;
border-bottom: 1px dashed #ccc;
}
.active {
border-left: 5px solid rgb(64, 180, 70);
background: #ccc;
}
JS文件： 路径没有写，具体按照自己的接口来获取数据
Page({
/**
* 页面的初始数据
*/
data: {
categories: [],
children: [],
countindex: 0,
pid: 1
},
get(e) {
let index = e.currentTarget.dataset.index
// console.log(e.currentTarget.dataset.id);
// console.log(e.currentTarget.dataset.children);
// console.log(e.currentTarget.dataset.index);
if (this.data.countindex != index) {
this.setData({
countindex: index
})
}
this.setData({
children: e.currentTarget.dataset.children,
})
this.data.children.forEach(r => {
this.setData({
pid: r.pid
})
console.log(this.data.pid);
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.request({
method: 'GET',
url: '路径',
header: {
Authorization: wx.getStorageSync('token')
},
success: (res => {
// console.log(res);
this.setData({
categories: res.data.categories
})
// console.log(res.data.categories);
})
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
