:-: <div style="font-size:20px;font-weight:bold;color:#576b95;">
商城类组件
</div>
---
> 商城常用顶部菜单
wxml:
<scroll-view class="topmenu" scroll-x="true">
<block wx:for="{{topMenu}}" wx:key='tmenu'>
<view class='{{mshow==index?"topmenu_btn_act":"topmenu_btn"}}' data-id="{{index}}" data-cid="{{item.cid}}" catchtap='menubtn'>{{item.menu_title}}</view>
</block>
</scroll-view>
wxss:
.topmenu{display: flex;white-space: nowrap; position: fixed; background-color: #fff;border-bottom: 1px #d4d4d4 solid;z-index: 1; }
.topmenu_btn{display: inline-block;margin:0 30rpx 0 15rpx;padding:25rpx 0;font-size: 28rpx;color: #515151;}
.topmenu_btn_act{display: inline-block;margin:0 30rpx 0 15rpx;padding:20rpx 0;font-size: 28rpx; color: #e02e24;border-bottom: 3px #e02e24 solid; }
js:
data: {mshow:'0'}
menubtn:function(e){
let id = e.currentTarget.dataset.id
let cid = e.currentTarget.dataset.cid
this.setData({
mshow:id
})
}
> 商城常用顶部菜单
wxml:
<scroll-view class="topmenu" scroll-x="true">
<block wx:for="{{topMenu}}" wx:key='tmenu'>
<view class='{{mshow==index?"topmenu_btn_act":"topmenu_btn"}}' data-id="{{index}}" data-cid="{{item.cid}}" catchtap='menubtn'>{{item.menu_title}}</view>
</block>
</scroll-view>
wxss:
.topmenu{display: flex;white-space: nowrap; position: fixed; background-color: #fff;border-bottom: 1px #d4d4d4 solid;z-index: 1; }
.topmenu_btn{display: inline-block;margin:0 30rpx 0 15rpx;padding:25rpx 0;font-size: 28rpx;color: #515151;}
.topmenu_btn_act{display: inline-block;margin:0 30rpx 0 15rpx;padding:20rpx 0;font-size: 28rpx; color: #e02e24;border-bottom: 3px #e02e24 solid; }
js:
data: {mshow:'0'}
menubtn:function(e){
let id = e.currentTarget.dataset.id
let cid = e.currentTarget.dataset.cid
this.setData({
mshow:id
})
}
