快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)拉鏈式的滑動驗證

更新時間：2022年05月23日 13:56:11 作者：掠影浮華

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

本文實例為大家分享了微信小程序?qū)崿F(xiàn)拉鏈式滑動驗證的具體代碼，供大家參考，具體內(nèi)容如下

view結(jié)構(gòu)

<view style="position: relative;height:90rpx">
? ? <movable-area class="content" style="width:{{area_width}}rpx">
? ? ? <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>
? ? <view class="black" style="width:{{text}}rpx"></view>
? ? <view class="movable_text"> 向右滑動驗證</view>
</view>

wxss樣式

.content {
? position: absolute;
? right: 50rpx;
? height: 90rpx;
? background-color: #4fca9b;
? color: white;
? border-radius: 50px;
? display: flex;
? justify-content: center;
? align-items: center;
? font-size: 16px;
}
.box {
? z-index: 45;
? height: 90rpx;
? background-color: transparent;
? border-radius: 50rpx;
? display: flex;
? justify-content: center;
? align-items: center;
}
.movable-icon {
? z-index: 40;
? width: 120rpx;
? height: 90rpx;
? background-color: blue;
? border-radius:50rpx;?
? background-size: 100% 100%;
}
.black {
? z-index: 10;
? height: 90rpx;
? background-color: #acacac;
? position: absolute;
? right: 50rpx;
? border-radius: 50px;
}
.movable_text {
? font-size: 32rpx;
? z-index: 30;
? position: absolute;
? left: 50%;
? transform: translate(-50%, -50%);
? color: white;
? top: 50%;
}

js邏輯

Page({
? data: {
? ? // 滑塊
? ? x: 0,
? ? area_width: 620, //可滑動區(qū)域的寬，單位是百分比，設(shè)置好后自動居中
? ? text: 620,
? ? box_width: 120, //滑塊的寬,單位是 rpx
? ? maxNum: 620；
? ? coord: '',
? },
? onShow（）{
? ? ? this.data.rpx = this.getRpx() // px與rpx的轉(zhuǎn)換
? }，
? ? getRpx(){
? ? var winWidth = wx.getSystemInfoSync().windowWidth;
? ? return 750 / winWidth;
? },
? ? // 滑塊
? drag(e) {
? ? let rpx = this.data.rpx
? ? var coord = e.detail.x;
? ? let wid = this.data.maxNum - (coord) * rpx
? ? this.setData({
? ? ? coord: coord,
? ? ? text: wid
? ? })
? },
? ? // 滑塊驗證
? dragOver(e) {
? ? let rpx = this.data.rpx
? ? if ((this.data.coord) * rpx + this.data.box_width+5>= this.data.maxNum) {
? ? ? //驗證成功之后的代碼
? ? } else {
? ? ? this.setData({
? ? ? ? x: 0,
? ? ? })
? ? }
? },

這里是用了微信小程序的組件可移動的視圖容器，有兩層容器的嵌套，通過滑塊的滑動，改變第二層的寬度，以達到拉鏈式的效果。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: