内容简介:最近在做一个微信公众号的h5页面,使用Jquery Weui组件实现项目中需要的功能。做个笔记,方便后期使用。若有不好的地方,欢迎给出宝贵建议哦。本例中以备注:
最近在做一个微信公众号的h5页面,使用Jquery Weui组件实现项目中需要的功能。做个笔记,方便后期使用。若有不好的地方,欢迎给出宝贵建议哦。
功能
滚动加载更多 [Jquery Weui]
本例中以 body
为参考对象,以下是代码的展示:
- html部分
<div id="list"> </div> /*滚动加载 start*/ <div class="weui-loadmore" style="display: none;"> <i class="weui-loading"></i> <span class="weui-loadmore__tips">正在加载</span> </div> /*滚动加载 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('<p>我是新加载的内容</p>'); dom.loading = false; //销毁滚动插件 },1500); }); //初始化加载滚动插件 复制代码
下拉刷新 [Jquery Weui]
- html部分
<!--下拉刷新 start--> <div class="weui-pull-to-refresh__layer"> <div class='weui-pull-to-refresh__arrow'></div> <div class='weui-pull-to-refresh__preloader'></div> <div class="down">下拉刷新</div> <div class="up">释放刷新</div> <div class="refresh">正在刷新</div> </div> <!--下拉刷新 end--> 复制代码
放在需要被下拉的容器中,此例子中, body
为被需要下拉的容器
- js部分
//下拉刷新 $(document.body).pullToRefresh(function(){ // console.log('下拉刷新'); //下拉刷新的操作代码块 setTimeout(function(){ $(document.body).pullToRefreshDone(); //下拉刷新完成后 },1500); }); 复制代码
select [Jquery Weui]
个人很喜欢这个组件。
- html部分
<input class="weui-input" id="unitId" type="text" readonly value=""> 复制代码
- 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部分
<button class="weui-btn weui-btn_mini weui-btn_primary" v-on:click="showPic(imgUrl)">查看</button> 复制代码
- 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部分
<div id="videoDom"> </div> 复制代码
- 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 部分
<a href="javaScript:;" class="weui-btn weui-btn_mini weui-btn_primary" v-on:click="downLoadPic(item.url, $event)">下载</a> 复制代码
- js部分
downLoadPic:function(imgUrl,event){ //a 标签的图片 event.target.href = imgUrl; event.target.download = imgUrl; } 复制代码
日期插件
项目中使用 laydate
插件,实现日期功能
- html 部分
<input class="weui-input" id="startDateTimeId" type="text" readonly value=""> 复制代码
- js部分
<script> //执行一个laydate实例 laydate.render({ elem: '#startDateTimeId', //指定元素 type: 'datetime' }); //插件学习地址:https://zhidao.baidu.com/question/2122174631660864107.html 和 https://www.layui.com/laydate/ </script> 复制代码
laydate日期插件地址: www.layui.com/laydate/
demo地址: gitee.com/echopcn/Jqu…
遇到的问题
控制台抛出以下错误: [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:这个项目还在开发中,后期遇到的问题或新增的功能,此文也会不断的更新。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 易水公众组件 5.3.0 已经发布,开发常用功能集
- 微信公众号开发C#系列-9、多公众号集中管理
- Python微信公众号开发
- 优质的技术公众号这样定义
- 你可能错过了这些公众号
- 推荐一些学习方面的公众号
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
树莓派学习指南
[英]Peter Membrey、[澳]David Hows / 张志博、孙峻文 / 人民邮电出版社 / 2014-4 / 49.00元
树莓派(Raspberry Pi)是一款基于Linux系统的、只有一张信用卡大小的卡片式计算机。由于功能强大、性能出色、价格便宜等特点,树莓派得到了计算机硬件爱好者以及教育界的欢迎,风靡一时。 《树莓派学习指南(基于Linux)》是学习在树莓派上基于Linux进行开发的一本实践指南。全书共3个部分11章,第一部分是前两章,讲述如何设置和运行图形用户界面(GUI)。第二部分是第3章到第7章,讲......一起来看看 《树莓派学习指南》 这本书的介绍吧!
HTML 压缩/解压工具
在线压缩/解压 HTML 代码
html转js在线工具
html转js在线工具