标签 JS 下的文章

JS - mui.showLoading

JS

//扩展mui.showLoading
(function($, window) {
    //显示加载框
    $.showLoading = function(message,type) {
        if ($.os.plus && type !== 'div') {
            $.plusReady(function() {
                plus.nativeUI.showWaiting(message);
            });
        } else {
            var html = '';
            html += '<i class="mui-spinner mui-spinner-white"></i>';
            html += '<p class="text">' + (message || "数据加载中") + '</p>';
            //遮罩层
            var mask=document.getElementsByClassName("mui-show-loading-mask");
            if(mask.length==0){
                mask = document.createElement('div');
                mask.classList.add("mui-show-loading-mask");
                document.body.appendChild(mask);
                mask.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault();});
            }else{
                mask[0].classList.remove("mui-show-loading-mask-hidden");
            }
            //加载框
            var toast=document.getElementsByClassName("mui-show-loading");
            if(toast.length==0){
                toast = document.createElement('div');
                toast.classList.add("mui-show-loading");
                toast.classList.add('loading-visible');
                document.body.appendChild(toast);
                toast.innerHTML = html;
                toast.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault();});
            }else{
                toast[0].innerHTML = html;
                toast[0].classList.add("loading-visible");
            }
        }
    };
    //隐藏加载框
    $.hideLoading = function(callback) {
        if ($.os.plus) {
            $.plusReady(function() {
                plus.nativeUI.closeWaiting();
            });
        }
        var mask=document.getElementsByClassName("mui-show-loading-mask");
        var toast=document.getElementsByClassName("mui-show-loading");
        if(mask.length>0){
            mask[0].classList.add("mui-show-loading-mask-hidden");
        }
        if(toast.length>0){
            toast[0].classList.remove("loading-visible");
            callback && callback();
        }
    }
})(mui, window);

阅读全文

JS - 获取 url 参数

function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = decodeURI(window.location.search.substr(1)).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }else{ 
        return null; 
    }
}

IPhone/safari 不支持 keyup 解决办法

最近做一个搜索的需求,输入框的 keyup 事件,在安卓没有问题,但在 ios,要等到键盘落下后才执行事件。查资料得知:keyup 在 ios 原生的输入法是不支持的,因此采用如下方法进行兼容。


$("#keyHosptial").on('input propertychange', function(){
    //TODO
});

JS - MUI - PopPicker - 销毁 - 大坑

最近做了个需求:用到了2个选择器,逻辑是当第一个选择器选择好后,会根据第一个选中的值来对应加载第二个选择器的值,类似于省市区的效果,但是不能使用多级选择器来展示。
因此会发现,当第一个选择器多次点击后,会生成多次第二个选择器。


解决方法:

document.getElementById('hosptialMain').addEventListener("tap",function(){
    hospitalPicker.show(function(items){
        var text = items[0].text;
        var val = items[0].value;
        document.getElementById('hospital').value = text;
        document.getElementById('hospitalVal').value = val;
        /**********MUI大坑!去掉多余的************/
        var crr = $('.mui-poppicker');
        for(var j=0;j<crr.length;j++){
            var drr = crr[j];
            if(j != 0){
                drr.remove();
            }
        }
        /******************************************/
        //执行加载第二个选择器
        initDoctor();
    });
});

JS - 移动端滚动穿透

var ModalHelper = (function(bodyCls) {
    var scrollTop;
    return {
        //使body不可滚动
        afterOpen: function() {
            scrollTop = document.scrollingElement.scrollTop;
            document.body.classList.add(bodyCls);
            document.body.style.top = -scrollTop + 'px';
        },
        //使body恢复滚动
        beforeClose: function() {
            document.body.classList.remove(bodyCls);
            document.scrollingElement.scrollTop = scrollTop;
        }
    };
})('modal-open');

参考

小程序 - 代码高亮 - towxml

一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库


app.js

const Towxml = require('/towxml/main'); //引入towxml库
App({
  towxml: new Towxml(), //创建towxml对象
})

test.wxml

<import src="../../towxml/entry.wxml"/>
<template is="entry" data="{{...text}}"/>

阅读全文

小程序 - 解析html - WxParse

wxParse-微信小程序富文本解析组件,支持Html及markdown转wxml可视化


test.wxml

<template is="wxParse" data="{{wxParseData:content.nodes}}"/>
<import src="../../wxParse/wxParse.wxml"/>

app.wxss

@import "/wxParse/wxParse.wxss";

阅读全文

JS - 获取验证码及倒计时样式

HTML

<button type="button" onclick="getCode();" id='getCode'>获取验证码</button>

JS

function getCode(){
    var InterValObj; //timer变量,控制时间
    var count = 3; //间隔函数,1秒执行
    var curCount;//当前剩余秒数
    var getCode = $("#getCode");
    curCount = count;
    //设置button效果,开始计时
    getCode.attr("disabled", "true");
    getCode.css('background', '#cccccc').css('border', '1px solid #cccccc');
    getCode.html(curCount + "秒后获取");
    InterValObj = window.setInterval(function () {
        if (curCount == 1) {
            window.clearInterval(InterValObj);//停止计时器
            getCode.removeAttr("disabled");//启用按钮
            getCode.removeAttr("style");
            getCode.html("获取验证码");
        } else {
            curCount--;
            getCode.html(curCount + "秒后获取");
        }
    }, 1000);
}

阅读全文