小程序实现投票进度条

(编辑：jimmy 日期: 2024/10/26 浏览：3 次 )

本文实例为大家分享了小程序投票进度条的具体代码，供大家参考，具体内容如下

示例图：

上代码：

index.wxml:

<view class='clo_jdt'>
 <view style='width:{{width}}'></view>
 </view>
 <view>进度
 <text>{{width}}</text>
 </view>
 <view>当前票数
 <text>{{quorumvotes}}</text>
</view>

index.wxss

.clo_jdt {
 width: 100%;
 border: 1px solid #6c9c2c;
 height: 25px;
 border-radius: 10px;
}
 
.clo_jdt view { 
 background: #95ca0d;
 float: left;
 height: 100%;
 text-align: center;
 line-height: 150%;
 border-radius: 10px 0 0 10px;
}

index.js

Page({
 data: {
 quorumvotes: 50,//当前票数
 width: "0%",//投票进度
 votes: 500 //最多可投票数
 },
 
 onLoad: function() {
 //获取总票数
 var votes = this.data.votes;
 //获取当前票数
 var quorumvotes = this.data.quorumvotes;
 //进度
 var speed = quorumvotes/votes*100+"%";
 console.log(speed)
 this.setData({
 width: speed,
 });
 
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：微信小程序实现时间进度条功能
下一篇：Vue实现按钮级权限方案