内容:三个导航栏:附近,全部分类,排序
实现思路:
放两个view的盒子,上面的盒子放三个导航栏,下面放一个存放数据的盒子
下面存放数据的盒子用一个变量来判断是否显示,默认是隐藏,三个导航栏都有一个点击事件,点击的时候拿到对应的id,并且让下面的盒子显示,并且渲染对应id的数据就行了(改变wx:for循环渲染的内容)
<view class='navbtns'>
<view class='navitem nearby' bindtap='navitation' data-id='01'>
附近
<image src="{{selectedNav === '01' ? '../../images/arrow_up.png' : '../../images/arrow_down.png'}}"></image>
</view>
<view class='line'></view>
<view class='navitem sort' bindtap='navitation' data-id='02'>
全部分类
<image src="{{selectedNav === '02' ? '../../images/arrow_up.png' : '../../images/arrow_down.png'}}"></image>
</view>
<view class='line'></view>
<view class='navitem rank' bindtap='navitation' data-id='03'>
排序
<image src="{{selectedNav === '03' ? '../../images/arrow_up.png' : '../../images/arrow_down.png'}}"></image>
</view>
</view>
<view class='wrap'>
<view class='spinner' wx:if='{{showspinner}}'>
<view class='items'>
<block wx:for="{{spinners}}" wx:for-item='item' wx:key="item.id">
<view class='item'>{{item.name}}</view>
</block>
</view>
</view>
</view>
navitation(event) {
let id = event.currentTarget.dataset.id;
const that = this;
console.log(id);
if (id == that.data.selectedNav) {
id = '00';
that.setData({
showspinner: false,
})
} else {
that.setData({
showspinner: true,
})
}
console.log(id);
that.setData({
selectedNav: id,
})
let temps = that.data.spinners;
if (id == '02') {
temps = that.data.sort;
} else if (id == '03') {
temps = that.data.rank;
} else if (id == '01') {
temps = that.data.nearby;
}
that.setData({
spinners: temps,
})
},