本文实例讲述了微信小程序自定义可滑动顶部标签栏选项卡实现页面切换功能。分享给大家供大家参考，具体如下：

顶部滚动选项卡

话不多说，直接上代码

pages/home/home.wxml

滚动-视图滚动-x='真'样式='宽度： 100%；空白： nowrap'！-tab-view class=' tab ' view class=' tab-nav ' style=' font-size :12 px ' view wx : for=' { { tab nav。tabit em } } ' bind tap=' SetTab ' data-tabindex=' { { index } } ' style=' min-width 336020 '；最大宽度：20%;文本对齐：居中；高度： 80rpx背景# fffborder-bottom:{{index4？1px固体# ddd: ' ' } } ' { { item。text } }/view view view class=' tab-line ' style=' width : { { 100/tab nav。tab num } } %；transform : translatex({ { 100 * show tab } } %)；"/view/view/view/scroll-view swiper current=' { { current tab } } ' class=' swiper-box ' duration=' 300 ' style=' height :150 rpx ' bind change=' bind change ' swiper-item view分类1/视图/swiper-项目擦拭器-项目视图分类2/查看/刷机-项目擦拭器-项目视图分类3/查看/刷机-项目擦拭器-项目视图分类4/查看/刷机-项目擦拭器-项目视图分类5/查看/刷机-项目擦拭器-项目视图分类6/view/swiper-item/swiperpages/home/home页面样式表。选项卡{ display : flex flex-direction :柱；}.tab-nav {边框-底部： 1rpx实心# DDD；宽度： 100%;高度： 80rpxdisplay: flex线高： 79 rpx相对位置：}.tab-line {位置：绝对；左： 0；底部：-1rpx；高度： 4rpx背景技术# f7982atransition:全部0.3s}。选项卡-内容{ flex : 1；溢出-y:自动；溢出-x:隐藏；}/*选项卡页面联动切换*/.swiper-tab { width : 100%；边框-底部： 2rpx实心# 777;文本对齐：中心；线高： 80 rpx}.swiper-tab-list { font-size : 30 rpx；显示器：内联块；宽度： 33.33%;color: # 777}。在{ color : # da7c 0 cborder-bottom : 1rpx实心# da7c0c}。swiper-box { display : block；高度： 100%;宽度： 100%;飞越：隐藏；}.开关盒视图{ text-align :居中；}页面/主页/主页。射流研究…

页面({data: {showtab: 0，//顶部选项卡索引tabnav: {tabnum: 5，tabitem: [{'id': 0，' text': '分类1'}，{'id': 1 '，文本' : '分类2'}，{'id': 2 '，文本' : '分类3'}，{'id': 3 '，文本' : '分类4'}，{'id': 4 '，文本' : '分类5'}，{'id': 5，' text': '分类6'}]}，productList: []，//选项卡切换currentTab: 0，}，onLoad:函数(){}，setTab:函数(e) {var即=thith。设置数据({显示标签: e .当前目标。数据集。tabindex })if(this。数据。当前tabb===e .当前目标。数据集。tabindex){ return false；}否则{那。setdata({当前选项卡3360 e .当前目标。数据集。tabindex })}，/***滑动切换tab*/bindChange:函数{ var=this那个。setdata({当前选项卡： e . detail。当前，显示选项卡： e . detail。当前})；}})该代码实现基于两个大神的代码，(链接： https://www.jb51.net/article/161227.htm和https://www。JB 51。net/article/155522。htm)，在两位大神的基础上衍生出的可滚动的顶部选项卡，在此致谢。代码缺陷：当向右滑动到第6个页面的时候选项卡没有自动滑动。

希望本文所述对大家微信小程序开发有所帮助。