微信小程序选项卡页面切换

选项卡效果切换如下：滑动即可对应切换

wxml代码

<view class='TabSwiper'><view class='tab  {{currentData == 0 ? "tabBorer" : ""}}'  data-current = "0" bindtap='checkCurrent'>游戏</view><view class='tab  {{currentData == 1 ? "tabBorer" : ""}}'  data-current = "1" bindtap='checkCurrent'>专题</view><view class='tab  {{currentData == 2 ? "tabBorer" : ""}}'  data-current = "2" bindtap='checkCurrent'>挑战</view>
</view>
<swiper current="{{currentData}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange"><swiper-item><view class='swiper_con'>1.游戏</view></swiper-item> <swiper-item><view class='swiper_con'>2.专题</view></swiper-item><swiper-item><view class='swiper_con'>3.挑战</view></swiper-item>
</swiper>

wxss代码：

.tab{float: left;width: 33.3333%;text-align: center;padding: 10rpx 0;}
.TabSwiper{  width: 100%;height: 150rpx;line-height: 150rpx;display: flex;flex-direction: row;background-color: rgb(248, 248, 248);}
.tabBorer{border-bottom: 1px solid blue; color: blue;
}
.swiper{width: 100%;
}
.swiper_con{text-align: center;width: 100%; height: 100%; padding: 80rpx 0;
}

js代码：

Page({data: {currentData: 0,},//获取当前滑块的indexbindchange: function (e) {const that = this;that.setData({currentData: e.detail.current})},onLoad: function () {},//点击切换，滑块index赋值checkCurrent: function (e) {const that = this;if (that.data.currentData === e.target.dataset.current) {return false;} else {that.setData({currentData: e.target.dataset.current})}}})

微信小程序选项卡页面切换相关推荐

PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
微信小程序tabar页面不触发onShow
微信小程序tabar页面不触发onShow [场景]: 开发中,原本js里面没有onShow方法,后面加上了onShow, 除了第一次页面加载调用了onShow方法,之后切换页面都没有触发. [解决办 ...
如何实现两个微信小程序之间的切换跳转
如何实现两个微信小程序之间的切换跳转 wx.navigateToMiniProgram({appId: '***************', //跳转目标小程序的appIdpath: '/pages/ ...
微信小程序点击切换tab跟随动画
微信小程序点击切换tab跟随动画 <view class='tabbox'><view wx:for="{{title}}" class='tab {{curr ...
微信小程序之页面打开数量限制
微信小程序之页面打开数量限制无论是在小程序还是APP中,打开一个页面其实就是创建了一个新的View对象,一层层叠加的.当点击页面的回退按钮就是把当前页面关闭. 这个过程中会涉及到一个问题,就是打开页 ...
微信小程序：页面传递中文出现乱码
微信小程序:页面传递中文 decodeURIComponent() 参考微信小程序页面中文传参Option获取参数乱码问题
微信小程序某个页面直接返回首页（微信小程序回退到首页）
微信小程序某个页面直接返回首页(微信小程序回退到首页) 打开小程序后,到三级页面后点击左上角的返回按钮,能够直接返回到首页正常 A -> B -> C 都是通过 wx.navigate ...
uniapp开发微信小程序-4.页面跳转与横向滑动
uniapp开发微信小程序-4.页面跳转与横向滑动本篇文章主要是想记录一下横向滑动功能,备忘的同时给大家做个分享. 但既然是初级分享系列文章,为了方便新手朋友的上手工作,还是在此之前说一下页面跳转的 ...
微信小程序开发-页面跳转传递参数
微信小程序开发-页面跳转传递参数页面跳转有四种方式,分别为wx.navigateTo.wx.redirectTo.wx.reLaunch.wx.switchTab,前面三种可通过url路径携带参数实 ...
微信小程序--简单页面跳转
微信小程序--简单页面跳转例如:点击一个text ,跳转入一个新的页面blueberry.wxml 首先对text 设置监听事件 <view bindtap="toast" ...

微信小程序选项卡页面切换

微信小程序选项卡页面切换相关推荐

最新文章

热门文章