简介

看到今天的头条小程序页面可以滑动切换，标签导航栏也会滚动，点击标签导航，页面会滑动，导航栏也会滚动，就想着怎么实现这个功能

如果像商场这样的商品品类做成左右滑动切换品类，用户体验应该会好很多。我在这里只是一个小小的演示，不考虑数据问题。我主要是想实现这样一个功能，以后有可能引入数据。会有问题，欢迎互相讨论。

解决过程

1.当我想意识到这个问题的时候，我发现了很多别人的博客。主页的布局相对统一。标签导航栏使用滚动视图标签，内容使用swiper。希望自己参考api文档，但多解释一下。

布局代码如下：

页面结构

视图类='容器'！-选项卡导航栏-！-向左滚动属性可以控制滚动条位置-！-带动画滚动以添加动画过渡-滚动-视图滚动-x=' true ' class=' nav ' scroll-left=' { { nav scroll left } } '带动画滚动=' { { true } } ' block wx : for=' { { nav data } } ' wx : for-index=' idx ' wx : for-item=' navItem ' wx 3360 key=' idx ' view class=' nav-item ' { { current tab='active ' : ' ' } } ' data-current=' { { idx } } ' bind tap=' SwitChNav ' { { naviTem . text } }/view/block/scroll-view！-page content-wiper class=' tab-box ' current=' { { current tab } } ' duration=' 300 ' bind change=' switch tab ' wiper-item wx : for=' {[0，1，2，3，4，5，6，7 8]} ' wx : for-item=' tabItem ' wx : for-index=' idx ' wx : key=' idx ' class=' tab-content ' { tabItem } }/swi

/* * index . wxss * */page { width : 100%；高度： 100%；}.容器{宽度： 100%；高度： 100%；}.nav { height: 80rpx宽度： 100%；盒子尺寸：边框盒子；飞越：隐藏；线高： 80 rpx；background : # f7f 7；font-size : 16px；white-space : nowrap；位置：固定；top : 0；left : 0；z-index : 99；}.导航项目{ width : 20%；display:内联块；文本对齐：中心；}.nav-item . active { color : red；}.tab-box { background : green yellow；padding-top : 80 rpx；高度： 100%；盒子尺寸：边框盒子；}.tab-内容{溢出-y:滚动；}js

//index.js//获取应用程序实例constapp=getapp()页面({ data : { motto : ' hello world '，userinfo 3360 }，hasuserinfo3360 false，caniseue : wx . cani use(' button。open-type.getuserinfo ')、nav data :[{ text : ' home page ' }、{text3360' health'}、{text3360' emotion'}、{text:' workplace' }、{ text: ' parenting ' }、{ text : ' distribution ' }、{text:' green' }、{ text 3: ' class ' }]、currentapp。user infoready callback=RES={ this . setdata({ user info 3360 RES . user info，hasuserinfo : true })} } else {//没有兼容处理wx.getuserinfo的open-type=getUserInfo版本({ success : RES={ app . global data . user info=RES . userinfo his . setdata({ userinfo 3360 RES . user in)fo，hasuserinfo : true })})} wx }。//每个制表符选项的宽度占1/5 var singlenavWidth=this.data.windowwidth/5;//制表符选项居中。setdata({ navcrolleft :(cur-2)* single navwidth })if(this。data . current tab==cur){ return false；} else { this . setdata({ current tab : cur })}，SwitChtab(event){ var cur=event . detail . current；var single navwidth=this . data . window width/5；this . setdata({ current tab : cur，navcrolleft :(cur-2)* single navwidth })；}})页面代码就像上面三部分一样，可以直接新建一个项目进行测试

效果图如下

需要注意的事项

在处理底部页面滑动之后的顶部选项卡导航时遇到的一个问题是在滚动视图中将值赋给scrll-left时遇到的问题

从逻辑上讲，当tab导航索引小于2时，导航栏不滚动，大于2时，向左滑动，使选定的导航栏居中。但是，当最左边的选项因为向左滑动而看不到时，我点击最左边的选项，希望导航到右边，这样就可以看到左边的导航。根据上面的js代码，向左滚动会产生负值，但是即使向左滚动是负值，但是滚动条不会向左缩进，所以即使是负值，也相当于0。当时我在想怎么逻辑解决这个问题，想着写各种判断，计算距离。结果直接在代码最后一句赋值就搞定了，我无语了。

摘要

以上是边肖介绍的小微信程序标签切换跟随滚动滑动切换导航栏的实现代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！