WeChat applet realizes linkage menu

<!-- Left scroll bar-->
<view class = '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='all clear'>
      <block wx:key="lists" wx:for="{{lists}}">
        <view bindtap='jumpIndex' data-menuindex='{{index}}'>
          <view class='text-style'>
            <text class="{{indexId==index?'active1':''}}">{{item}}</text>
            <text class="{{indexId==index?'active':''}}"></text>
          </view>
        </view>
      </block>
    </view>
  </scroll-view>
</view>

<!--Right column-->
<view class="right">
    <!--Judge the indexId value to display different pages-->
     <view wx:if="{{indexId==0}}">
        <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY2' style='height: {{winHeight}}px'>
        <view class='all clear'>
        <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>
        </view>
        </block>
        </view>
        </scroll-view>
      </view>

      <view wx:if="{{indexId==1}}">
      <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY2' style='height: {{winHeight}}px'>
        <view class='all clear'>
        <block 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>
          </view>
        </view>
        </block>
        </view>
        </scroll-view>
      </view>
      
     </view>
</view>

.under_line{
  width: 100%;
  border-top: 1rpx solid #efefef;
}

.left {
  border-top: 1rpx solid #efefef;
  border-right: 1rpx solid #efefef;
}
 
.text-style {
  width: 200rpx;
  height: 140rpx;
  line-height: 140rpx;
  text-align: center;
  font-size: 34rpx;
  font-family: PingFangSC-Semibold;
  color: rgba(51, 51, 51, 1);
}


 
.active3 {
  display: block;
  width: 500rpx;
  height: 6rpx;
  background: rgb(88, 123, 193);
  position: relative;
  left: 0rpx;
  bottom: 30rpx;
}

.active2 {
  color: rgb(88, 123, 193);
}
 
.active1 {
  color: #96C158;
}
 
.active {
  display: block;
  width: 50rpx;
  height: 6rpx;
  background: #96C158;
  position: relative;
  left: 75rpx;
  bottom: 30rpx;
}

.scrollY {
  width: 210rpx;
  position: fixed;
  left: 0;
  top: 0;
  border-right: 1rpx solid #efefef;
}

.right{
  border-top: 1rpx solid #efefef;
  border-left: 1rpx solid rgba(0,0,0,0.0);
  margin-left: 2rpx;
}

.scrollY2 {
  width: 520rpx;
  position: fixed;
  right: 0;
  top: 0;
  border-left: 1rpx solid rgba(0,0,0,0);
  margin-left: 2rpx;
}

.text-style2 {
  width: 520rpx;
  height: 140rpx;
  line-height: 140rpx;
  text-align: left;
  font-size: 34rpx;
  font-family: PingFangSC-Semibold;
  color: rgba(51, 51, 51, 1);
}

.button_call{
  height: 90rpx;
  width: 90rpx;
  position: fixed;
  bottom: 150rpx;
  right: 13rpx;
  opacity: 0.7;
  z-index: 100;
}

Page({
 
  /**
   * Initial data of the page */
  data: {
    lists: [
      "Main Category 1", "Main Category 2", "Main Category 3", "Student Affairs Department", "Party Committee Department", "School Work and Academic Affairs", "Retirement Affairs Office", "Security Office", "Finance and Audit", "Laboratory and Equipment", "Personnel Office", "Security Office", "College", "Directly Affiliated Units", "Others"
    ],
    lists_r0: [
      "Subclass 1 of main class 1", 
      "Sub-category 2 of main category 1", "Sub-category 3 of main category 1", "Sub-category 4 of main category 1", "Party committee department", "School workers and teaching affairs", "Retirement office", "Security office", "Finance and audit", "Laboratory and equipment", "Personnel office", "Security office", "College", "Directly affiliated units", "Others"
    ],
    lists_r1: [
      "Subclass 1 of main class 2", 
      "Subclass 2 of main class 2", "Subclass 3 of main class 2", "Subclass 4 of main class 2", "Party committee department", "School workers and teaching affairs", "Retirement office", "Security office", "Finance and audit", "Laboratory and equipment", "Personnel office", "Security office", "College", "Directly affiliated units", "Others"
    ],
    indexId: 0,
    indexIdr0: 0,
    indexIdr0: 1,
  },
  //Left click event jumpIndex(e) {
    let index = e.currentTarget.dataset.menuindex
    let that = this
    that.setData({
      indexId: index
    });
  },

  jumpIndexR0(e) {
    let index = e.currentTarget.dataset.menuindex
    let that = this
    that.setData({
      indexIdr0: index
    });
  },


  /**
   * Life cycle function--listen for page loading*/
  onLoad: function(options) {
    var that = this
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          winHeight: res.windowHeight
        });
      }
    });
  },
 
  /**
   * Life cycle function - listen for the completion of the initial rendering of the page*/
  onReady: function() {
 
  },
 
  /**
   * Life cycle function--monitor page display*/
  onShow: function() {
 
  },
 
  /**
   * Life cycle function--listen for page hiding*/
  onHide: function() {
 
  },
 
  /**
   * Life cycle function--monitor page uninstallation*/
  onUnload: function() {
 
  },
 
  /**
   * Page related event processing function - listen to user pull-down action */
  onPullDownRefresh: function() {
 
  },
 
  /**
   * The function that handles the bottoming event on the page*/
  onReachBottom: function() {
 
  },
 
  /**
   * User clicks on the upper right corner to share*/
  onShareAppMessage: function() {
 
  }
})

{
  "usingComponents": { },
  "navigationBarBackgroundColor":"The background color you want",
  "navigationBarTitleText": "Phone Inquiry",
  "navigationBarTextStyle":"black",
  "enablePullDownRefresh": true
}