小程序实现投票进度条

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

小程序实现投票进度条

  2021-04-02 我要评论

示例图:

上代码:

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,
 });
 
})
您可能感兴趣的文章:

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们