zoukankan      html  css  js  c++  java
  • MUI手势锁

    通过mui提供的手势锁插件实现,手势锁样式、存储需要自己完成。

    1.样式展示

    2.实现

    2.1 html

    需要一个div容器

    <div class="mui-content">
        <div id='holder' class="mui-locker" data-locker-options='{"ringColor":"rgba(210,210,210,1)","fillColor":"#ffffff","pointColor":"rgba(0,136,204,1)","lineColor":"rgba(0,136,204,1)"}' data-locker-width='300' data-locker-height='300'></div>
    </div>
    

    2.2 js

    引入mui.locker.js

    <script src="../js/mui.locker.js"></script>

    监听事件,响应手势完成动作,并对正确的手势进行存储

    var holder = document.querySelector('#holder');
        var    fingerprintRecord = []; //用于存储输入的手势
        var self = plus.webview.currentWebview();
        var finger_title = self.finger_title;
     
        document.getElementById('finger_p').innerText = finger_title;
         
        //处理事件
        holder.addEventListener('done', function(event) {
            var rs = event.detail;
            if (rs.points.length < 4) {
                mui.toast("手势过于简单,请重新输入!");
                fingerprintRecord = [];
                rs.sender.clear();
                return;
            }
     
            fingerprintRecord.push(rs.points.join(''));
            if (fingerprintRecord.length >= 2) {
                if (fingerprintRecord[0] == fingerprintRecord[1]) {
                    mui.toast("手势设定完成");
                    //保存
                    UserInfo.fingerprint("");//清空用户指纹
                    UserInfo.fingerprint(fingerprintRecord[0]); //保存新指纹
                     mui.openWindow({
                        url: '../index.html',
                        id: 'index.html'
                    });
                } else {
                    mui.toast("两次手势不一致!")
                }
                rs.sender.clear();
                fingerprintRecord = [];
            } else {
                mui.toast("请确认手势设定");
                rs.sender.clear();
            }
        });
    
  • 相关阅读:
    Node_JS
    读JS高级——第五章-引用类型 _记录
    读JS高级(兼容&&BOM&&私有变量&&面向对象)
    JS高级设计第七章——复习知识点
    nodeJs抓取网页
    表单脚本api_contenteditable
    泛——复习js高级第三版
    nodeJS
    Eclipse布局问题小记
    再议负载均衡算法
  • 原文地址:https://www.cnblogs.com/xiaolinstudy/p/10250466.html
Copyright © 2011-2022 走看看