微信小程序實現(xiàn)滑塊驗證

更新時間：2022年05月23日 13:28:30 作者：林鹿海鯨夢你

這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)滑塊驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序實現(xiàn)滑塊驗證的具體代碼，供大家參考，具體內容如下

思路：

1.手指按住并且還能滑動
2.滑動到一定的距離進行判斷
百度微信開發(fā)者文檔：使用 movable-view的可移動區(qū)域。結合 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">
?? ??? ??? ?<view class='movable-icon'></view>
?? ??? ?</movable-view>
</movable-area>

wxjs

var coord; ?//聲明 全局變量

// data里面的數(shù)據(jù)
?? ?x: 0,
?? ?area_width: 85, ? //可滑動區(qū)域的寬，單位是百分比，設置好后自動居中
?? ?box_width: 120, ? //滑塊的寬,單位是 rpx
?? ?maxNum: 0,?


// 函數(shù)方法
?drag(e) {
? ? var that = this;
? ? coord = e.detail.x; ?//根據(jù)bindchange 事件獲取detail的x軸
? },
? dragOver(e) { ? ? //根據(jù)觸摸 手指觸摸動作結束 ? ?判斷 當前的x軸 是否大于預設值的值?
? ? var that = this;
? ? if (coord >= that.data.maxNum) {
? ? ? wx.showToast({
? ? ? ? title: '驗證成功',
? ? ? ? icon: 'success',
? ? ? ? duration: 2000
? ? ? })
? ? ? //驗證成功之后的代碼
? ? } else { ? ? ?// 如果不大于 則設置 x周的距離為0
? ? ? that.setData({
? ? ? ? x: 0,
? ? ? })
? ? }
? },
? ? onLoad: function (e) {
?? ? ? ?var that = this;
?? ? ? ?wx.getSystemInfo({ ?//獲取系統(tǒng)信息 設置預設值
?? ? ? ? ?success: function (res) {
?? ? ? ? ? ?console.log(res.windowWidth);
?? ? ? ? ? ?var n = Math.floor(res.windowWidth * that.data.area_width / 100 - that.data.box_width / 2)
?? ? ? ? ? ?console.log(n)
?? ? ? ? ? ?that.setData({
?? ? ? ? ? ? ?maxNum: n,
?? ? ? ? ? ?})
?? ? ? ? ?}
?? ? ? ?})
? },

.content{
? margin: 0 auto;
? margin-top: 200rpx;
? height: 90rpx;
? background: #ededed;
? color: #666;
? border-radius: 10px;
? display:flex;
? justify-content:center;
? align-items:center;
? font-size:16px;
?
}
.box{
? /* width: 120rpx; */
? height: 90rpx;
? background-color: #fc5b13;
? border-radius: 10px;
? display: flex;
? justify-content: center;
? align-items: center;
}
.movable-icon{
? width: 60rpx;
? height: 60rpx;
? background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACVElEQVR4Xu3aLY/VQBTG8f8TVgErFk2wGDyCVbwm4PgQJDgQJKt2eRFkNyTgcXwGDLsECwaFIQGHIgENqEOadJPmht5OOzOlZ9ra3p47z29O78t0xMwPzTw/C8DSATMXWG6BmTfA8iG43AIht4CZPQAeA1+AO5I+hFy37jVmtgm8BC4DB5KexdYccn1nB5jZGeA7sFG/wR/gpqR3Q97w+BozewTsNmq8kHQ/puaQa0MALgCfVopHI5jZIXBtpe7oCCEAJ4BqsFWrNo8oBDO7Bbz+x6yNitAJUA3QzE4Cb4DtxAj3gOf/EyEIoGSEYIBSEXoBlIjQG6A0hEEAJSEMBigFIQqgBIRoAO8ISQA8IyQDyIywAzzN8YsxKYBHhOQA3hCyAHhCyAbgBSErgAeE7AANhGoJ7WLi9YTob4dRAGqE08DbFoRLkj4OWdMzszaEXUlPumqOBtCBcCjpRtdg2863IPwCzkn6sa7u2ABtS2tHkq4nBvgNnJX0cxIAHeuKOW6BPUnVs4y1xygdkHFRdfofglMOX7VG1g6YevisAB7CZwPwEj4LgKfwyQG8hU8KkDF81ueHSb4FvIZP0gGew0cDeA8fBVBC+MEApYQfBFBS+N4ApYXvBVBi+GCAUsP3Aai2s1Xb2prHPLbJmdl54HPK8PUC6RFwdaXuqHsEgzrAzLaAb8CperBRM38c2Mz2gIcNgNHDBwHUs3UbeAV8Be5Ket+12Nh1vrFZ+gqwP9nN0l1BvJ9P8m/QM8IC4Hn2Uox96YAUip5rLB3gefZSjH32HfAX1fX6UCbefU0AAAAASUVORK5CYII=) no-repeat center center;
? background-size: 100% 100%;
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: