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

This article mainly shows you "how Mini Program can achieve the list scrolling up and down effect". The content is simple and clear. I hope it can help you solve your doubts. Next, let the editor lead you to study and learn the article "how Mini Program realizes the list scrolling up and down effect".

1. Background

Recently, I am working on a Mini Program made by the company, in which a piece is designed to follow the tab bar at the top when the list is scrolled up and down, and the list data is also linked when the tab bar is clicked.

The top area of the head does not scroll with the list; the area below the head belongs to the scrolling area.

2. Introduction to the principle of implementation 2.1

The implementation of this place is mainly based on WeChat Mini Programs's native scroll-view components.

Using its scroll-into-view property, you can click on the top tab bar to scroll the page to the specified list location

Using the bindscroll event, you can know the scrolling distance of the current page and switch the tab bar according to the scrolling distance.

2.1 Page layout code

First of all, let's talk about the overall layout of the interface, which is mainly divided into two parts, the head fixed area and the scrollable list area.

The title bar of the scrollable list area should also be fixed at the top after scrolling a certain distance.

Code implementation:

Header area {{item.name}} {{item.name}} {{item.name}}

There are several points to note in the layout code:

1. Calculation of the height of the rolling area of scrollAreaHeight. -subtract the height of the top fixed area by getting the window height of the current device

2. Whether the horizontal tab column is at the top. -according to the scrolling distance of the page, if the scrolling distance is greater than or equal to the height of the horizontal tab bar, it will be set to the top.

3. Set the id= "v _ {{index}}" id of the data list, and then click the tab column to scroll to the specified location according to this id.

2.2 style code / * * index.wxss**/.list {width: 100%; height: 100%; display: flex; flex-direction: column;}. Head-area {display: flex; flex-direction: row; flex-wrap: nowrap; height: 88rpx; width: 100%; padding: 0 10;} .head-area-item {display: flex; height: 88rpx; text-align: center; width: 150rpx; align-items: center; justify-content: center } .head-area-item-select {color: # 09bb07;} image {width: 88rpx; height: 88rpx;} .list-group {display: flex; width: 100%; height: 1000%; flex-direction: column;} .list-group-item {display: flex; width: 100%; background-color: # aaa; flex-direction: column;}. Group-name {height: 88rpx; display: flex; text-align: center; align-items: center; margin-left: 20rpx } .group-children {display: flex; flex-direction: row; flex-wrap: wrap; width: 100%;} .group-children-item {height: 160rpx; display: flex; flex-direction: column; justify-content: center; align-items: center;} .head-float {position: fixed; top: 88rpx; background-color: # ffffff } 2.3 Logic code / / index.jsPage ({heightArr: [], / / record the height from the top during scroll-view scrolling distance: 0, data: {appGroupList: [{name: "grouping 01", children: [{"name": "url": "/ images/bluetooth.png"}, {"name": "Test 1", "url": "/ images/bluetooth.png"} {"name": "url": "/ images/bluetooth.png"}, {"name": "Test 3", "url": "/ images/bluetooth.png"}, {"name": "Test 4", "url": "/ images/bluetooth.png"}, {"name": "Test 5", "url": "/ images/bluetooth.png"}, {"name": "Test 6" "url": "/ images/bluetooth.png"}, {"name": "Test 7", "url": "/ images/bluetooth.png"}}, {name: "Group 02", children: [{"name": "Test 0", "url": "/ images/bluetooth.png"}, {"name": "Test 1", "url": "/ images/bluetooth.png"}, {"name": "Test 2" "url": "/ images/bluetooth.png"}, {"name": "Test 3", "url": "/ images/bluetooth.png"}, {"name": "Test 4", "url": "/ images/bluetooth.png"}, {"name": "Test 5", "url": "/ images/bluetooth.png"}, {"name": "Test 6", "url": "/ images/bluetooth.png"} {"name": "Test 7", "url": "/ images/bluetooth.png"}}, {name: "Group 03", children: [{"name": "Test 0", "url": "/ images/bluetooth.png"}, {"name": "Test 1", "url": "/ images/bluetooth.png"}, {"name": "Test 2", "url": "/ images/bluetooth.png"} {"name": "url": "/ images/bluetooth.png"}, {"name": "Test 4", "url": "/ images/bluetooth.png"}, {"name": "Test 5", "url": "/ images/bluetooth.png"}, {"name": "Test 6", "url": "/ images/bluetooth.png"}, {"name": "Test 7" "url": "/ images/bluetooth.png"}}, {name: "grouping 04", children: [{"name": "Test 0", "url": "/ images/bluetooth.png"}, {"name": "Test 1", "url": "/ images/bluetooth.png"}, {"name": "Test 2", "url": "/ images/bluetooth.png"}, {"name": "Test 3" "url": "/ images/bluetooth.png"}, {"name": "Test 4", "url": "/ images/bluetooth.png"}, {"name": "Test 5", "url": "/ images/bluetooth.png"}, {"name": "Test 6", "url": "/ images/bluetooth.png"}, {"name": "Test 7", "url": "/ images/bluetooth.png"}]} {name: "grouping 05", children: [{"name": "Test 0", "url": "/ images/bluetooth.png"}, {"name": "Test 1", "url": "/ images/bluetooth.png"}, {"name": "Test 2", "url": "/ images/bluetooth.png"}, {"name": "Test 3", "url": "/ images/bluetooth.png"} {"name": "Test 4", "url": "/ images/bluetooth.png"}, {"name": "Test 5", "url": "/ images/bluetooth.png"}, {"name": "Test 6", "url": "/ images/bluetooth.png"}, {"name": "Test 7", "url": "/ images/bluetooth.png"}},], itemWidth: wx.getSystemInfoSync (). WindowWidth / 4 ScrollAreaHeight:wx.getSystemInfoSync () .windowHeight-44, float:false, curSelectTab:0, scrollToItem:null, scrollTop: 0, / / distance to the top listGroupHeight:0,}, onReady: function () {this.cacluItemHeight () }, scroll:function (e) {console.log ("scroll:", e) If (e.detail.scrollTop > = 44) {this.setData ({float: true})} else if (e.detail.scrollTopp = this.distance) {/ / the page slides upward / / the distance from the bottom to the top of the current visual area of the list exceeds the height of the selected item from the top of the current list (and there is no subscript out of bounds), update the tab column if (current + 1)

< this.heightArr.length && scrollTop >

= this.heightArr [current]) {this.setData ({curSelectTab: current + 1})} else {/ / Page sliding downward / / if the distance from the top to the top of the currently visible area of the list is less than the height from the top of the item selected in the current list, toggle the selected item if (current-1 > = 0 & scrollTop) in the tab bar

< this.heightArr[current - 1]) { this.setData({ curSelectTab: current - 1 }) } } //更新到顶部的距离 this.distance = scrollTop; }, tabClick(e){ this.setData({ curSelectTab: e.currentTarget.dataset.index, scrollToItem: "v_"+e.currentTarget.dataset.index }) }, //计算每一个item高度 cacluItemHeight() { let that = this; this.heightArr = []; let h = 0; const query = wx.createSelectorQuery(); query.selectAll('.list-group-item').boundingClientRect() query.exec(function(res) { res[0].forEach((item) =>

{h + = item.height; that.heightArr.push (h);}) console.log (that.heightArr); that.setData ({listGroupHeight: that.heightArr [that.heightArr.length-1]})},})

There are two main points in the logic code:

1. CacluItemHeight calculates the height array of item in the list, and saves the final calculation result in the heightArr array.

The value of each item in the heightArr array is accumulated on the basis of the previous item.

2. Judge the current scrolling direction in scroll, judge the current direction according to scrolling, and then set the currently selected tab according to the scrolling distance.

These are all the contents of the article "how Mini Program can achieve the effect of list scrolling up and down". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.