§ ITPOW >> 文档 >> 微信开发

作者：vkvi 来源：ITPOW（原创） 日期：2017-4-26

.wxml 代码

<view class="nav"> <view data-navitem="1" class="{{currentNavItem == 1 ? 'current' : ''}}" bindtap="chngNavItem">全部</view> <view data-navitem="2" class="{{currentNavItem == 2 ? 'current' : ''}}" bindtap="chngNavItem">手机</view> <view data-navitem="3" class="{{currentNavItem == 3 ? 'current' : ''}}" bindtap="chngNavItem">电脑</view> <view data-navitem="4" class="{{currentNavItem == 4 ? 'current' : ''}}" bindtap="chngNavItem">音响</view> </view>

有个 data-navitem 标明当前项对应的数值。

.js 代码

data: { currentNavItem: 1 }, chngNavItem: function(e){ this.setData({ currentNavItem: e.target.dataset.navitem }); }

currentNavItem 与前面的 .wxml 页面配置，决定在哪一项显示 current。

而点击菜单项后，触发 chngNavItem，它读取当前 view 的 dataset 中的 navitem，赋给 currentNavItem。

固定顶部菜单

.nav { display:flex; flex-direction:row; position:fixed; padding:20rpx 0px; width:100%; background:#fff; z-index:9999; } .nav view { width:20%; border-bottom:4rpx solid #fff; text-align:center; } .nav view.current { border-bottom:4rpx solid #f00; }

也就是写 CSS，position:fixed，并注意增大 z-index。