版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_16247851/article/details/84940942
身体有九个基础指标，为了不重复写同样的代码，写了一个进度条组件：
创建一个组件叫progress
progress.json的代码
{
"component": true,
"usingComponents": {}
}
progress.wxml的代码
<!--pages/bodyScale/progress/progress.wxml-->
<view class="parent">
<view style="width:{{totalWidth}}px; margin:0 auto;">
<view class="progress" style="padding-left:{{half_width}}px; padding-right:{{half_width}}px;">
<view wx:for="{{num}}" wx:for-index="index" wx:for-item="numItem">
<view style="width:{{width}}px;font-size: 12px;color: #6C6E6F;text-align: center;">{{numItem}}</view>
</view>
</view>
<view class='progress_item'>
<view class="progress" style='padding-top:14rpx;'>
<view wx:for="{{colors}}" wx:for-index="index" wx:for-item="color">
<view style="background:{{color}}; height: 6rpx; width:{{width}}px;margin-right:5rpx;" />
</view>
</view>
<image src='../../src/icon_progress.png' style='width:17px;height:17px; position: absolute;left:{{margin_left}}px;'></image>
</view>
<view class="progress">
<view wx:for="{{des}}" wx:for-index="index" wx:for-item="desItem">
<view style="width:{{width}}px;font-size: 12px;color: #6C6E6F;text-align: center; margin-top:37rpx;">{{desItem}}</view>
</view>
</view>
<view class='introduce'>{{introduce}}</view>
</view>
</view>
progrss.js的代码
// pages/bodyScale/progress/progress.js
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
* 用于组件自定义设置
*/
properties: {
// 颜色值
colors: {
type: Array,
value: ["#61C9B7", "#5498C2", "#F2BB1F"]
},
// 文字描述
des: {
type: Array,
value: ["偏低", "健康", "偏高"]
},
// 数值
num: {
type: Array,
value: ["18.5", "23.9"]
},
// 最大值
max: {
type: Number,
value: 100
},
//当前进度
index: {
type: Number,
value: 60
},
introduce: {
type: String,
value: "身体质量指数，又称BMI指数（Body Mass Index）是用体重公斤数除以身高米数平方得出的数字，是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。"
}
},
/**
* 页面的初始数据
*/
data: {
totalWidth: 0,
width: 100,
half_width: 0,
min: 0, //最小
margin_left: 10 //进度往右偏移多少
},
methods: {
calculationWidth() {
var that = this;
var proportion = that.data.colors.length;
var Sys = wx.getSystemInfoSync();
var widthData = Sys.screenWidth * 0.7 / proportion;
that.setData({
width: widthData,
totalWidth: Sys.screenWidth * 0.7,
half_width: widthData / 2
})
console.log(that.data.width)
},
calculationMarginLeft: function (index_num, max_num) {
console.log(index_num + "___" + max_num + "___")
var that = this;
var value = that.data.totalWidth * (index_num / max_num)
that.setData({
index: index_num,
max: max_num,
margin_left: value
})
console.log(that.data.index + "___" + that.data.max + "___" + that.data.margin_left)
}
},
attached: function() {},
moved: function() {},
detached: function() {},
ready: function() {
var that = this;
that.calculationWidth();
that.calculationMarginLeft();
},
})
progress.wxss代码如下：
/* pages/bodyScale/progress/progress.wxss */
.parent {
display: flex;
flex-direction: column;
background: #eef0f6;
border-radius: 5px;
margin-left: 20px;
margin-right: 20px;
padding-bottom: 19px;
padding-top: 19px;
}
.progress {
display: flex;
flex-direction: row;
margin: 0 auto;
}
.progress_item {
display: flex;
position: absolute;
text-align: center;
height: 34rpx;
line-height: 30rpx;
margin: 0 auto;
}
.introduce {
font-size: 13px;
color: #6c6e6f;
letter-spacing: 0.08px;
line-height: 20px;
padding-top: 17px;
}
组件的使用，在要使用的界面的json里声明这个组件：
"usingComponents": {
"Myprogress": "../pages/bodyScale/progress/progress"
}
在wxml里直接使用：
<Myprogress id="myProgress3" introduce="{{detail[index]}}" colors="{{colors[index]}}" des="{{des[index]}}" num="{{num[index]}}"/>
js的中数据源格式如下：
detail: ["体重（body weight）为裸体或穿着已知重量的工作衣称量得到的身体重量。体重增长除与骨的增长关系密切以外，还与肌肉，脂肪等的增长有关系。",
"身体质量指数，又称BMI指数（Body Mass Index）是用体重公斤数除以身高米数平方得出的数字，是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。",
"体脂率是指人体内脂肪重量在人体总体重中所占的比例，又称体脂百分数，它反映人体内脂肪含量的多少。体脂率越高代表越肥胖，会提高罹患各种疾病的风险。",
"全身肌肉的总重量。肌肉是你身体消耗能量的主力军，提升肌肉量是提高基础代谢率的好方法，也是让身材更棒的关键。",
"骨量是指是单位体积内，骨组织[骨矿物质（钙、磷等）和骨基质（骨胶原、蛋白质、无机盐等等）]含量。骨量是用来代表骨骼的健康情况。增加骨量不仅要补钙，还要补充胶原蛋白。",
"指水分在身体成分中所占的比例。因为肌肉的70%是水，这项指标能反映减重的方式是否正确。",
"基础代谢率，又称BMR：（basal metabolism rate）是指人体在清醒而又极端安静的状态下，不受肌肉活动、环境温度、食物及精神紧张等影响时的能量代谢率。",
"内脏脂肪是人体脂肪中的一种。它与皮下脂肪（也就是我们平时所了解的身体上可以摸得到的“肥肉”） 不同，它围绕着人的脏器，主要存在于腹腔内。过多的内脏脂肪会加大高血压等疾病的发病率，进而增加中风和心肌梗死等心脑血管等事件的发生率。"
],
colors: [
["#61C9B7", "#5498C2", "#F2BB1F", "#E68848"],
["#61C9B7", "#5498C2", "#F2BB1F", "#E68848"],
["#61C9B7", "#5498C2", "#F2BB1F", "#E68848", "#DB6363"],
["#61C9B7", "#5498C2", "#AD5FD1"],
["#61C9B7", "#5498C2", "#AD5FD1"],
["#61C9B7", "#5498C2", "#AD5FD1"],
["#61C9B7", "#5498C2"],
["#5498C2", "#E98D41", "#DB6363"]
],
des: [
["瘦", "标准", "胖", "肥胖"],
["瘦", "普通", "偏胖", "肥胖"],
["偏瘦", "标准", "警惕", "偏胖", "肥胖"],
["不足", "标准", "优秀"],
["不足", "正常", "优秀"],
["不足", "标准", "优秀"],
["偏低", "达标"],
["标准", "警惕", "危险"]
],
num: [
[],
["18.6", "23.9", "27.9"],
["11.0%", "19.0%", "24.0%", "29.0%"],
["58.2", "87.2"],
["2.4"],
["55%", "65%"],
["1722卡"],
["9", "14"]
],