滑块拼图验证码效果
运行环境：uni-app
操作步骤
- 1.点击验证，拼图验证码出现；
- 2.用户按住滑块，滑块随着用户手指拖动；
- 3.滑块和卡片移动到正确位置/滑块和卡片没有移动到正确位置；
- 4.验证成功跳转新页面/验证失败刷新验证码。
主要问题
- 1.如何实现滑块移动?
- 2.如何实现卡片随滑块同步移动?
- 3.如何判断验证成功和失败？
- 4.如何实现失败后的刷新功能?
解决方法
- 1.
uniapp自带的movable-view组件（切记，该组件必须放在movable-area组件中使用）； - 2.绑定
style样式，将卡片距离容器的距离与movable-view中的X属性匹配； - 3.在滑动结束之后调用判断函数，如果X不在该区域内则判断为验证失败，反之成功；
- 4.失败后刷新组件，将实例中的所有值恢复默认。
初始index.vue
使用组件
<VerifyCode @change="change" @refsback="bgChange()"></VerifyCode>
(uni-app中导入组件需要在`pages.josn`写入配置）
组件内容
总结
这是笔者第一次对移动web项目的尝试，也是第一次使用uni-app，uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
