自定义scroll-view的滚动条

2024年8月19日 更新 不同平台适配问题

之前在获取元素宽度时使用：

ref="line"

const width = this.$refs.line.$el.offsetWidth

但在移动端（微信小程序、APP）报错el 未定义

故将其更改为：

let info = uni.createSelectorQuery().in(this).select("#lineH");
let that = this
info.boundingClientRect(function(data) { 
    //	data - 包含元素的高度等信息
        const width = data.width  // 获取元素宽度
        // 滑动区域的整体宽度 525
        const total = e.detail.scrollWidth
        // 隐藏区域宽度 175 设置占比60%
        const hidden = total - width

        // 滑动距离左端的距离, 最大175
        const ob = e.detail.scrollLeft
        const per = ob * 1.0 / hidden
        that.percent = per * 70 + 'px'
}).exec(function(res){
    // 注意：exec方法必须执行，即便什么也不做，否则不会获取到任何数据
})

注意：

let that = this 不可少，若直接通过this修改宽度值，在移动端是没有效果的，命名可以不是that

此处选择id选择器，也可以使用类选择器；

data所包含的信息：

参考文章：uniapp中如何获取元素的宽度高度等信息_uniapp 获取元素宽度-CSDN博客

<!-------------------------------->

最终效果：

着重于功能实现，样式没有调整

代码：

<scroll-view scroll-x="true" class="scroll-X marginTop" @scroll="scrollMove">
						<view class="w-25 inline-block align-center" v-for="(item, itemIndex) in test">
							<view @click="toPage(item.url)"> 
								<image :src="item.icon" class="iconImage-30"></image>
								<view>{{item.text}}</view>
							</view>
						</view>
						<!-- 用于获取滑块的显示区域宽度 -->
						<view ref="line"></view>
					</scroll-view>

scrollMove(e) {
				// 滑动区域的显示宽度350px
				const width = this.$refs.line.$el.offsetWidth
				// 滑动区域的整体宽度 525
				const total = e.detail.scrollWidth
				// 隐藏区域宽度 175 设置占比60%
				const hidden = total - width
				
				// 滑动距离左端的距离, 最大175
				const ob = e.detail.scrollLeft
				const per = ob * 1.0 / hidden
				this.percent = per * 70
				
			},

设计思路：

1. 在滑块区域内给个view用于获取滑块显示的宽度

2. 滚动条宽度固定（100px），滚动亮色区域长度固定（30px）

3. 监听scroll-view的滚动事件，获取滚动区域的整体宽度（e.detail.scrollWidth）以及滚动长度（e.detail.scrollLeft）

4. 计算滚动长度占整体显示的比例，并计算已滚动区域的长度（此处乘以70）

5. 在亮色区域前添加滚动区域，并长度动态变化

结语：

我自己也是第一次写这样的自定义滚动条，思路也不是很清晰，有问题或不明白的可以在评论区一起讨论。