小程序中的scroll-view 自定义滚动样式

最新推荐文章于 2025-06-24 21:23:20 发布

原创最新推荐文章于 2025-06-24 21:23:20 发布 · 置顶 · 6.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#scroll-view #自定义滚动样式

本文详细介绍了一种自定义滚动条样式的实现方法，通过给scroll-view添加点击事件bindscroll来获取滚动条的各种属性值，进而控制滚动条距父级左边的距离。文章还提供了具体的编辑步骤，包括获取滚动区域的宽度和距离、计算比例并赋值给自定义滚动样式等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
废话不多说，先上图，确认是否是你想要的效果；
编辑步骤：
1. 给scroll-view添加点击事件 bindscroll，可获取scroll-view的各种属性值；
2. 自己编写想要的滚动样式，如上图，后期只要控制滚动条距父级左边的距离即可；
3. 重点，䦹最后一步，编写点击事件，
1. 获取滚动区域的宽度和距左边的距离；
2. 获取滚动区域和屏幕宽度之和与滚动区域的比例；
3. 赋值给自定义的滚动样式中；
4. 注意：滚动到末尾可能会有滚不到尽头的现象，只需调整自定义的样式宽度即可；

	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
	    })
	  }