uni 不使用插件的情况下写的动态进度条

最新推荐文章于 2025-03-27 15:39:02 发布

如梦令1

最新推荐文章于 2025-03-27 15:39:02 发布

阅读量250

点赞数

分类专栏： css 手写动态进度条文章标签： html5 css3 javascript

本文链接：https://blog.youkuaiyun.com/qq_42966789/article/details/112978919

版权

css 手写动态进度条专栏收录该内容

1 篇文章

订阅专栏

1，

2，html

<view class="data_title__39vye">
	<view class="data_progress__1PKMR">
		<view class="data_proLeft__1gtzQ" :style="{width:pressWidth}"></view>
	</view>
</view>

3, css

.data_progress__1PKMR{
			width: 100%;
			height:20rpx;
			margin-top: 10rpx;
			background: #067ee7;
			border-radius: 16rpx;
			overflow: hidden;
			.data_proLeft__1gtzQ{
				width: 55%;
				height: 100%;
				background: linear-gradient(-45deg,transparent 7px,#F15D5D 0);
				border-top-left-radius: 16rpx;
				border-bottom-left-radius:16rpx;
			}
		}

4，js 部分

export default {
	data(){
	   return{
	   		pressWidth: '0%',
	   }
	}
},
methods: {
			value: function(e) {
					this.pressWidth = '60%'
				}
			},
}