Learn the logical interaction of the basic content of the applet

Let's take a look at the effect first. Then come share the structure.
The structure is divided into left and right 3:7 distribution,
the left side is the category, and the right side is the brand corresponding to the category.
The background will return the category on the left in the onload request, and then we will display the data through a loop. Then through the click event, the corresponding brand is requested back.

{ {item.classname}} { {item.brandname}} { {item.brandfloor}} { {item.shangpuhao}}

、、、、、js

data:{
id:0,
pres:[
{
classid: 0,
classname: "全部",
id:0
},
{
classid: 50,
classname: "家具",
id:1
},
{
classid: 40,
classname: "瓷砖",
id:2
}
]
}

Data structure

chooseBrand(e){ var classid = e.currentTarget.dataset.classid; //Get a custom id let ids = e.currentTarget.dataset.id this.click(classid,ids) //Request the corresponding data } , click : function (classid,ids) { console.log(classid) let that = this wx.showLoading({ title: 'Loading', }) wx.request({ url: app.globalData.siteurlh5 + '/api /brand.php', method:'get', data:{ shopid: wx.getStorageSync('shopid'), classid: classid }, success(res) { console.log(res) that.setData({ goods:res .data }) }, fail(res) {
























wx.showToast({ title: 'The server is busy, please try again later', icon: 'none', duration: 4000 }) }, complete(res) { setTimeout(function () { wx.hideLoading() }, 500 ) } }) this.setData({ id: ids, //Assign the obtained custom id to the id of the current component (ie get the current component) })

},

、、、、、、css
.tab-container{
margin-top:20rpx;
display: flex;
flex-direction: row;
z-index: 1;
}
.tab-list{
width:200rpx;
}
.tab-list>view{
width:100%;
height:90rpx;
line-height:90rpx;
text-align:center;
font-size:28rpx;
}
.noclick{
background:#f9f9f9;
color:#888;
}

.click{
background:#fff;
color: black;
}

.tab-item{
display: flex;
padding:20rpx;
}
.brand-img{
width:139rpx;
height:80rpx;
display:block;
margin:0 auto;
}