先看一下效果
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也可以达到这样的效果,但是我觉得使在这样的场景使用轮播不太实际,这里就不说啦!