微信小程序拼团进度,显示当前刻度,未到刻度点时显示在中间

先上效果

废话少说，解说都写在注释里面了。先上代码，实实在在的原创，搞了半天。。。转载请说明出处

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

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>
          </view>

css

/*进度条  */
.keduBuFen{
  height: 100rpx;
  width: 100%;
  padding-bottom: 60rpx;
}
.bigs1{
  width: 75%;
  margin: 0rpx auto;
  margin-top: 80rpx;
  position: relative;
}
.bigs2{
  width: 75%;
  margin: 0rpx auto;
  position: relative;
}
.hui{
  width: 100%;
  height: 4rpx;
  background: #e2e2e2;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.viewsmall{
  flex:1;
  height: 4rpx;
}
.zhongJianSelect{
 width:10rpx;
  height:10rpx;
  border-radius:10rpx;
  background:#fff !important;
  border: 7rpx solid #fab13e; 
  top:28rpx;
  margin:-8rpx;
  z-index: 101;
}
.zhongJian{
  width:20rpx;
  height:20rpx;
  border-radius:20rpx;
  background:#e1e1e1;
  top:28rpx;
  margin:-8rpx;
  z-index: 210;
}
.gangBig{
  position: absolute;
  left: 0;
  bottom: 0rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between
}
.huang{
  position: absolute;
  height: 4rpx;
  background: #fab13e;
  left: 0;
  bottom: 0rpx;
  display: flex;
  flex-direction: row;
  float: left
}
.kedudian{
  float: left;
  position: absolute;
  bottom: 0;
  z-index: 500;
  width:160rpx;
height:70rpx;
overflow: hidden;
}

.jinduPng{
 width:120rpx;
height:50rpx;
}
.cantuanNumber{
position:absolute;
left:18rpx;
bottom:40rpx;
font-size:20rpx;
color:white;
text-align:center;
}
.viewbig{
  width: 100%;
  height: 100%;
  flex-direction: row;
  display: flex;
  flex-wrap: nowrap ;
  padding:15rpx 0;

}
.viewsmall2{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.viewsmall2Text{
  color: #fab750;
  font-size: 24rpx;
  text-align: right
}
.viewsmall2TextSelect{
  color: #574c46;
  font-size: 24rpx;
  text-align: right
}
.touXiangImgView1{
  display: flex;
flex-direction: column;

}
.touXiangImgView{
display:flex;
flex-direction:column;
float:left;
height:124rpx;
width:94rpx;  
margin:10rpx 5rpx;
padding-top:5rpx; 

}
.touXiangImgView2{
height:124rpx;
}

核心就是对于进度的判断，毕竟当前进度不能按等分来的，需要一系列运算，你也可以封装一下。

对了对了当前进度提示文字下面是一个图片，放下面，自己插入

微信小程序拼团进度,显示当前刻度,未到刻度点时显示在中间

猜你喜欢