JS - 上拉刷新 - 下拉加载
2018-09-11 •
评论
//扩展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);
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;
}
}
最近做一个搜索的需求,输入框的 keyup 事件,在安卓没有问题,但在 ios,要等到键盘落下后才执行事件。查资料得知:keyup 在 ios 原生的输入法是不支持的,因此采用如下方法进行兼容。
$("#keyHosptial").on('input propertychange', function(){
//TODO
});
最近做了个需求:用到了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();
});
});
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');
一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库
const Towxml = require('/towxml/main'); //引入towxml库
App({
towxml: new Towxml(), //创建towxml对象
})
<import src="../../towxml/entry.wxml"/>
<template is="entry" data="{{...text}}"/>
wxParse-微信小程序富文本解析组件,支持Html及markdown转wxml可视化
<template is="wxParse" data="{{wxParseData:content.nodes}}"/>
<import src="../../wxParse/wxParse.wxml"/>
@import "/wxParse/wxParse.wxss";