微信小程序 scroll-view 实现tab导航栏滑动

我们在做微信小程序时，应该很大可能会用上这种导航栏！
直接看效果图：

点击tab 可自由实现滑动，下面来看看我的实现方法！
wxml:

<scroll-view  class="za" scroll-into-view="{{ztoView}}" scroll-x="true" scroll-with-animation="true">
    <view class="zb" wx:for="{{zlist}}" wx:key="index" id="{{'list' + index}}" data-zid="{{ index }}" catchtap="ztab">
      {{item}}
    </view>
</scroll-view>

知识点1：
scroll-into-view 属性是滑动到某个id上，scroll-into-view="{{ztoView}}"，意思就是滑动到id为 {{ztoView}} 的子元素。
scroll-with-animation=“true”， 该属性是支持过渡效果。

js:

//index.js
//获取应用实例
const app = getApp()

Page({
  

  data: {
    ztoView: '',
    zlist: ["首页", "农业", "飞机", "电脑","首页2", "农业2", "飞机2", "电脑2"]
  },


  ztab: function(e){
    let zid = e.currentTarget.dataset.zid;
    console.log(zid);
    zid = zid - 2;    //  判断当点击后面的几个才触发往后滑 往回滑的判断，zid-
    if (zid < -1) {
      zid = -1
    }
    let zidstr = 'list' + zid;
    this.setData({
      ztoView: zidstr
    })
  }
})

知识点2：
判断 zid ，来触发点击，是否需要滑动。
zid = zid - 2; // 判断当点击后面的几个才触发往后滑 往回滑的判断，zid-
if (zid < -1) {
zid = -1
}

wxss:

page{
  height: 100%;
}


.za{
height: 80rpx;
line-height: 80rpx;
width: 750rpx;
white-space: nowrap;
background-color: aqua;
}
.zb{
display: inline-block;
padding: 0 11px;
margin-left: 20rpx;
background-color: #0094ff;
}