<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"> 向右滑動(dòng)驗(yàn)證</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, //可滑動(dòng)區(qū)域的寬，單位是百分比，設(shè)置好后自動(dòng)居中
? ? 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
? ? })
? },
? ? // 滑塊驗(yàn)證
? dragOver(e) {
? ? let rpx = this.data.rpx
? ? if ((this.data.coord) * rpx + this.data.box_width+5>= this.data.maxNum) {
? ? ? //驗(yàn)證成功之后的代碼
? ? } else {
? ? ? this.setData({
? ? ? ? x: 0,
? ? ? })
? ? }
? },

這里是用了微信小程序的組件可移動(dòng)的視圖容器，有兩層容器的嵌套，通過(guò)滑塊的滑動(dòng)，改變第二層的寬度，以達(dá)到拉鏈?zhǔn)降男Ч?/p>

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

您可能感興趣的文章: