先看一下效果
wxml代码
<view class="container"><view class="nav"><view class="item {{current == '0' ? 'active' : ''}}" catchtap="onClick" data-id="0">首页</view><view class="item {{current == '1' ? 'active' : ''}}" catchtap="onClick" data-id="1">分类</view><view class="item {{current == '2' ? 'active' : ''}}" catchtap="onClick" data-id="2">发现</view><view class="item {{current == '3' ? 'active' : ''}}" catchtap="onClick" data-id="3">收藏</view><view class="item {{current == '4' ? 'active' : ''}}" catchtap="onClick" data-id="4">我的</view></view><view class="list"><block wx:for="{{newslist}}" wx:for-index="idx"><view class="detail" wx:if="{{idx == current}}">{{item.text}}</view></block></view></view>
在这部分代码中使用了自定义属性data-、三元运算、列表渲染和条件渲染。在这里特别要注意的是：wx:if="{{idx == current}}这个idx变量必须要在<block wx:for="{{newslist}}" wx:for-index="idx">这进行声明，如果没有声明，默认为index，也必须是index。微信官方文档中是这样写的：使用 wx:for-index 可以指定数组当前下标的变量名 默认数组的当前项的下标变量名默认为 index。
wxss代码
page{width: 100%;height: 100%;}.container{display: flex;flex-direction: column;height: 100%;}.nav{width: 100%;height: 100rpx;background-color: skyblue;display: flex;flex-direction: row;justify-content: space-around;}.item{font-size: 32rpx;color: #fff;height: 50rpx;width: 100rpx;line-height: 50rpx;align-self: center;text-align: center;}.active{background-color: darkgray;border-radius: 10rpx;}.list{width: 100%;height: 100%;display: flex;background-color: pink;}.detail{margin: auto;}
js代码
data: {current:0,newslist:[{text:'这是首页界面内容'},{text:'这是分类界面内容'},{text:'这是发现界面内容'},{text:'这是收藏界面内容'},{text:'这是我的界面内容'}]},onClick:function(event){var index = event.currentTarget.dataset.id;this.setData({current:index})},
点击导航按钮获取自定义属性值，并赋值于current。
其实使用轮播组件swiper也可以达到这样的效果，但是我觉得使在这样的场景使用轮播不太实际，这里就不说啦！
