效果图如下所示效果图如下所示.wxml





{{percen}}%





{{percen}}%.wxss
page{
background-color:#ddd;
}
.jindu{
margin: 50px calc((100% - 300px) / 2) 0;
width: 300px;
float: left;
height: 6rpx;
background-color: #fff;
position: relative;
}
.xian{
width: 0%;
float: left;
height: 6rpx;
background-color: #1989FA;
position: relative;
transition: all 0.1s;
}
.yuan{
border-radius: 50%;

background: #1989FA;

position: absolute;

right: 0rpx;

display: block;
margin: calc((6rpx - 14rpx)/2);

width: 14rpx;

height: 14rpx;
}
.bfb{
width: 300px;
margin: 10px calc((100% - 300px) / 2) 0;
float: left;
}
page{
background-color:#ddd;
}
.jindu{
margin: 50px calc((100% - 300px) / 2) 0;
width: 300px;
float: left;
height: 6rpx;
background-color: #fff;
position: relative;
}
.xian{
width: 0%;
float: left;
height: 6rpx;
background-color: #1989FA;
position: relative;
transition: all 0.1s;
}
.yuan{
border-radius: 50%;

background: #1989FA;

position: absolute;

right: 0rpx;

display: block;
margin: calc((6rpx - 14rpx)/2);

width: 14rpx;

height: 14rpx;
}
.bfb{
width: 300px;
margin: 10px calc((100% - 300px) / 2) 0;
float: left;
}.js
Page({
data: {
towards: 0,
percen:0,
kuan:0,
},
onLoad:function(options){
this.setData({

kuan: parseInt((wx.getSystemInfoSync().windowWidth - 300) / 2)
})
},
cuin:function(e){
this.setData({

towards: (e.detail.x - this.data.kuan) > 300 ? 300 : (e.detail.x - this.data.kuan),

percen: (e.detail.x / (300 / 100)) < 1 ? 0 : parseInt(e.detail.x / (300 / 100)),
})
},
touchMove: function (e) {
if (e.touches.length == 1) {

var moveX = e.touches[0].clientX;

var towards = (moveX - this.data.kuan) > 300 ? 300 : (moveX - this.data.kuan)

this.data.percen = (towards / (300 / 100)) < 1 ? 0 : parseInt(towards / (300 / 100))

this.setData({

towards: towards,

percen: this.data.percen

})
}
},
})
Page({
data: {
towards: 0,
percen:0,
kuan:0,
},
onLoad:function(options){
this.setData({

kuan: parseInt((wx.getSystemInfoSync().windowWidth - 300) / 2)
})
},
cuin:function(e){
this.setData({

towards: (e.detail.x - this.data.kuan) > 300 ? 300 : (e.detail.x - this.data.kuan),

percen: (e.detail.x / (300 / 100)) < 1 ? 0 : parseInt(e.detail.x / (300 / 100)),
})
},
touchMove: function (e) {
if (e.touches.length == 1) {

var moveX = e.touches[0].clientX;

var towards = (moveX - this.data.kuan) > 300 ? 300 : (moveX - this.data.kuan)

this.data.percen = (towards / (300 / 100)) < 1 ? 0 : parseInt(towards / (300 / 100))

this.setData({

towards: towards,

percen: this.data.percen

})
}
},
})