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

先上效果

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

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

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

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

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

微信小程序拼团功能页面展示
微信小程序拼团功能页面展示一.拼团功能拼团就是让消费者在优惠价格的吸引下,自发邀请好友组团,以优惠的价格购买商品的促销活动二.拼团功能的作用 1.与纯粹的购物相比,这种营销方式迎合了大多数用户的 ...
拼团小程序源码_微信小程序拼团系统为什么很多商家开发
问大家一个问题,你有收到过朋友的微信小程序拼团消息吗?相信不少的人都收到过,但是一些不太了解小程序的人,对拼团系统还不太了解,西安小程序开发青云在线小编告诉您,小程序拼团模式也叫做团购模式,同样一款产 ...
一、微信小程序拼团项目简介
实现目标:类似于拼多多商城的开团,参团,以及单人购买的电商项目实现技术: 1. 前端采用微信小程序的组件,参考官方API:https://mp.weixin.qq.com/debug/wxadoc/ ...
微信小程序拼团(后台java)开发-第一节-产品设计-发起拼团原型和业务简介
最近准备做一个微信小程序(后台Java支撑)的拼团小项目练练手,微信小程序准备用原生的(不涉及支付环节).之前在公司一直用spring boot ,spring cloud这一套,拼团我想分多个文章来 ...
微信小程序拼团后端接口设计规范
来源:https://share.notestore.cn/ac... 公告列表接口地址: g=Api&m=Banner&a=lists 返回说明 //正常返回的JSON数据包 {& ...
微信小程序拼团功能之表结构
做拼团功能首先我对需求看了一下,对于单个的拼团商品要求有拼团的人数限制,拼团的活动时间倒计时,以及开团后参团时间倒计时等需求.开团人是团长与参团人加以区分,同时一个拼团有多人参加,付款与未付款对拼团成 ...
微信小程序拼团头像叠加css 【亲测有效】
其实就是在图片上加一个动态css样式, 普通的中间没有 - 的直接写法是 :style="{{background:red}}" 如果是transform:translateX( ...
Thinkphp开发微信商城小程序源码拼团小程序源码带后台+前端小程序拼团源码仿拼多多
码说明:Thinkphp开发微信商城小程序源码拼团小程序源码带后台+前端小程序拼团源码仿拼多多其它说明: 基于小程序的拼团应用,用户可通过拼团,随时发起拼团活动并分享给好友拼团是商品营销和售卖的一 ...
微信小程序进度条样式_详解微信小程序——自定义圆形进度条
微信小程序自定义圆形进度条,具体如下: 无图无真相,先上图: 实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条. 代码实现: JS代码: 页面初始化 options为页面跳转所带来的参数 ...

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

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

最新文章

热门文章