直播软件源码，横向滚动 自定义底部指示器样式

直播软件源码，横向滚动 自定义底部指示器样式实现的相关代码

1

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

​以上就是 直播软件源码，横向滚动 自定义底部指示器样式实现的相关代码，更多内容欢迎关注之后的文章