WeChat applet tab left and right sliding switch function implementation code

<view class="container">
 <!-- Tab navigation bar -->
 <!-- The scroll-left attribute can control the scroll bar position-->
 <!-- scroll-with-animation scrolling adds animation transition -->
 <!-- 
  scroll-x="true"
  navScrollLeft: 0 initial value navData: tab text
  Use wx:for-item to specify the variable name of the current element of the array.
  Use wx:for-index to specify the variable name of the current index of the array:
  -->

  <!--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">
   <!-- Determine whether it is selected, and set the style if selected-->
   <!-- switchNav -->
   <view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">
    {{navItem.text}}</view>
  </block>
 </scroll-view>


 <!-- Page Content -->
 <!-- duration="300": sliding animation duration -->
 <!-- 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>

//index.js
//Get the application instance const app = getApp()

Page({
 data: {
  navData:[
   {
    text: 'News'
   },
   {
    text: 'Confession'
   },
   {
    text: 'Takeaway'
   },
   {
    text: 'Be a tutor'
   },
   {
    text: 'Find a tutor'
   },
   {
    text: 'rent a house'
   },
   {
    text: 'Driving school'
   }
  ],
  currentTab: 0,
  navScrollLeft: 0
 },
 //Event processing function onLoad: function () {
  
 },
 switchNav(event){
  // Get the id of the current tab
  var cur = event.currentTarget.dataset.current; 
  //Each tab option occupies 1/5 of the width
  var singleNavWidth = this.data.windowWidth / 5;

  //tab option centered this.setData({
   navScrollLeft: (cur - 2) * singleNavWidth
  }) 
  // Check if the id is consistent with the clicked 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
  });
 }
})

/**index.wxss**/
page {
 width: 100%;
 height: 100%;
}

.container {
 width: 100%;
 height: 100%;
}

.nav {
 /* Set tab-nav width and height*/
 height: 80rpx;
 width: 100%;

 /* If you need to place two bordered boxes side by side,
 This can be done by setting box-sizing to "border-box". */
 box-sizing: border-box;

 overflow: hidden;

 /* Center */
 line-height: 80rpx;

 background:
 #f7f7f7;

 font-size: 16px;

 /* Specifies that the text in a paragraph does not wrap: */
 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);
 /* Set this to the height of nav*/
 padding-top: 80rpx;
 height: 100%;
 box-sizing: border-box;
}

.tab-content {
 /* Crop the left/right edges of the content in a div element - if it overflows the element's content area: */
 overflow-y: scroll;
}

// *******************************Navigation bar selects to get the id and the position of the navigation bar**************************************
 tabSelect(e) {
 console.log("Result:", e);
 //Operate news database var cur = e.currentTarget.dataset.id;
 //tab option centered this.setData({
  // The id of each tab
  TabCur: e.currentTarget.dataset.id,
  
  //Adaptive scrollLeft: (e.currentTarget.dataset.id) * 60,
 })

 // Check if the id is consistent with the clicked 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("horizontal scroll bar position", this.data.scrollLeft);
 },
 switchTab(e) {
 console.log(e);
 var cur = e.detail.current;
 this.setData({
  TabCur: cur,
  scrollLeft: cur * 60,
 });
 }