【微信小程序】滑动验证

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/NAMECZ/article/details/79978328

此代码只是一种模板代码,样式丑陋,但是功能完善。需要使用的朋友自己修改样式代码和部分参数达到自己需求!

此代码用到的组件是微信小程序的 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,
        })
      }
    })
  },

})
全自动代码,无脑操作,希望能帮到在座的各位!~
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页