微信 小程序组件 分页加强版
JS
// 左侧菜单栏焦点控制函数
keyMenu: function (e) {
var mlindex = e.currentTarget.dataset.mlindex;
this.setData({
curNav: mlindex,
})
},
//数据
curNav: 0,
mrlist:[
[
{ list: "现货/期货" },
{ list: "期货" },
{ list: "现货/期货" },
{ list: "现货" },
{ list: "现货/期货" }
],
[
{ list: "现货" },
{ list: "期货" },
{ list: "现货" },
{ list: "现货" },
{ list: "现货" }
],
[
{ list: "期货" },
{ list: "期货" },
{ list: "期货" },
{ list: "现货" },
{ list: "期货" }
],
[
{ list: "现货/期货" },
{ list: "期货" },
{ list: "现货/期货" },
{ list: "现货" },
{ list: "现货/期货" }
],
]
//HTML、
<view class='m-f-left'>
<block wx:key="mleft" wx:for="{{mlmenu}}" wx:for-item="mlitem" wx:for-index="mlindex">
<view class="left-item flexca {{curNav == mlindex?'menuctive':''}}" data-mlindex='{{mlindex}}' bindtap='keyMenu'>
<text>{{mlitem.menu}}</text>
</view>
</block>
</view>
<view class='m-f-right'>
<block wx:key="mright" wx:for="{{mrlist[curNav]}}" wx:for-item="mritsm" wx:for-index="mrindex">
<view class="right-item flexca">
<text>{{mritsm.list}}</text>
</view>
</block>
</view>
//wxcss
.classify-content{
flex: 1;
}
.classify-m,.classify-f{
width: 100%;
height: 100%;
display: flex;
}
.m-f-left{
width: 174rpx;
height: 100%;
">white;
overflow: hidden;
font-size: 30rpx;
color: #333333;
}
.m-f-left .left-item{
height: 88rpx;
border-bottom: 1px solid #F7f7f7;
border-left: 8rpx solid transparent;
}
.m-f-left>view:first-child{
border-top: 1px solid #F7f7f7;
}
.m-f-left .menuctive{
">#f7f7f7;
border-left: 8rpx solid #839aaf;
color: #839aaf;
}
.m-f-right{
padding: 40rpx 20rpx 40rpx 40rpx;
width: 576rpx;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
overflow: hidden;
}
.m-f-right .right-item{
width: 152rpx;
height: 60rpx;
padding: 0 10rpx;
">white;
border-radius: 10rpx;
font-size: 26rpx;
margin: 0 20rpx 20rpx 0;
color: #666666;
box-sizing: border-box;
overflow: hidden;
}
.m-f-right .right-item text{
font-size: 24rpx;
max-width: 142rpx;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
