實現代碼：

// 滑動部分 <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="210" @scroll="getleft" ><view class="scroll-view-item_H" v-for="item in columnData" :key="item.id"><view class="gold_item"><img :src="item.coverImg" alt="" /></view></view></scroll-view>// 自制滾動條 <view v-if="slideShow" class="slide"><view class="slide-bar"><view class="slide-show" :style="slideStyle"></view></view> </view> data() {return {slideWidth: 0, //滑塊寬slideLeft: 0, //滑塊位置totalLength: 0, //當前滾動列表總長slideShow: false,slideRatio: "",slideStyle: {}}},methods: {//根據滑塊數量獲取比例getRatio() {let systemInfo = wx.getSystemInfoSync();this.windowWidth = systemInfo.windowWidth;//數量少不需要滾動條if (this.columnData.length <= 3) {this.slideShow = false;} else {//分類列表總長度； 每個滑塊寬度：240let _totalLength = this.columnData.length * 240; //滾動列表長度與滑條 長度比例let _ratio = (240 / _totalLength) * (750 / this.windowWidth); //當前顯示紅色滑條的長度let _showLength = (750 / _totalLength) * 240; this.slideWidth = _showLength;this.totalLength = _totalLength;this.slideShow = true;this.slideRatio = _ratio;}this.slideStyle = {width: this.slideWidth + "rpx","margin-left": this.slideLeft <= 1 ? 0 : this.slideLeft + "rpx",};},getleft(e) {this.slideLeft = e.detail.scrollLeft * this.slideRatio;this.slideStyle = {width: this.slideWidth + "rpx","margin-left": this.slideLeft <= 1 ? 0 : this.slideLeft + "rpx",};}, } .scroll-view_H {white-space: nowrap;width: 100%; } .scroll-view-item_H {display: inline-block;width: 210rpx;height: 200rpx;margin-right: 30rpx;line-height: 200rpx;text-align: center; } .gold_item {width: 210rpx;height: 200rpx;text-align: center;display: flex;line-height: 200rpx;img {width: 210rpx;height: 200rpx;border-radius: 20rpx;} } .slide {height: 30rpx;background: #fff;width: 100%;padding: 14rpx 0 5rpx 0;.slide-bar {width: 240rpx;margin: 0 auto;height: 1.5px;background: #eee;.slide-show {height: 100%;background-color: #126bfa;} } }

總結

以上是生活随笔為你收集整理的scroll-view 自制横向滚动条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。