.wxml
<view>
<view class="num">
<view class="num_tex" wx:for="{{newNum}}" wx:key="index">{{item}}</view>
</view>
<view class="progress">
<view class="progress2">
<view class="color" style="width: calc(100% / {{progressNum.bgcolor.length}} - 4rpx); background: linear-gradient(to right, {{item.first}}, {{item.end}});" wx:for="{{progressNum.bgcolor}}" wx:key="index">
<view class="pro" style="padding-left: calc({{copiesLeft}} - 40rpx);" wx:if="{{index == indexNUm}}">
<image src="{{imgUrl}}/upload/health/love.png" mode="aspectFill" />
</view>
</view>
</view>
</view>
<view class="text">
<view class="text_text" style="width: calc(100% / {{progressNum.bgcolor.length}} - 4rpx);" wx:for="{{progressNum.bgcolor}}" wx:key="index">{{item.text}}</view>
</view>
</view>
.wxss
.progress {
display: flex;
align-items: center;
}
.progress2 {
width: 100%;
height: 12rpx;
display: flex;
justify-content: space-between;
}
.progress2 view {
border-radius: 20rpx;
}
.pro{
margin-top: -14rpx;
}
.num {
display: flex;
justify-content: space-evenly;
margin: 0rpx 24rpx 16rpx;
}
.text {
margin-top: 16rpx;
display: flex;
text-align: center;
}
image {
width: 40rpx;
height: 40rpx;
display: block;
}
.js
正常js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
envId: app.globalData.envId,
imgUrl:app.globalData.imgUrl,
progressNum: {
num: [0,18.4, 23.9, 27.9,80],
bgcolor: [{
text: '偏瘦',
first: '#EFECFF',
end: '#D7CDF3'
},
{
text: '标准',
first: '#D7CDF3',
end: '#C0AEE8'
},
{
text: '超重',
first: '#C0AEE8',
end: '#A58ADA'
},
{
text: '肥胖',
first: '#A58ADA',
end: '#8C69CD'
},
],
parcent: '80'
},
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.wipeOff()
this.withTab()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
// 数据显示去掉首尾元素
wipeOff(){
let num = this.data.progressNum.num
let newArr = num.slice(1,-1);
this.setData({
newNum: newArr
})
},
// 设置每个view宽度
withTab(){
let num = this.data.progressNum.num
let percent = this.data.progressNum.parcent
num = num.map(item => parseFloat(item))
percent = parseFloat(percent)
for(let i = 0; i < num.length; i++){
if(percent < num[i]){
let i2 = i-1
let num2 = num[i] - num[i2]
let percent2 = percent - num[i2]
let copies = (parseInt((percent2/num2)*100) )+ '%'
this.setData({
copiesLeft: copies,
indexNUm: i2
})
return
} else {
let indexI = this.data.progressNum.num.length
let indexI2 = indexI-2
this.setData({
copiesLeft: '100%',
indexNUm: indexI2
})
}
}
},
})
components
const app = getApp()
Component({
options:{
addGlobalClass: true
},
/**
* 组件的属性列表
*/
properties: {
progressNum:{
type: Object,
value:{}
}
},
/**
* 组件的初始数据
*/
data: {
envId: app.globalData.envId,
imgUrl:app.globalData.imgUrl,
progressNum:{},
},
/**
* 组件的生命周期
*/
lifetimes:{
attached: function () {
this.wipeOff()
this.withTab()
}
},
/**
* 组件的方法列表
*/
methods: {
// 数据显示去掉首尾元素
wipeOff(){
let num = this.data.progressNum.num
let newArr = num.slice(1,-1);
this.setData({
newNum: newArr
})
},
// 设置每个view宽度
withTab(){
let num = this.data.progressNum.num
let percent = this.data.progressNum.parcent
num = num.map(item => parseFloat(item))
percent = parseFloat(percent)
for(let i = 0; i < num.length; i++){
if(percent < num[i]){
let i2 = i-1
let num2 = num[i] - num[i2]
let percent2 = percent - num[i2]
let copies = (parseInt((percent2/num2)*100) )+ '%'
this.setData({
copiesLeft: copies,
indexNUm: i2
})
return
} else {
let indexI = this.data.progressNum.num.length
let indexI2 = indexI-2
this.setData({
copiesLeft: '100%',
indexNUm: indexI2
})
}
}
},
}
})