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. 在亮色区域前添加滚动区域,并长度动态变化
结语:
我自己也是第一次写这样的自定义滚动条,思路也不是很清晰,有问题或不明白的可以在评论区一起讨论。