背景
最近在做一个微信公众号的h5页面，使用Jquery Weui组件实现项目中需要的功能。做个笔记，方便后期使用。若有不好的地方，欢迎给出宝贵建议哦。
功能
滚动加载更多 [Jquery Weui]
本例中以
body为参考对象，以下是代码的展示：
- html部分
/*滚动加载 start*/ /*滚动加载 end*/复制代码
备注：
滚动加载的代码块，放在要滚动加载的容器中，本例的滚动加载容器是：body
- js部分
$(document.body).infinite().on("infinite",function(){ if(dom.loading){ return; } $('.weui-loadmore').show(); dom.loading = true; setTimeout(function(){ //parentDom = $('#list'); Loadmore.loadDom(parentDom,data); $('#list').append('我是新加载的内容
'); dom.loading = false; //销毁滚动插件 },1500);}); //初始化加载滚动插件复制代码 下拉刷新 [Jquery Weui]
- html部分
复制代码下拉刷新释放刷新正在刷新
放在需要被下拉的容器中，此例子中，
body为被需要下拉的容器
- js部分
//下拉刷新$(document.body).pullToRefresh(function(){ // console.log('下拉刷新'); //下拉刷新的操作代码块 setTimeout(function(){ $(document.body).pullToRefreshDone(); //下拉刷新完成后 },1500);});复制代码 select [Jquery Weui]
个人很喜欢这个组件。
- html部分
复制代码
- js部分
$('#unitId').select({ title:'选择单位', items:items, input:items[0].title, onClose:function(e){ console.log(e); console.log('弹出关闭'); $.toast("弹出层关闭", "text"); //内容修改后的操作可以在这里操作 }, beforeClose:function(){ console.log('弹层关闭前。。。'); //内容修改后 也 可以在这里操作 }});复制代码 全屏查看图片[Jquery Weui]
- html部分
复制代码
- js部分
showPic:function(imgUrl){ //Jquery Weui start var pb1 = $.photoBrowser({ items:[imgUrl] }); pb1.open(); //Jquery Weui end}复制代码 items是一个数组，里面可以存放多个图片路劲，效果像朋友圈的查看照片功能
以下几个是项目中使用到的功能【不是 jquery Weui 组件】，在这里也做个总结，方便日后项目开发的使用。
视频播放
项目中使用ckplayer插件实现视频的播放功能，但是此项目是要在微信浏览器中运行，所以有一个问题：在手机端的微信浏览器看视频时，视频总是在页面的最前面，即使修改
z-index也是无济于事。【PS：项目中有一个功能需要视频上悬浮文字说明文字，但是目前没有实现，大家有没有好的做法，可以推荐一下呀。】
- html部分
复制代码
- js部分
var url = 'http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/ckplayer-sample/mydream_zh_768-432.mp4';var videoObject = { container:'#videoDom', variable:'player', autoplay:true, video:url};var player=new ckplayer(videoObject);复制代码 图片下载
项目中使用html中的
<a>标签，实现图片的下载功能
- html 部分
下载复制代码
- js部分
downLoadPic:function(imgUrl,event){ //a 标签的图片 event.target.href = imgUrl; event.target.download = imgUrl;}复制代码 日期插件
项目中使用
laydate插件，实现日期功能
- html 部分
复制代码
- js部分
复制代码
laydate日期插件地址：
demo地址：
遇到的问题
控制台抛出以下错误： [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See
- 问题描述
使用 JQuery WEUI 组件实现下拉刷新功能，代码如下。但是触发下拉事件时，浏览器的控制台抛出 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See 这个错误
- 解决方法
在css中加上这句 * { touch-action: none; } 就可以了。 但是，鼠标可以滚动，在移动端就不能滚动了。然后这么问题没解决成功，大家有没有好的做法呢？
ps:这个项目还在开发中，后期遇到的问题或新增的功能，此文也会不断的更新。