1. 程式人生 > >小程式 投票或砍價進度條

小程式 投票或砍價進度條

示例圖:

上程式碼:

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,
    });

})