Example of how to achieve ceiling effect using WeChat applet

The background is a date title. As the user slides, there is a ceiling effect when sliding to the current date list data, and this effect is different from the original style.

1. Implementation

• Scroll-view is a native component of the mini program
• handleScroll is the event triggered when sliding
• scroll-y means that sliding is allowed in the vertical direction
• The element with class fixed is fixed here at the top of the scroll-view container to display the current date.
• Use the dynamic binding class method to control the display of visibility
• The element with class scheduleDay is the title of each date.
• The value of data-value is bound to the date

• This function processes the data of each scheduleDay element's distance from the top of the scroll-view and the current date.
• The data is collected as follows and so on
• wx.createSelectorQuery() usage details (generally used to obtain the location information of an element node)
• developers.weixin.qq.com/miniprogram…

scheduleInfo:[
    {
       top: 8,
       currentDay: '2021-08-15'
    },
    {
       top: 213,
       currentDay: '2021-08-14'
    },
    {
       top: 555,
       currentDay: '2021-08-13'
    },
    ...
]

• e.detail.scrollTop is the sliding distance in the scroll-view component
• When the sliding height >= the distance between a certain element node and the top of the scrollview, set the current sliding date
• Then you can control the appearance or hiding of fixed positioned elements to achieve

This article will not show too much about CSS, the functional effect can be achieved as long as the logical thinking is correct

2. Problems

• Due to the error in the frequency of triggering the handleScroll sliding event, the fixed element is not hidden when sliding to the top
• When pulling up, the fixed element and the date title at the original position will have a bad UI experience
• Refer to the following figure

This figure shows the default UI display

The UI display when the user slides to the list position under the date, or the situation where the first point of the problem exists

Then it will affect the second point of the problem

3. Consider whether there is a better way to implement it

The first idea was to dynamically add a corresponding class to the date title of each element node to control the change of individual styles, but the class of each element is the same and this method cannot be used to solve it.

Modification is done by controlling the style of each individual element node, but unlike the DOM in the browser, the mini program cannot change the style of each individual element through dom.style.xxx.

IntersectionObserver, this method has also been tried, but it didn’t work. I’ll try it again when I have a chance.

Summarize

This is the end of this article about how to achieve ceiling effects with WeChat mini-programs. For more content related to ceiling effects with mini-programs, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!