The background is to do a date title as the user slides, when the slide to the current date list data, there is a top effect, and the effect is different from the original style

1. Implementation

  • Scrollview is a native component of small programs
  • HandleScroll is the event that is triggered when you swipe
  • Scroll-y indicates that sliding is allowed in the vertical direction
  • The element class fixed here is positioned at the top of the ScrollView container to display the current sliding date
  • Use the dynamic binding class method to control the visibility display or not
  • The scheduleDay element is the title of each date
  • The value of data-value is bound to the date

  • This function processes each scheduleDay element from the top of the Scrollview to the current date
  • Put together a data set as shown below and so on
  • Wx.createselectorquery () is used to obtain the location 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'},... ]Copy the code

  • E.dietail. scrollTop is the sliding distance in the Scrollview component
  • Set the current slide date when the slide height >= the distance from the top of the ScrollView to an element node
  • Then control the presence or hiding of fixed positioning elements can be achieved

In this paper, the CSS will not do too much display, logical thinking can achieve the functional effect

2. Existing problems

  • Due to an error in the frequency at which the handleScroll slide event is triggered, the fixed element is not hidden at the top of the slide
  • Pull-up of fixed elements with the original date title in that location can have a bad UI experience
  • Refer to the below

This figure is the default UI display

The UI display when the user slides to the list location under that date, or the first point of the problem with ⬆️

Then the second point of the problem will affect ⬆️

3. Consider if there is a better way to do it

  • The initial consideration is 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, so this method cannot be used to solve the problem.
  • By controlling the style of each individual element node, but the applet does not have the DOM in the browser to change the style of each individual element through dom.style. XXX.
  • IntersectionObserver, this method has also been tried, but failed, so I have the opportunity to try again.

If friends have relevant needs, welcome to guide brother ah! Hope to find the best solution!!