效果图:

一、简介

自己的小程序需要实现这样的功能

1.核心思想

swiper 和scroll-view共用两个变量currentTab navScrollLeft，当点击nav或者滑动swiper时设置两个变量的值为当前的index

二、实现

tab导航栏使用<scroll-view>标签，内容使用<swiper>

1.wxml实现

<view class="container"> <!-- tab导航栏 --> <!-- scroll-left属性可以控制滚动条位置 --> <!-- scroll-with-animation滚动添加动画过渡 --> <!-- scroll-x="true" navScrollLeft: 0初值 navData：tab text 使用 wx:for-item 可以指定数组当前元素的变量名， 使用 wx:for-index 可以指定数组当前下标的变量名： --> <!--tabs --> <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}"> <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx"> <!-- 判断是否选中，选中设置样式 --> <!-- switchNav --> <view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav"> {{navItem.text}}</view> </block> </scroll-view> <!-- 页面内容 --> <!-- duration="300"：滑动动画时长 --> <!-- switchTab --> <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab"> <swiper-item wx:for="{{[0,1,2,3,4,5,6]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content"> {{tabItem}} </swiper-item> </swiper></view>

2.js实现

//index.js//获取应用实例const app = getApp()Page({ data: { navData:[ { text: '新闻' }, { text: '表白' }, { text: '外卖' }, { text: '当家教' }, { text: '找家教' }, { text: '租房子' }, { text: '驾校' } ], currentTab: 0, navScrollLeft: 0 }, //事件处理函数 onLoad: function () { }, switchNav(event){ // 获取当前tab 的id var cur = event.currentTarget.dataset.current; //每个tab选项宽度占1/5 var singleNavWidth = this.data.windowWidth / 5; //tab选项居中 this.setData({ navScrollLeft: (cur - 2) * singleNavWidth }) // 判断id是否和点击的tab id 一致 if (this.data.currentTab == cur) { return false; } else { this.setData({ currentTab: cur }) } }, switchTab(event){ var cur = event.detail.current; var singleNavWidth = this.data.windowWidth / 5; this.setData({ currentTab: cur, navScrollLeft: (cur - 2) * singleNavWidth }); }})

3.wxss实现

/**index.wxss**/page { width: 100%; height: 100%;}.container { width: 100%; height: 100%;}.nav { height: 80rpx; width: 100%; box-sizing: border-box; overflow: hidden; line-height: 80rpx; background: #f7f7f7; font-size: 16px; white-space: nowrap; position: fixed; top: 0; left: 0; z-index: 99;}.nav-item { width: 20%; display: inline-block; text-align: center;}.nav-item.active { color: green;}.tab-box { background: rgb(31, 201, 96); padding-top: 80rpx; height: 100%; box-sizing: border-box;}.tab-content { overflow-y: scroll;}

三、参考和总结

此文章参考 https://www.jb51.net/article/169290.htm

解决过程
1.tab的宽度固定为1/5,可以改进成根据tab的内容变化

四、优化

0.效果图

1.每个tab长度自适应 2.先前隔tab点击时

如果当前处于1，点击3时，路径时1-2-3，真机测试后，会直接跳转3，不会影响体验

// *******************************导航栏选择获取id和导航栏的位置************************************** tabSelect(e) { console.log("结果：", e); // 操作新闻数据库 var cur = e.currentTarget.dataset.id; //tab选项居中 this.setData({ // 每一个tab的id TabCur: e.currentTarget.dataset.id, //自适应 scrollLeft: (e.currentTarget.dataset.id) * 60, }) // 判断id是否和点击的tab id 一致 if (this.data.currentTab == cur) { return false; } else { this.setData({ currentTab: cur }) } console.log(e.currentTarget.dataset.id); console.log(this.data.TabCur); console.log("横向滚动条位置", this.data.scrollLeft); }, switchTab(e) { console.log(e); var cur = e.detail.current; this.setData({ TabCur: cur, scrollLeft: cur * 60, }); }

到此这篇关于微信小程序tab左右滑动切换功能的实现代码的文章就介绍到这了,更多相关小程序tab滑动切换内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！