WeChat applet scroll-view realizes left-right linkage effect

WeChat applet uses scroll-view to achieve left-right linkage, for your reference, the specific content is as follows

When you click the button on the left, the right side can jump to the specified position

First of all, you need to pay attention to the use of scroll-view vertical scrolling, you need to give scroll-view a fixed height
Secondly, when clicking, you need to add scroll-into-view to the scroll-view that needs to be scrolled. Its value should be the id of the child element, and the id cannot start with a number.

Scroll right and the left menu will jump to the corresponding position

The idea behind this is to get the scrolling distance when the right scrolling screen scrolls. Calculate the distance that each module in the right scrolling screen reaches the top and put it into an array. The scroll distance of the first module is its own height, the scroll distance of the second module is the height of the first module plus its own height, and so on. When scrolling, determine at which stage the scrolling distance is in the saved array, and use this to derive the subscript value that meets the conditions. By changing the value in the subscript corresponding to the left menu, left-right linkage can be achieved.
When calculating the height of each module, you need to use wx.createSelectorQuery() to obtain the element, which returns a selectorQuerys object instance; then use the boundingClientRect(function callback) method of the returned node to obtain the layout position information of the node. After SelectorQuery.exec() is executed, the information is returned in the callback function. In this article, the method of getting the element height is written in onload.

Implementation effect diagram:

The main code is as follows:

index.wxml

<view class="container">
  <view class="category-left">
    <scroll-view scroll-y="true" style="height:100%">
      <block wx:for="{{category}}" wx:key="id">
       <view class="catgegory-item {{activeId === item.id?'active-item':''}}" data-id="{{item.id}}" bindtap="clickItem">{{item.name}}</view>
      </block>
    </scroll-view>
  </view>
  <view class="category-right">
    <scroll-view scroll-y="true" style="height:100%" scroll-into-view="{{toView}}" scroll-with-animation="ture" bindscroll="scroll">
      <view class="categoty-detail">
      <block wx:for="{{content}}" wx:key="id">
        <view class="catefory-main">
          <view class="category-title" id="{{item.id}}">{{item.title}}</view>
          <view class="category-content">
              <view class="content-item" wx:for="{{item.options}}" wx:for-item="i" wx:key="id">
                <image src="{{i.src}}"></image>
                <text>{{i.text}}</text>                                                      
              </view>
          </view>
        </view> 
      </block>
      </view>
    </scroll-view>
  </view>
</view>

index.js

//index.js
//Get the application instance const app = getApp()

Page({
  data: {
    toView: 'a1',
    activeId: 'a1',
    category:
      {name: 'New Product', id: 'a1'},
      { name: 'Crowdfunding', id: 'a2' },
      { name: 'Xiaomi mobile phone', id: 'a3' },
      { name: 'redmi phone', id: 'a4' },
      { name: 'Black Shark Game', id: 'a5' },
      { name: "Mobile phone accessories", id: 'a6' },
      { name: 'TV', id: 'a7'},
      { name: 'Computer', id: 'a8' },
    ],
    content: [
      {
        title: '- New Products -', 
        options: [
          { src: '../../image/redmi.png',id: '001',text: 'redmi8'},
          { src: '../../image/redmi.png', id: '002', text: 'redmi8A' },
          { src: '../../image/redmi.png', id: '003', text: 'Xiaomi 9pro 5G'},
          { src: '../../image/redmi.png', id: '004', text: 'redmi8'},
          { src: '../../image/redmi.png', id: '005',text: 'redmi8' }
        ],
        id: 'a1'
      },
      {
        title: '- Crowdfunding -',
        options: [
          { src: '../../image/zhongchou.png', id: '006', text: 'redmi8' },
          { src: '../../image/zhongchou.png', id: '007' ,text: 'redmi8'},
          { src: '../../image/zhongchou.png', id: '008', text: 'redmi8' },
          { src: '../../image/zhongchou.png', id: '009',text: 'redmi8' }
        ],
        id: 'a2'
      },
      {
        title: '- Xiaomi Mobile Phone -',
        options: [
          { src: '../../image/xiaomi.png', id: '006', text: 'redmi8' },
          { src: '../../image/xiaomi.png', id: '007', text: 'redmi8' },
          { src: '../../image/xiaomi.png', id: '008', text: 'redmi8' },
          { src: '../../image/xiaomi.png', id: '009', text: 'redmi8' }
        ],
         id: 'a3'
      },
      {
        title: '- redmi mobile phone -',
        options: [
          { src: '../../image/hongmi.png', id: '006', text: 'redmi8' },
          { src: '../../image/hongmi.png', id: '007', text: 'redmi8' },
          { src: '../../image/hongmi.png', id: '008', text: 'redmi8' },
          { src: '../../image/hongmi.png', id: '009', text: 'redmi8' }
        ],
        id: 'a4'
      }

    ],
  },
  //Event processing function onLoad: function () {
    this.setData({
      toView: 'a1',
      heightArr: []
    })
    let query = wx.createSelectorQuery();
    query.selectAll('.catefory-main').boundingClientRect((rect)=> {
      rect.forEach(ele => {
        this.calculateHeight(ele.height);
      })
    }).exec();
  },
  clickItem(e) {
    this.setData({
      activeId: e.currentTarget.dataset.id,
      toView: e.currentTarget.dataset.id
    })
  },
  scroll(e) {
    let scrollHeight = e.detail.scrollTop;
    let index = this.calculateIndex(this.data.heightArr,scrollHeight);
    this.setData({
      activeId: 'a'+index
    })

  },
  // Calculate the scrolling interval calculateHeight(height) {
    if(!this.data.heightArr.length) {
      this.data.heightArr.push(height)
    }else {
      this.data.heightArr.forEach(ele => {
        height += ele
      })
      this.data.heightArr.push(height);
    }
  },
  // Calculate the subscript selected on the left calculateIndex(arr, scrollHeight) {
    let index = '';
    for(let i =0;i<arr.length;i++) {
      if (scrollHeight >= 0 && scrollHeight < arr[0]){
        index = 0;
      }else if(scrollHeight >= arr[i-1] && scrollHeight < arr[i]){
        index = i;
      }
    }
    return index+1;
  }
})

index.wxss

/**index.wxss**/
.container {
  padding: 0;
  width:100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items:flex-start;
}
.category-left {
  height: 100%;
  width: 22%;
  padding: 0 20rpx;
  box-sizing: border-box;
  border-right: 1px solid #efefef;
}
.category-item {
  padding: 20rpx 0;
  font-size: 30rpx;
  text-align: center;
}
.active-item {
  color: orange;
}
.category-right {
  flex:1;
  height: 100%;
}
.category-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, 190rpx);
}
.category-title {
  text-align: center;
}
.content-item {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  text-align: center;
  font-size: 30rpx;
}
.content-item image{
  width: 120rpx;
  height: 120rpx;
}

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: