微信小程序-tab导航栏横向滑动，对应详情长页锚点跳转

微信小程序Tab导航栏实现

最新推荐文章于 2023-05-18 18:06:23 发布

原创

最新推荐文章于 2023-05-18 18:06:23 发布 · 2.1k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

tab导航栏可以横向滑动，竖屏滑动到当前模块时对应的tab变色图标更改同时当前tab会跟随处于tab栏中间；点击tab时当前tab变色，锚点跳转到对应页面。

参考了别人大神的代码，tab带图标并能选中改变的没找到，自己做了修改。

参考的链接：https://www.cnblogs.com/xsffliu/p/11097846.html 感谢~

wxml部分：

1.导航

 <scroll-view class="tab" scroll-x scroll-left="{
  
  {tabScroll}}" scroll-with-animation="true">
                <view class='tab-item {
  
  {nowstatus == "productBox" ? "active" : ""}}' bindtap="toViewClick" data-current="{
  
  {0}}" data-hash="productBox">
                  <image data-current="{
  
  {0}}" data-hash="productBox"  wx:if="{
  
  {currentTab == 0}}" src="../../image/lx-icon/zdrypf-xz.png" class="img"></image>
                  <image data-current="{
  
  {0}}" data-hash="productBox" wx:else src="../../image/lx-icon/zdrypf-wxz.png" alt="" class="img"></image>
                    导航1
                </view>
                <view class='tab-item {
  
  {nowstatus == "commentBox" ? "active" : ""}}' bindtap="toViewClick" data-current="{
  
  {1}}" data-hash="commentBox">
                    <image data-current="{
  
  {1}}"  data-hash="commentBox" wx:if="{
  
  {currentTab == 1}}" src="../../image/lx-icon/cpws-xz.png" class="img"></image>
                    <image data-current="{
  
  {1}}" data-hash="commentBox" wx:else src="../../image/lx-ico