WeChat applet realizes left-right linkage

This article shares the specific code for WeChat applet to achieve left-right linkage for your reference. The specific content is as follows

Recently, the school course system analysis project was built using the WeChat applet. After selecting the ordering project, when implementing the homepage, I wanted to achieve the same as McDonald's ordering, with categories on the left and dishes on the right. By clicking on the category on the left, the right side will scroll to the corresponding category, and by scrolling the dishes on the right, the category of the dish currently scrolled to on the left will also be highlighted. So let’s first show you the results!

Although this feature is small, I think it will be very useful once you understand the principle of scroll-view.

First, check out the official documentation of WeChat Mini Program: scroll-view

Here I will introduce the properties I use according to my own understanding:

• scroll-y: Set the scroll direction, x is horizontal, y is vertical, the attribute type is boolean value
• scroll-top: That is to say, the value of scroll-top is the distance from the top. The scroll-view in which you write it will be that far away from the top. However, we can set the variable value and change it according to the conditions in js. This is also the key step to achieve left and right linkage.
• scroll-into-view: scroll-into-view is an id value. We implement left and right linkage by scrolling in the vertical direction, so setting scroll-into-view means that the current scroll-into-view value is what the current scroll-view will scroll to.
• style='height: enter the height here', the component you set to scroll must have a height, otherwise it will not scroll. This is also easy to understand. If you don’t set the height of its frame, the scroll-view will not know where to start sliding, right? Sometimes you need to set a slider in the center of the page (occupying only part of the height), and sometimes you need to set it in the entire window height, so height is also a necessary attribute.
• scroll-with-animation: It is used to set the scroll bar position for animation transition. I found that deleting this attribute can also work normally. Maybe it is not used in the page I wrote yet. I need to understand it later.
• bindscroll: bind a function. Since it is scrolling, there is no click trigger, so there is a bound function to execute the function content when sliding.
• Now that we have figured out the properties of the component, let's start implementing it. My idea is to set up a slider on each side, which can be slid on both sides. First, the left side will be linked to the right side. The function on the left side is to jump by clicking on the right side of the class.

<scroll-view class='aside' scroll-y='true' style='height:{{asideheight}}px' scroll-with-animation="true" scroll-top='{{itemLeftToTop}}' >
    
    <view wx:for="{{menus}}" wx:key="id" data-id="{{item.id}}" bindtap='tabMenu' class="{{item.id === currentLeftSelected ? 'menu active' : 'menu'}}">

    <view id="{{item.id}}">{{item.name}}</view>
    </view>

    <view class="option" >
    <button id='user_btn' bindtap='getin' >pc</button>
    <image id='user_img' src='../../images/index/user_option.png'></image>
    </view>
    
  </scroll-view>
  <!--Detailed information of each type of dish, you can click the button to add the quantity of each dish-->
  
  <scroll-view class="item-content" scroll-y='true' scroll-into-view="{{itemScrollId}}" scroll-with-animation='true' style='height:{{asideheight}}px' bindscroll="right" >
    <view wx:for="{{menus}}" wx:for-index="parentIndex" wx:key="id" id="{{item.id}}" >
    <view class="item_title">{{item.name}}</view>
    <view class="{{orderCount.num === 0 ? 'box' : 'box active'}}">
      <view class="item" wx:for="{{item.categroy}}" wx:key="categroyid" data-parentIndex='{{parentIndex}}' data-index='{{index}}'>
        <image src="{{item.url}}"></image>
        <text class="title">{{item.categroy_name}}</text>
        <text class="price">￥ {{item.price}} yuan</text>
        <view class="opera">
          <text class="btn_price " bindtap='del' data-id="{{item.id}}" data-parentIndex='{{parentIndex}}' data-index='{{index}}'>-</text>
          <text class="num">{{item.num}}</text>
          <text class="btn_price" bindtap="add" data-id="{{item.id}}" data-parentIndex='{{parentIndex}}' data-index="{{index}}">+</text>
        </view>    
      </view>
    </view>
    
    </view>
</scroll-view>

You can see that I referenced a variable for the height, and its implementation in js is as follows:

wx.getSystemInfo({
      success: function (res) {
        var asideheight = res.windowHeight
        var asideheight1=0;
        that.setData({
          asideheight: asideheight,
          asideheight1:asideheight+80
        })
      },
      fail: () => { console.log("Unable to obtain display height, please check network connection") }
    });

And set the height of each small grid on the left and right at the beginning of the function

const RIGHT_BAR_HEIGHT = 41;
// The height of each subclass on the right (fixed)
const RIGHT_ITEM_HEIGHT = 122;
// Height of each class on the left (fixed)
const LEFT_ITEM_HEIGHT = 41;

The implementation on the left is relatively simple. Two data are set, currentLeftSelected and itemScrollId. The ID value of the currently clicked class is assigned to these two. The former realizes the state that the left class is selected when clicked, and the value on the right is assigned to itemScrollId. This value is then assigned to the scroll-into-view of the right half of the front scroll-view, so that the right side will jump when the left side is clicked.

tabMenu: function (e) {
    this.setData({
      currentLeftSelected: e.target.id || e.target.dataset.id,
      itemScrollId: e.target.id || e.target.dataset.id 
    });
    console.log(e);
  },

The idea for the right half is that you need to calculate the height of each dish on the right from the top, save it in an array, then get the current sliding height when sliding, and then compare it in the function bound in bindscroll. Set the currentLeftSelected on the left to the id of the class that corresponds to the height range.

get_eachItemToTop: function () {
    var obj = {};
    var totop = 0;
    var menus_ex = {};
    var that = this;
    menus_ex = that.data.menus;
    console.log(menus_ex);
    for(let i=1;i<menus_ex.length;i++){
      totop += (RIGHT_BAR_HEIGHT + menus_ex[i - 1].categroy.length * RIGHT_ITEM_HEIGHT);
      obj[menus_ex[i] ? menus_ex[i].id : 'last'] = totop;  
    }
    return obj;
  },
  
  right: function (e) {
      for (let i = 0; i < this.data.menus.length; i++) {
       let left = this.data.eachrightScrollToTop[this.data.menus[i].id]
       let right = this.data.eachrightScrollToTop[this.data.menus[i + 1] ? this.data.menus[i + 1].id : 'last']
       if (e.detail.scrollTop < right && e.detail.scrollTop >= left) {
       this.setData({
         currentLeftSelected: this.data.menus[i].id,
         itemLeftToTop: LEFT_ITEM_HEIGHT * i
            })
          }
        }
   
    },

In this way, the left-right linkage is basically realized.

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.