uniapp中用view实现横向条形图

动态视图宽度设置

最新推荐文章于 2025-09-15 18:15:00 发布

原创最新推荐文章于 2025-09-15 18:15:00 发布 · 3k 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了一种在前端开发中动态设置view元素宽度的方法，通过绑定样式属性实现响应式布局，使视图宽度能根据数据变化自动调整。

view长度属性动态赋值

颜色：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

关注关注

11-23

1614

10-25

1044

8 条评论您还未登录，请先登录后发表或查看评论

8 条评论

程序员阿鑫 2021.11.04
原理就是使用大view套用小view，大view当做全部，小view当做进度，有个东西叫 Echarts，uni中有个叫ucharts，有兴趣的可以去学学 [code=html] <template> <view class="container"> <view class="bar-title"> 统计情况 </view> <view class="bar-wrap"> <view class="bar-content" :style="'width:'+rate+'%'"></view> </view> </view> </template> <script> export default { data() { return { rate:20 } }, methods: { } } </script> <style> .bar-wrap{ width: 350rpx; height: 30rpx; background-color: #d9dbe1; } .bar-content{ height: 30rpx; background-color: #007AFF; } </style> [/code]