微信 小程序组件 分页加强版

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{

100%;

height: 100%;

display: flex;

}

.m-f-left{

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;

576rpx;

box-sizing: border-box;

display: flex;

flex-wrap: wrap;

align-content: flex-start;

overflow: hidden;

 

}

.m-f-right .right-item{

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- 142rpx;

white-space: nowrap;

overflow: hidden;

text-overflow:ellipsis;

}