微信小程序-進度條-刻度

 

 

 

 js

var app = getApp()
Page({
data: {
num:8,//這是當前有幾個人
jindutiao: [ //這個是進度條的標准，刻度
{
num:3,
price:'999'
},
{
num: 5,
price: '799'
},
{
num: 10,
price: '599'
}
],
},
onLoad:function(){
this.jindutiao();
},
jindutiao: function () {
var that = this;
var jindutiao = that.data.jindutiao;
var num = that.data.num;
var p = 0;
for (var i = 0; i < jindutiao.length; i++) {
if (jindutiao[i].num > num) {
p = i;
break;
}
}
if (i == jindutiao.length) { p = i; }
for (var j = 0; j < p; j++) {
jindutiao[j].statu = true;
}
if (p == 0) {
num = 0.5 / jindutiao.length * 100;

} else if (jindutiao[p - 1].num < num) {
num = (p + 0.5) / jindutiao.length * 100;
//畢竟不是當前進度等分，所以讓他在等於8，7，6的時候也能在中間。就加0.5
} else {
num = p / jindutiao.length * 100;
//當前黃色進度長度就是當前人數除以總人數乘以100，就是進度條寬度的百分比。
}
that.setData({
width: num,
p: p,
jindutiao: jindutiao
})
},
})

CSS 

<view class="bigs1" >
<view class='hui'>
<block wx:for="{{jindutiao}}">
<view class='viewsmall'></view>
<view class="zhongJianSelect"wx:if="{{item.statu}}"></view>
<view class="zhongJian"wx:else></view>
</block>
</view>
<!--刻度杠 -->

<view class='kedudian'style="left:{{width-11}}%">
<image mode='scaleToFill' src='../img/dialog.png' class='jinduPng'></image>
<text class='cantuanNumber'>{{num}}人已參團</text>
</view>
<view class='huang' style="width:{{width}}%"></view>

</view>
<view class='bigs2'>
<view class='viewbig'>
<block wx:for="{{jindutiao}}">
<view class='viewsmall2' wx:if="{{item.statu}}">
<text class='viewsmall2Text'>{{item.num}}人團</text>
<text class='viewsmall2Text'>¥{{item.price}}</text>
</view>
<view class='viewsmall2' wx:else>
<text class='viewsmall2Text viewsmall2TextSelect'>{{item.num}}人團</text>
<text class='viewsmall2Text viewsmall2TextSelect'>¥{{item.price}}</text>
</view>

</block>
</view>

 

wxml

<view class="bigs1" >
<view class='hui'>
<block wx:for="{{jindutiao}}">
<view class='viewsmall'></view>
<view class="zhongJianSelect"wx:if="{{item.statu}}"></view>
<view class="zhongJian"wx:else></view>
</block>
</view>
<!--刻度杠 -->

<view class='kedudian'style="left:{{width-11}}%">
<image mode='scaleToFill' src='../img/dialog.png' class='jinduPng'></image>
<text class='cantuanNumber'>{{num}}人已參團</text>
</view>
<view class='huang' style="width:{{width}}%"></view>

</view>
<view class='bigs2'>
<view class='viewbig'>
<block wx:for="{{jindutiao}}">
<view class='viewsmall2' wx:if="{{item.statu}}">
<text class='viewsmall2Text'>{{item.num}}人團</text>
<text class='viewsmall2Text'>¥{{item.price}}</text>
</view>
<view class='viewsmall2' wx:else>
<text class='viewsmall2Text viewsmall2TextSelect'>{{item.num}}人團</text>
<text class='viewsmall2Text viewsmall2TextSelect'>¥{{item.price}}</text>
</view>

</block>
</view>

轉載 https://blog.csdn.net/qq_34622811/article/details/80900361