Page({
data: {
activeId:2,
typelist:[
{
id:1] ,
title:"家具"}, {
id:2,
title: "家具"}, {
id:3,
title: "家具"}、{
id:4,
title: "家具" }、{
id:5,
title: "家具"
}
]
},
onLoad: 関数 (オプション) {
} ,
selectType(e){
this.setData({
activeId: e.currentTarget.dataset.id
})
}
})
##--------------------------------- ---wxml<クラス="コンテナ" を表示><クラス="左" を表示>#<view wx:for="{{typelist}}" class="{{itme.id==activeId?'active':''}}"
bindtap="selectType" data-Id="{{item.id}}">
{{item.title}}
</view></view>
<view class="right"></view>
</view>
----------- -----------------------
wxss
.left{
width: 250rpx;
背景: #eee;
高さ: 1000rpx;
}
.左ビュー{
パディング: 10px 0px;
text-align: center;
}
.left view.active{
color: burlywood;
background: #fff;
}
.right{
flex: 1;
}
.comtainer{
ディスプレイ: フレックス;
最小高さ: 100vh;
}