You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
3.0 KiB
137 lines
3.0 KiB
// components/progress/index.js
|
|
import {
|
|
px2rpx
|
|
} from '../utils/util.js';
|
|
import validator from '../behaviors/validator';
|
|
Component({
|
|
/**
|
|
* 组件的属性列表
|
|
*/
|
|
externalClasses: ['l-class', 'l-text-class', 'l-active-class', 'l-background-class'],
|
|
behaviors: [validator],
|
|
properties: {
|
|
percent: {
|
|
type: Number,
|
|
value: 0,
|
|
},
|
|
strokeWidth: {
|
|
type: Number,
|
|
value: 12
|
|
},
|
|
borderRadius: {
|
|
type: Number,
|
|
value: 6,
|
|
},
|
|
activeColor: {
|
|
type: String,
|
|
},
|
|
backgroundColor: {
|
|
type: String,
|
|
value: '#EBEBEB',
|
|
},
|
|
showInfo: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
textPosition: {
|
|
type: String,
|
|
value: 'right',
|
|
options: ['left', 'right']
|
|
},
|
|
textColor: {
|
|
type: String,
|
|
},
|
|
interval: {
|
|
type: Number,
|
|
value: 20,
|
|
},
|
|
active: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
duration: {
|
|
type: Number,
|
|
value: 30
|
|
}
|
|
},
|
|
|
|
options: {
|
|
multipleSlots: true,
|
|
pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
|
|
},
|
|
|
|
/**
|
|
* 组件的初始数据
|
|
*/
|
|
data: {
|
|
_slotWidth: 0,
|
|
_slotHeight: 0,
|
|
_progressWidth: 0,
|
|
_progressHeight: 0,
|
|
_marginBottom: 0,
|
|
marginLeft: 0,
|
|
marginTop: 0,
|
|
_useSlot: false,
|
|
},
|
|
|
|
observers: {
|
|
'_slotWidth, _slotHeight, _progressWidth, _progressHeight, percent,_useSlot': function (_slotWidth, _slotHeight, _progressWidth, _progressHeight, percent, _useSlot) {
|
|
if (_useSlot) {
|
|
const marginTop = -(_slotHeight - _progressHeight) / 2;
|
|
const marginLeft = (_progressWidth - _slotWidth) * percent / 100;
|
|
this.setData({
|
|
marginTop,
|
|
marginLeft
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
lifetimes: {
|
|
attached() {
|
|
if (this.data.percent > 100) {
|
|
this.setData({
|
|
percent: 100
|
|
});
|
|
}
|
|
|
|
const querySlot = wx.createSelectorQuery().in(this);
|
|
querySlot.select('.slot').boundingClientRect(res => {
|
|
let _useSlot = this.data._useSlot;
|
|
if (res.width) {
|
|
_useSlot = true;
|
|
}
|
|
this.setData({
|
|
_useSlot,
|
|
_slotWidth: px2rpx(res.width),
|
|
_slotHeight: px2rpx(res.height)
|
|
});
|
|
}).exec();
|
|
const queryProgress = wx.createSelectorQuery().in(this);
|
|
queryProgress.select('.progress').boundingClientRect(res => {
|
|
this.setData({
|
|
_progressHeight: px2rpx(res.height),
|
|
_progressWidth: px2rpx(res.width)
|
|
});
|
|
}).exec();
|
|
|
|
const percent = this.data.percent;
|
|
let now = 0;
|
|
if (this.data.active) {
|
|
setInterval(() => {
|
|
if (now < percent) {
|
|
now += 1;
|
|
this.setData({
|
|
percent: now
|
|
});
|
|
}
|
|
}, this.data.duration);
|
|
}
|
|
},
|
|
},
|
|
|
|
/**
|
|
* 组件的方法列表
|
|
*/
|
|
methods: {}
|
|
}); |