首页uniapp监听scroll-view如果滑动给其加上划线

uniapp监听scroll-view如果滑动给其加上划线

时间: 2025-01-25 13:11:10 浏览: 30

在uniapp中，如果你想在scroll-view滑动时给其加上划线，可以通过监听scroll-view的滚动事件来实现。以下是一个简单的示例： ```html <template> <view> <scroll-view @scroll="onScroll" scroll-y="true" :style="{ height: '200px', border: '1px solid #000' }" :scroll-top="scrollTop" >  <view v-for="item in items" :key="item.id" :style="{ height: '50px' }"> {{ item.name }} </view> </scroll-view> <view :style="{ height: '2px', width: indicatorWidth + 'px', backgroundColor: '#000', marginTop: '10px' }"></view> </view> </template> <script> export default { data() { return { items: Array.from({ length: 20 }, (_, i) => ({ id: i, name: `Item ${i + 1}` })), scrollTop: 0, indicatorWidth: 0, scrollViewWidth: 0 }; }, mounted() { this.$nextTick(() => { this.scrollViewWidth = this.$refs.scrollView.clientWidth; }); }, methods: { onScroll(e) { const scrollLeft = e.detail.scrollLeft; const scrollWidth = e.detail.scrollWidth; const clientWidth = e.detail.clientWidth; const indicatorWidth = (clientWidth / scrollWidth) * this.scrollViewWidth; this.indicatorWidth = indicatorWidth; } } }; </script> ``` 在这个示例中，我们通过监听`@scroll`事件来获取scroll-view的滚动信息，并根据滚动信息动态计算指示器的宽度，从而实现划线的效果。

阅读全文