Scroll-view custom scroll style in applet

Insert picture description here
Not much nonsense, first of all, confirm whether it is the effect you want;
editing steps:
1. Add the click event bindscroll to scroll-view to get various attribute values ​​of scroll-view;
2. Write what you want by yourself The scrolling style, as shown in the figure above, only needs to control the distance between the scroll bar and the left side of the parent in the later stage;
3. Focus, the last step, write the click event,
1. Get the width of the scroll area and the distance from the left;
2. Get the scroll area The ratio of the sum of the screen width and the scrolling area;
3. Assign values ​​to the custom scrolling style;
4. Note: You may not scroll to the end when scrolling to the end, just adjust the custom style width;

	bindscroll: function (e) {
	    let width = e.detail.scrollWidth
	    let left = e.detail.scrollLeft
	    let scrollLeft = this.data.scrollLeft
	    scrollLeft = (left + wx.getSystemInfoSync().windowWidth) / width
	    console.log(wx.getSystemInfoSync().windowWidth)
	    scrollLeft = scrollLeft * 100
	    this.setData({
	      scrollLeft: scrollLeft
	    })
	  }

Guess you like

Origin blog.csdn.net/jiaodeqiangs/article/details/93634152