The content of this article:

  • The horizontal scrolling effect of navigation uses wechat’s native component Scroll-View
  • First TAB for fixed navigation using absolute positioning
  • Navigation bar scrolling fixed the first TAB on the right side of the shadow style Settings
  • Use JS anti – shake dynamic control shadow style

This time, I added a little twist to the navigation, fixed the first element, and the rest of the normal horizontal scrolling effect is as follows:

The first fixed element will have a shadow to the right as it scrolls. First of all, how do I fix the first element

1. Fix the first element

Overlay the first element of the navigation with an absolute location element of the same height as the navigation, and set the appropriate width, like this:

height:var(–categoryTableHeight); Is a CSS custom attribute variable that defines semantic values for repeated attribute values. Details can be found in developer.mozilla.org/zh-CN/docs/… The article

Here, categoryTableHeight is the navigation height, as defined below

page {
    --categoryTabHeight: 98rpx; 
}
Copy the code

2. Fix the shadow style on the right side of the element

Next comes the shadow on the right. For the sake of explanation, I have fixed the style class as follows:

A uses absolute positioning to fix it 12rpx to the right of the element. C Uses gradient background to set a gradient from transparent right to orange left. To give this little mask layer that hazy beauty, just set the element transparency at D: Opacity: 0.6; In this way, the shadow appearing when scrolling will feel like covering the text, making the user feel more natural and real, as follows

3. Move

Now that you’re ready, it’s time to interact. The scroll view component has a method that listens for scroll events, bindscroll, and defines a variable that will be set to true when the scroll event is triggered.

let timer = 0
Page({
    data: {isCategoryScrolling: false
    },
    handleCategoryScroll(param) {

            if (!this.data.isCategoryScrolling) {

                this.setData({

                    isCategoryScrolling: true})}// Every time a timer has a value, cancel the timer and restart a new timer below,
            // Only one timeout call is executed until scrolling stops. When scrolling stops, set the variable to false and hide the shaded class on the right
            if (timer) {

                clearTimeout(timer)

            }

            timer = setTimeout(() = > {

                console.log('stop')

                this.setData({

                    isCategoryScrolling: false})},200)}})Copy the code

After testing, the interval of 200 ms is more natural and smooth. In fact, you can use LoDash, where you can write native more impressive

The first element of the navigation is overridden with absolute positioning. Accordingly, the business logic code for the first element needs to be moved to the newly set element, dynamically set the activation class for that element, and handle the click event logic separately.

conclusion

Although it is just a summary of the effect, there are many small details worth learning when I rearrange them, such as background gradient 270deg. I didn’t think much about this direction when I made this function. Here I write:

A thousand miles short step, ho ho ~