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

This article introduces the relevant knowledge of "how to achieve the hovering effect of WeChat Mini Programs imitating APP section header". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First, write a very simple list:

Wxml code

This is header, and this is section-header {{item}} wxss code.

Header {height: 300rpx _ width: 750rpx _ blank _ color: bisque;margin-bottom: 10rpx;}. Section-header {height: 80rpx _ width: 750rpx _ blank _ color: rebeccapurple;}. Section-cell {height: 180rpx _ width: 750rpx _ blank _ color: gold;margin-top: 10rpx;} simple list effect .png.

1. We need to get the location of the header after the page layout is completed:

In the onReady method, query the section-header node and get the distance from the current top of the node at this time

Note that this is the time, and we'll talk about it later.

/ * Page loading completed * / onReady: function () {let that = thislet query = wx.createSelectorQuery () query.select (".section-header") .boundingClientRect (function (res) {/ / console.log (res) that.setData ({/ / section header distance 'current top' distance sectionHeaderLocationTop: res.top})}). Exec ()}, 2. We need to monitor page scrolling:

Fixed is used to control whether to hover.

/ * Page scrolling listening * / onPageScroll: function (e) {/ / console.log (e) this.setData ({scrollTop: e.scrollTop}) if (e.scrollTop > this.data.sectionHeaderLocationTop) {this.setData ({fixed: true})} else {this.setData ({fixed: false})}, 3. Modify the corresponding style:

Modify the original header to the following code and add a placeholder view to keep the space occupied and avoid page jitter when our section-header view hovers

This is section-header adding wxss code.

.section-placeholder {background-color: white;} .section-fixed {position: fixed;top: 0;} attach the js data code:

Data: {testData: [1, section header 2, 3, 4, 5, 6, 7, 7, 8, 9, 10], / / section header distance, 'current top' distance, sectionHeaderLocationTop: 0scoop / page scrolling distance, scrollTop: 0scoop / whether to hover fixed: false}, this has a point to pay attention to. When we use swlectorQuery (), the top we get is the current top distance corresponding to the corresponding node when the function is called, so there is a problem. When the height of our header (not necessarily the height of the header as long as it is the height of the view above the section-header) changes, hovering will be a problem, because our height is obtained in the first place.

So after we change the height, we need to call this function again to get the distance from the "current top". This is also a point to note. If I can directly get and assign a value again, there is still a problem. It is because the top obtained at this time is not from the top of the entire page page, but the page scrolling we are listening to is, so we can modify the code as follows:

Let that = thislet query = wx.createSelectorQuery () query.select (".section-header") .boundingClientRect (function (res) {/ / console.log (res) that.setData ({/ / section header distance from 'current top' distance to sectionHeaderLocationTop: res.top + that.data.scrollTop}). Exec () plus the distance from the page scrolling at this time, we can ensure that the desired effect will appear.

This is the end of the introduction of "how to achieve the APP section header hovering effect of WeChat Mini Programs". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.