WeChat applet realizes linkage menu

Recently, in order to realize the course design, I have also done some front-end things. Today I want to make a linkage menu to realize some functions. It’s done, let me take notes.

Step 1: Get to know

Simply put, the left and right side menus divide an area into two parts. Regarding components, I think you can go directly to the WeChat development documentation. I think it should be understandable through the code. No more talking, let’s get straight to the code. (First of all, I am still a rookie who has just started working on the front end. Some of my writing may not be very good. I would like to ask my bloggers for suggestions for improvement so that we can learn from each other.)

Step 2: Take a look at the effect first

The running efficiency is still quite fast, without any lag.

Step 3: Implementation (Code)

I have only included a part of it here, which can be implemented directly without any problem. You can modify it according to your needs.

wxml

<!-- 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>

wxss

.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() {
 
  }
})

json

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

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: