直播軟體原始碼，橫向滾動 自定義底部指示器樣式

直播軟體原始碼，橫向滾動 自定義底部指示器樣式實現的相關程式碼

<template>
<view style="margin: 0rpx;">
<scroll-view scroll-x="true" class="images-view" @scroll="scroll">
<view class="images-view-item" v-for="(item,index) in imageList" :key="index">
<image src="../../static/cs1.jpg" class="images-view-item"></image>
</view>
</scroll-view>
<!-- <progress :percent="percent" border-radius="10" stroke-width="8" backgroundColor="#999" activeColor="#FF7C0E" /> -->
<view class="progressBg">
<view class="progressAction" :style="{marginLeft: `${progressMargin}%`}"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imageList: [1, 2],
progressMargin:0
}
},
methods: {
scroll(event) {
//
console.log("距離每個邊界距離" + event.detail.scrollWidth);
console.log("距離x距離" + event.detail.scrollLeft);
var num1 = event.detail.scrollWidth / 2
var num2 = event.detail.scrollLeft
var p = (num2 / num1) * 100;
this.progressMargin = Math.round(p)-10;
console.log("percent==>" + this.progressMargin);
if (this.progressMargin < 0) {
this.progressMargin = 0;
}
if (this.progressMargin >99) {
this.progressMargin = 90;
}
// if (p >=100) {
// this.progressMargin = 80;
// }
},
}
}
</script>
<style >
.progressAction{
width: 10%;
height: 15rpx;
border-radius: 20rpx;
background-color: #FF7C0E;
    /* margin-left: 50%; */
}
.progressBg {
width: 100%;
height: 15rpx;
border-radius: 20rpx;
background-color: #999999;
}
.images-view {
width: 100%;
overflow: hidden;
white-space: nowrap;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.images-view-item {
display: inline-block;
width: 100%;
/* margin-right: 20rpx; */
}
</style>

以上就是 直播軟體原始碼，橫向滾動 自定義底部指示器樣式實現的相關程式碼，更多內容歡迎關注之後的文章