小程序滑动切换页面
程序员文章站
2022-05-20 09:37:19
...
点击切换和滑动切换,只适用于上面导航个数固定的情况。比如2个,4个。
如果导航个数不是死的,是接口出的,不知道有多少个。那请看我之前发的这个帖子 -----> 仿今日头条滑动切换
<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">1</view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">2</view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
<swiper-item>
1
</swiper-item>
<swiper-item>
2
</swiper-item>
</swiper>
Page({
data: {
currentTab: 0,
},
onLoad: function (options) {
/**
* 获取系统信息
*/
wx.getSystemInfo({
success: function (res) {
that.setData({
winWidth: res.windowWidth,
winHeight: res.windowHeight
});
}
});
},
bindChange: function (e) {
this.setData({ currentTab: e.detail.current });
},
/**
* 点击tab切换
*/
swichNav: function (e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
},
})