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

【微信小程序选项卡页面切换】最近搞了个微信小程序切换的demo，有点像头条的那个，我给你大家分享下。

文章图片
这里写图片描述
代码如下：
index.wxml

推荐热点关注 welcome come to 推荐 welcome come to 热点 welcome come to 关注

index.wxss

.tab{float: left; width: 33.3333%; text-align: center; padding: 10rpx 0; } .topTabSwiper{border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; zoom: 1; } .topTabSwiper:after{content: ""; clear: both; display: block; } .tabBorer{border-bottom: 1px solid #f00; color: #f00; } .swiper{width: 100%; } .swiper_con{text-align: center; width: 100%; height: 100%; padding: 80rpx 0; }

index.js

Page({/** * 页面的初始数据 */ data: { currentData : 0, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, //获取当前滑块的index bindchange:function(e){ const that= this; that.setData({ currentData: e.detail.current }) }, //点击切换，滑块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 }) } } })

这个可以在项目用，而且我之前也是见过有这样功能的小程序，特此献出代码，希望能帮到朋友们。
demo下载地址