Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to achieve the left-right linkage effect of scroll-view in WeChat Mini Programs. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

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

First of all, pay attention to the use of scroll-view vertical screen scrolling, you need to give the scroll-view a fixed height

Secondly, when you click, you need to add scroll-into-view to the scroll-view that needs to be scrolled. The value should be the id of the child element, and the id cannot start with a number.

Scroll to the right and the menu on the left jumps to the appropriate position

The idea is to get the scrolling distance when scrolling on the right side of the scrolling screen. Calculate the distance of each module to the top in the scroll screen on the right and put it in an array. The scrolling distance of the first module is its own height, the scrolling distance of the second module is the height of the first module plus its own height, and so on. When scrolling, determine which stage the scrolling distance is in the saved array, and get the qualified subscript value, and change the value in the subscript corresponding to the left menu, you can achieve the left and right linkage.

When calculating the height of each module, you need to use wx.createSelectorQuery () to get the element, which returns the selectorQuerys object instance; then uses the boundingClientRect (function callback) method of the returned node to obtain the layout location information of the node, and returns the information in the callback function after SelectorQuery.exec () is executed. In this article, the method of getting the height of an element is written in onload.

Realize the effect picture:

The main code is as follows:

Index.wxml

{{item.name}} {{item.title}} {{i.text}}

Index.js

/ / index.js// get application instance const app = getApp () Page ({data: {toView: 'A1phones, activeId:' A1phones, category: [{name: 'new products', id: 'a1'}, {name:' crowdfunding', id: 'a2'}, {name:' Xiaomi mobile phones', id: 'a3'}, {name:' redmi mobile phones' Id: 'A4'}, {name:' Blackshark Game', id: 'A5'}, {name: "Mobile Accessories", id:' A6'}, {name:'TV', id: 'A7'}, {name:' computer', id: 'A8'},], content: [{title:'-New products -' Options: [{src:'.. / image/redmi.png',id: '001century dagger text:' redmi8'}, {src:'.. /.. / image/redmi.png',id: '002mom, text:' redmi8A'}, {src:'.. / image/redmi.png',id: '003mm, text:' Xiaomi 9pro 5G'} {src:'.. /.. / image/redmi.png', id: '0044th, text:' redmi8'}, {src:'.. /.. / image/redmi.png', id: '005jurisdiction 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 handbook text:' redmi8'}], id: 'a2'}, {title:'-Xiaomi mobile phone -', options: [{src:'.. / image/xiaomi.png', id: '006 mobile, 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 mobile, text:' redmi8'}, {src:'.. / image/hongmi.png', id: '007mobile, text:' redmi8'} {src:'.. / image/hongmi.png', id: '008, text:' redmi8'}, {src:'.. /.. / image/hongmi.png', id: '009, text:' redmi8'}], id: 'a4'}],} / / event handler function onLoad: function () {this.setData ({toView: 'a1regions, 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 calculateIndex (arr, scrollHeight) {let index=''; for (let I = 0polii = 0 & & scrollHeight selected on the left

= 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: 020rpx; box-sizing: border-box; border-right: 1px solid # efefef;}. Catgegory-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 } this is the end of the article on "how to achieve the left-right linkage effect of scroll-view in WeChat Mini Programs". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.