WeChatアプレットが連携メニューを実現

<!-- 左スクロールバー-->
<ビュークラス = 'total'>
<view class='under_line'></view>
<view style='float: left' class='left'>
  <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY' style='height: {{winHeight}}px'>
    <view class='すべてクリア'>
      <block wx:key="リスト" wx:for="{{リスト}}">
        <view bindtap='jumpIndex' data-menuindex='{{index}}'>
          <view class='テキストスタイル'>
            <text class="{{indexId==index?'active1':''}}">{{item}}</text>
            <text class="{{indexId==index?'active':''}}"></text>
          </ビュー>
        </ビュー>
      </ブロック>
    </ビュー>
  </スクロールビュー>
</ビュー>

<!--右列-->
<view class="right">
    <!--indexId 値を判断して異なるページを表示します-->
     <view wx:if="{{indexId==0}}">
        <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY2' style='height: {{winHeight}}px'>
        <view class='すべてクリア'>
        <block wx:key="lists_r0" wx:for="{{lists_r0}}">
        <view bindtap='jumpIndexR0' data-menuindex='{{index}}'>
          <view class='text-style2'>
            <text class="{{indexIdr0==index?'active2':''}}">{{item}}</text>
            <text class="{{indexIdr0==index?'active3':''}}"></text>
          </ビュー>
        </ビュー>
        </ブロック>
        </ビュー>
        </スクロールビュー>
      </ビュー>

      <view wx:if="{{indexId==1}}">
      <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY2' style='height: {{winHeight}}px'>
        <view class='すべてクリア'>
        <ブロック wx:key="lists_r1" wx:for="{{lists_r1}}">
        <view bindtap='jumpIndexR0' data-menuindex='{{index}}'>
          <view class='text-style2'>
            <text class="{{indexIdr0==index?'active2':''}}">{{item}}</text>
            <text class="{{indexIdr0==index?'active3':''}}"></text>
          </ビュー>
        </ビュー>
        </ブロック>
        </ビュー>
        </スクロールビュー>
      </ビュー>
      
     </ビュー>
</ビュー>

.アンダーライン{
  幅: 100%;
  上境界線: 1rpx 実線 #efefef;
}

。左 {
  上境界線: 1rpx 実線 #efefef;
  右境界線: 1rpx 実線 #efefef;
}
 
.テキストスタイル{
  幅: 200rpx;
  高さ: 140rpx;
  行の高さ: 140rpx;
  テキスト配置: 中央;
  フォントサイズ: 34rpx;
  フォントファミリー: PingFangSC-Semibold;
  色: rgba(51, 51, 51, 1);
}


 
.アクティブ3 {
  表示: ブロック;
  幅: 500rpx;
  高さ: 6rpx;
  背景: rgb(88, 123, 193);
  位置: 相対的;
  左: 0rpx;
  下部: 30rpx;
}

.アクティブ2 {
  色: rgb(88, 123, 193);
}
 
.アクティブ1 {
  色: #96C158;
}
 
。アクティブ {
  表示: ブロック;
  幅: 50rpx;
  高さ: 6rpx;
  背景: #96C158;
  位置: 相対的;
  左: 75rpx;
  下部: 30rpx;
}

.スクロールY{
  幅: 210rpx;
  位置: 固定;
  左: 0;
  上: 0;
  右境界線: 1rpx 実線 #efefef;
}

。右{
  上境界線: 1rpx 実線 #efefef;
  左境界線: 1rpx実線rgba(0,0,0,0.0);
  左マージン: 2rpx;
}

.スクロールY2 {
  幅: 520rpx;
  位置: 固定;
  右: 0;
  上: 0;
  左境界線: 1rpx実線rgba(0,0,0,0);
  左マージン: 2rpx;
}

.text-style2 {
  幅: 520rpx;
  高さ: 140rpx;
  行の高さ: 140rpx;
  テキスト配置: 左;
  フォントサイズ: 34rpx;
  フォントファミリー: PingFangSC-Semibold;
  色: rgba(51, 51, 51, 1);
}

.ボタン呼び出し{
  高さ: 90rpx;
  幅: 90rpx;
  位置: 固定;
  下部: 150rpx;
  右: 13rpx;
  不透明度: 0.7;
  zインデックス: 100;
}

ページ（{
 
  /**
   * ページの初期データ */
  データ： {
    リスト: [
      「主要分類1」、「主要分類2」、「主要分類3」、「学生課」、「党委員会課」、「学務課」、「退職課」、「警備課」、「財務監査課」、「実験室・設備課」、「人事課」、「警備課」、「大学」、「直属部署」、「その他」
    ]、
    リスト_r0: [
      「メインクラス 1 のサブクラス 1」、 
      「主分類1のサブカテゴリ2」、「主分類1のサブカテゴリ3」、「主分類1のサブカテゴリ4」、「党委員会部門」、「学校職員と教務」、「退職事務室」、「警備室」、「財務と監査」、「実験室と設備」、「人事室」、「警備室」、「大学」、「直属部門」、「その他」
    ]、
    リスト_r1: [
      「メインクラス2のサブクラス1」、 
      「主類2の2類」、「主類2の3類」、「主類2の4類」、「党委員会部」、「学校職員と教務」、「退職事務室」、「警備室」、「財務と監査」、「実験室と設備」、「人事室」、「警備室」、「大学」、「直属部署」、「その他」
    ]、
    インデックスID: 0,
    インデックスIdr0: 0,
    インデックスIdr0: 1,
  },
  //左クリックイベント jumpIndex(e) {
    インデックス = e.currentTarget.dataset.menuindex
    それを = これとする
    that.setData({
      インデックスID: インデックス
    });
  },

  ジャンプインデックスR0(e) {
    インデックス = e.currentTarget.dataset.menuindex
    それを = これとする
    that.setData({
      indexIdr0: インデックス
    });
  },


  /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
  onLoad: 関数(オプション) {
    var that = これ
    wx.getSystemInfo({
      成功: function(res) {
        that.setData({
          ウィンドウの高さ: res.windowHeight
        });
      }
    });
  },
 
  /**
   * ライフサイクル関数 - ページの初期レンダリングの完了を待機します*/
  onReady: 関数() {
 
  },
 
  /**
   * ライフサイクル機能 - モニターページ表示 */
  onShow: 関数() {
 
  },
 
  /**
   * ライフサイクル機能 - ページの非表示を監視する*/
  onHide: 関数() {
 
  },
 
  /**
   * ライフサイクル機能 - ページのアンインストールを監視する*/
  onUnload: 関数() {
 
  },
 
  /**
   * ページ関連のイベント処理関数 - ユーザーのプルダウンアクションをリッスンする */
  onPullDownRefresh: 関数() {
 
  },
 
  /**
   * ページ上のボトムイベントを処理する関数*/
  onReachBottom: 関数() {
 
  },
 
  /**
   * ユーザーは右上隅をクリックして共有します*/
  onShareAppMessage: 関数() {
 
  }
})

{
  "コンポーネントの使用": { },
  "navigationBarBackgroundColor":"希望する背景色",
  "navigationBarTitleText": "電話によるお問い合わせ",
  "ナビゲーションバーのテキストスタイル":"黒",
  "プルダウンリフレッシュを有効にする": true
}