版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Bright2017/article/details/82757354
WXML:
<view id="wrapper2">
<view id="progressbar2"></view>
<view id="fill2" style="width:{{view2.Width}}px;height:{{view2.Height}}px;top:{{top}}px;">
<view class='fltent2' style="line-height:{{linheight}}px;height:{{view2.Height}}px;" id='mjltest'>
{{count3}}%
</view>
</view>
</view>
</view>
index.js:
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
linheight:20,//行高
top:197,
view2: {
Width: 22,
Height: 20
},
count3:0,//进度条百分比
timer3: ''//定时器名字
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.bb();
},
bb: function () {
var that = this;
var top=that.data.top;//获取动态的top定位
var count2 = that.data.count3;//获取倒计时初始值
var count = that.data.view2.Height;//获取倒计时初始值
//如果将定时器设置在外面，那么用户就看不到countDownNum的数值动态变化，所以要把定时器存进data里面
that.setData({
timer3: setInterval(function () {//这里把setInterval赋值给变量名为timer2的变量
count++;
count2++;
top--;
// 获取元素高度
//创建节点选择器
var query = wx.createSelectorQuery();
//选择id
query.select('#mjltest').boundingClientRect()
query.exec(function (res) {
//res就是 所有标签为mjltest的元素的信息 的数组
console.log('获取节点信息', res);
//取高度
console.log('打印元素高度', res[0].height);
that.setData({
linheight: res[0].height
})
})
that.setData({
view2: {
Width: 22,
Height: count
},
count3: count2,
top:top
})
//在倒计时还未到0时，这中间可以做其他的事情，按项目需求来
if (count == 100) {
//这里特别要注意，计时器是始终一直在走的，如果你的时间为0，那么就要关掉定时器！不然相当耗性能
//因为timer是存在data里面的，所以在关掉时，也要在data里取出后再关闭
clearInterval(that.data.timer3);
//关闭定时器之后，可作其他处理codes go here
}
}, 1000)
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
WXSS:
#wrapper2{
position: relative;
width:100px;
height:230px;
border:1px solid darkgray;
margin-bottom: 50px;
}
#progressbar2{
position: absolute;
top:15px;
left:30px;
width:20px;
height:200px;
border:1px solid darkgray;
border-radius: 10px;
}
#fill2{
position: absolute;left: 30px;
background-color: #6caf00;
border-radius: 10px;
transform:rotate(180deg);
}
.fltent2{
transform:rotate(180deg);
font-size: 12px;
text-align: center;
height: 100%;
}效果图:
