【微信小程序】滑动验证

原创 2018年04月17日 18:34:08

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

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

})
全自动代码,无脑操作,希望能帮到在座的各位!~
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/NAMECZ/article/details/79978328

仿今日头条微信小程序左右滑动客户端

  • 2018年02月11日 16:03
  • 112KB
  • 下载

微信小程序-广告滑动栏实现

微信小程序-广告滑动栏实现
  • SSBBY
  • SSBBY
  • 2017-03-09 19:28:07
  • 2379

微信小程序— slider(滑动选择器)

今天来介绍一下slider(滑动选择器): 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/slider.html 1.效...
  • Afanbaby
  • Afanbaby
  • 2018-01-30 15:42:39
  • 229

微信小程序8-swiper(滑动面板)

swiper就是为了以后做轮播图用的。下面是一些它的属性 . 1.首先新建一个page(记得在app.json中注册),上效果图。 . 2.index.wxml中的代码 Content...
  • qq_34589749
  • qq_34589749
  • 2016-11-07 23:12:34
  • 2486

微信小程序开发之顶部滑动导航菜单

摘自网络文章 思路:使用的是小程序的scroll-view html部分 {{item.name}} css部分 .meal-time-list { width: 80%;...
  • xgx198831
  • xgx198831
  • 2018-01-25 14:22:48
  • 657

微信小程序——-会滑动的顶部tab选项卡

微信小程序——-会滑动的顶部tab选项卡不废话直接进入主题test.wxml ...
  • MoDingXiao
  • MoDingXiao
  • 2017-01-23 16:50:30
  • 2984

微信小程序开发教程(基础篇)10-滑动操作

在实际的移动应用程序交互方式中,最常见的就是滑动操作。像左右滑动切换页面,手指张开来放大图片等,都是由滑动操作来完成的。 微信小程序默认提供的相关事件如下: tap对应点击操作,还提供了lon...
  • crazytea
  • crazytea
  • 2016-11-19 11:38:42
  • 20173

微信里经常看到的滑动翻页效果,slide,翻页slide

转自:http://www.bkjia.com/HTML5/927456.html 微信里经常看到的滑动翻页效果,slide,翻页slide 上个星期我们的产品姐姐让我帮她写个...
  • chelen_jak
  • chelen_jak
  • 2015-04-29 18:01:49
  • 5243

微信小程序开发常用技巧(5)——view左右滑动,切换page页面

微信小程序开发中很多用户操作都会借鉴原生APP,众所周知原生APP中滑动切换页面,对于用户体验很好,那么使用微信小程序能不能实现呢?答案是肯定的。 首先来说说实现思路:利用touchstart、to...
  • qq_18325731
  • qq_18325731
  • 2017-07-19 15:48:45
  • 7761

微信小程序左右滑动切换图片酷炫效果(附效果)

开门见山,先上效果吧!感觉可以的用的上的再往下看。(动图网址)   心动吗?那就继续往下看!   先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说...
  • rolan1993
  • rolan1993
  • 2018-02-02 10:53:26
  • 856
收藏助手
不良信息举报
您举报文章:【微信小程序】滑动验证
举报原因:
原因补充:

(最多只允许输入30个字)