此代码只是一种模板代码,样式丑陋,但是功能完善。需要使用的朋友自己修改样式代码和部分参数达到自己需求!
此代码用到的组件是微信小程序的 movable-area 和 movable-view ; 使用简单效果强大省去很多繁琐操作!
下边大家看效果图:
直接上代码:
wxml:
<movable-area class="content" style="width:{{area_width}}%">
<movable-view class='box' style='width:{{box_width}}rpx' friction="{{100}}" direction="horizontal" x="{{x}}" damping="{{500}}" bindchange="drag" bindtouchend="dragOver">
</movable-view>
</movable-area>
wxss:
.content{
margin: 0 auto;
margin-top: 200rpx;
height: 80rpx;
border: 1rpx solid #ddd;
}
.box{
/* width: 120rpx; */
height: 80rpx;
background-color: orange;
}
js:
var coord=0;
Page({
/**
* 页面的初始数据
*/
data: {
x:0,
area_width:95, //可滑动区域的宽,单位是百分比,设置好后自动居中
box_width:120, //滑块的宽,单位是 rpx
maxNum:0, //验证成功时的坐标,不需要设置,代码自动计算;
},
drag(e){
var that = this;
coord = e.detail.x;
},
dragOver(e){
var that = this;
if(coord>=that.data.maxNum){
wx.showToast({
title: '验证成功',
icon: 'success',
duration: 2000
})
//验证成功之后的代码
}else{
that.setData({
x:0,
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (e) {
var that = this;
wx.getSystemInfo({
success: function (res) {
console.log(res.windowWidth);
var n = Math.floor(res.windowWidth * that.data.area_width / 100-that.data.box_width/2)
that.setData({
maxNum:n,
})
}
})
},
})
全自动代码,无脑操作,希望能帮到在座的各位!~