<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>

.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%;
}

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,
? ? ? })
? ? }
? },