WeChatアプレットタブの左右スライドスイッチ機能実装コード

<ビュークラス="コンテナ">
 <!-- タブ ナビゲーション バー -->
 <!-- scroll-left 属性はスクロール バーの位置を制御できます -->
 <!-- scroll-with-animation スクロールはアニメーション遷移を追加します -->
 <!-- 
  スクロールx="true"
  navScrollLeft: 初期値 0 navData: タブテキスト
  配列の現在の要素の変数名を指定するには、wx:for-item を使用します。
  配列の現在のインデックスの変数名を指定するには、wx:for-index を使用します。
  -->

  <!--タブ -->
 <スクロールビュー 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​​">
   <!-- 選択されているかどうかを判断し、選択されている場合はスタイルを設定します-->
   <!-- スイッチナビゲーション -->
   <view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">
    {{navItem.text}} 表示>
  </ブロック>
 </スクロールビュー>


 <!-- ページコンテンツ -->
 <!--duration="300": スライドアニメーションの持続時間 -->
 <!-- スイッチタブ -->
 <スワイパー class="tab-box" current="{{currentTab}}" 期間="300" bindchange="switchTab">
  <スワイパーアイテム wx:for="{{[0,1,2,3,4,5,6]}}" wx:for-item="タブアイテム" wx:for-index="idx​​" wx:key="idx​​"
   クラス="タブコンテンツ">
   {{タブアイテム}}
  </スワイパーアイテム>
 </スワイパー>
</ビュー>

//index.js
//アプリケーションインスタンスを取得する const app = getApp()

ページ（{
 データ： {
  ナビデータ:[
   {
    テキスト: 「ニュース」
   },
   {
    テキスト: 「告白」
   },
   {
    テキスト: 「テイクアウト」
   },
   {
    テキスト: 「家庭教師になる」
   },
   {
    テキスト: 「家庭教師を探す」
   },
   {
    テキスト: 「家を借りる」
   },
   {
    テキスト: 「自動車学校」
   }
  ]、
  現在のタブ: 0,
  navScrollLeft: 0
 },
 //イベント処理関数 onLoad: function () {
  
 },
 switchNav(イベント){
  // 現在のタブのIDを取得します
  var cur = event.currentTarget.dataset.current; 
  //各タブオプションは幅の1/5を占めます
  var singleNavWidth = this.data.windowWidth / 5;

  //タブオプションを中央に配置する this.setData({
   navScrollLeft: (現在 - 2) * シングルナビゲーション幅
  }) 
  // IDがクリックされたタブIDと一致しているかどうかを確認します if (this.data.currentTab == cur) {
   false を返します。
  } それ以外 {
   this.setData({
    現在のタブ: cur
   })
  }
 },
 
 switchTab(イベント){
  var cur = イベントの詳細.current;
  var singleNavWidth = this.data.windowWidth / 5;
  this.setData({
   現在のタブ: cur,
   navScrollLeft: (現在 - 2) * シングルナビゲーション幅
  });
 }
})

/**index.wxss**/
ページ {
 幅: 100%;
 高さ: 100%;
}

。容器 {
 幅: 100%;
 高さ: 100%;
}

.nav {
 /* タブナビゲーションの幅と高さを設定する*/
 高さ: 80rpx;
 幅: 100%;

 /* 2つの枠線付きボックスを並べて配置する必要がある場合、
 これは、box-sizing を "border-box" に設定することで実行できます。 */
 ボックスのサイズ: 境界線ボックス;

 オーバーフロー: 非表示;

 /* 中心 */
 行の高さ: 80rpx;

 背景：
 #f7f7f7;

 フォントサイズ: 16px;

 /* 段落内のテキストが折り返されないことを指定します: */
 空白: ラップなし;

 位置: 固定;
 上: 0;
 左: 0;
 zインデックス: 99;
}

.nav-item {
 幅: 20%;
 表示: インラインブロック;
 テキスト配置: 中央;
}

.nav-item.active {
 色：
 緑;
}

.タブボックス{
 背景：
 rgb(31, 201, 96);
 /* これをナビゲーションの高さに設定します*/
 パディングトップ: 80rpx;
 高さ: 100%;
 ボックスのサイズ: 境界線ボックス;
}

.タブコンテンツ{
 /* div 要素内のコンテンツの左端/右端を切り取ります - 要素のコンテンツ領域からオーバーフローする場合: */
 overflow-y: スクロール;
}

// ****************************** ナビゲーション バーを選択すると、ナビゲーション バーの ID と位置が取得されます ********************************************
 タブ選択(e) {
 console.log("結果:", e);
 //ニュースデータベースを操作する var cur = e.currentTarget.dataset.id;
 //タブオプションを中央に配置する this.setData({
  // 各タブのID
  TabCur: e.currentTarget.dataset.id、
  
  //適応スクロール左: (e.currentTarget.dataset.id) * 60,
 })

 // IDがクリックされたタブIDと一致しているかどうかを確認します if (this.data.currentTab == cur) {
  false を返します。
 } それ以外 {
  this.setData({
  現在のタブ: cur
  })
 }
 console.log(e.currentTarget.dataset.id);
 コンソールにログ出力します。
 console.log("水平スクロールバーの位置", this.data.scrollLeft);
 },
 スイッチタブ(e) {
 コンソールログ(e);
 var cur = e.detail.current;
 this.setData({
  TabCur: cur、
  スクロール左: cur * 60,
 });
 }