ITPub博客

首页 > 应用开发 > Java > 直播软件源码,横向滚动 自定义底部指示器样式

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

原创 Java 作者:zhibo系统开发 时间:2021-11-26 14:15:21 0 删除 编辑

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

<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>


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


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69978258/viewspace-2844296/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2020-07-02

  • 博文量
    688
  • 访问量
    260421