微信小程序滑动选项卡开发源码

　　小程序选项卡的开发有很多种类型，与之对应的选项卡效果也就不一样了。今天小编要为大家介绍的是微信小程序滑动选项卡的开发步骤和小程序码。

　　实现思路：

　　通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是否显示)，达到切换展示电影和游戏的目的

　　代码：

　　1.index.wxml

　　电影 游戏电影列表游戏列表

　　2.index.wxss

　　.swiper-tab { width: 100%; text-align: center; line-height: 80rpx; background-color:white;}.swiper-tab-list { font-size: 30rpx; display: inline-block; width: 50%; color: #777; border-bottom: 0rpx;}.on { color: #da7c0c; border-bottom: 2rpx solid #da7c0c;}.swiper-box { display: block; height: 100%; width: 100%; overflow: hidden;}.swiper-box view { text-align: center;}

　　3.index.js

　　//index.js//获取应用实例var app = getApp()Page( { data: { isShow: true, currentTab: 0, }, swichNav: function (e) { if (this.data.currentTab === e.target.dataset.current) { return false; } else { var showMode = e.target.dataset.current == 0; this.setData({ currentTab: e.target.dataset.current, isShow: showMode }) } },})

　　二：swiper实现块滑动

　　页签1 页签2 Artega 阿斯顿·马丁 奥迪 阿尔法·罗密欧 Artega 阿斯顿·马丁 奥迪 阿尔法·罗密欧

　　//index.js

　　var app = getApp();Page({ data: {}, customData: {}, onLoad: function (params) { //页面加载完成提示 this.data.styles = {}; this.data.styles.curtainViewWidth = 590; this.data.styles.curtainViewRight = -(this.data.styles.curtainViewWidth + 100); this.data.tabIndex = 0; this.data.list = new Array(3); this.changeTab(0); //获取系统信息 var that = this; wx.getSystemInfo({ success: function (info) { that.data.windowHeight = info.windowHeight; that.setData(that.data); console.log(that.data.windowHeight); } }); }, tabItemClick: function (event) { this.changeTab(parseInt(event.currentTarget.id.split("_")[1])); }, swiperChange: function (event) { this.changeTab(event.detail.current); }, changeTab: function (index) { this.data.tabIndex = index; this.setData(this.data); }});

　　//index.wxss

　　/**index.wxss**/.find-car-header { position: fixed; top: 0; left: 0; z-index: 9999; width: 690rpx; height: 88rpx; padding: 0 30rpx; background-color: #eee; border-bottom: 2rpx solid #d2d2d2;}.tab { float: left; width: 330rpx; height: 88rpx;}.tab .tab-item { float: left; width: 140rpx; height: 88rpx; font-size: 30rpx; line-height: 88rpx; text-align: center; color: #333;}.tab .tab-item:first-child { margin-right: 50rpx;}.tab .active { position: relative; color: #0f69d7;}.tab .active:after { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 4rpx; content: ''; background: #0f69d7;}.content { z-index: 0; width: 750rpx; height: 100%; box-sizing: border-box;}.swiper-item { width: 100%; overflow-x: hidden;}.letter-brand-list { width: 720rpx; padding-left: 30rpx; background-color: #fff;}.letter-brand-item { width: 690rpx; height: 90rpx; padding: 10rpx 30rpx 10rpx 0; border-bottom: 1px solid #f0f0f0; font-size: 28rpx; line-height: 90rpx; color: #333;}.letter-brand-list .letter-brand-item:last-child { border: 0;}

　　以上就是开发微信小程序滑动选项卡所需要的代码了，根据文中的代码，再找到相应的教程，你就可以实现微信小程序滑动选项卡了，更多相关资料请关注微信小程序素材网。

　　小程序滚动选项卡怎么开发?

　　微信小程序底部选项卡开发实例

　　微信小程序选项卡切换怎么开发?