微信小程序 --- 自定义组件之滑动验证组件

最新推荐文章于 2025-02-25 16:11:46 发布

豆i浆

最新推荐文章于 2025-02-25 16:11:46 发布

阅读量6.3k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/sinat_19327991/article/details/81700614

本文介绍了如何在微信小程序中创建一个自定义的滑动验证组件，提供了组件的效果图和目录结构，并给出了调用组件的index文件及滑动验证组件的部分关键代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果图：

这里写图片描述

目录结构：

这里写图片描述

点击此处前往码云下载此组件源码若觉得好用，记得star一个哦

调用组件的index文件

//index.js

const app = getApp()

Page({

  data: {

  },

  myEventListener: function(e) {
   
   
    //获取到组件的返回值，并将其打印
    console.log('是否验证通过:' + e.detail.msg)
  }
})

//index.json
{
  "usingComponents": {
    "sliders": "/sliders/sliders"
  }
}

<!-- index.wxml -->

<sliders  bindmyevent="myEventListener"></sliders>

滑动验证组件部分代码：

// sliders.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    hint: '右滑验证',//默认提示语
    sysW: wx.getSystemInfoSync().windowWidth,//获取屏幕宽度
    xAxial: 0,//X轴的初始值
    x: 0,//触摸时X轴的值
    w: (wx.getSystemInfoSync().windowWidth * 0.8) - 50,//滑块可移动的X轴范围
    cssAnimation: 'translate3d(0, 0, 0)',//CSS动画的初始值
    succeedMsg: '',//验证成功提示信息的默认值
    pullStatus: true,//是否允许验证成功后继续滑动
  },

  /**
   * 组件的方法列表