微信公众号H5页面--JqueryWeui组件使用

栏目: jQuery · 发布时间: 6年前

内容简介:最近在做一个微信公众号的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);
}); //初始化加载滚动插件
复制代码
微信公众号H5页面--JqueryWeui组件使用

下拉刷新 [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('弹层关闭前。。。');
       //内容修改后 也 可以在这里操作
    }
});
复制代码
微信公众号H5页面--JqueryWeui组件使用

全屏查看图片[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 组件】,在这里也做个总结,方便日后项目开发的使用。

微信公众号H5页面--JqueryWeui组件使用

视频播放

项目中使用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);
复制代码
微信公众号H5页面--JqueryWeui组件使用

图片下载

项目中使用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;
}
复制代码
微信公众号H5页面--JqueryWeui组件使用

日期插件

项目中使用 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/

微信公众号H5页面--JqueryWeui组件使用

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:这个项目还在开发中,后期遇到的问题或新增的功能,此文也会不断的更新。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

树莓派学习指南

树莓派学习指南

[英]Peter Membrey、[澳]David Hows / 张志博、孙峻文 / 人民邮电出版社 / 2014-4 / 49.00元

树莓派(Raspberry Pi)是一款基于Linux系统的、只有一张信用卡大小的卡片式计算机。由于功能强大、性能出色、价格便宜等特点,树莓派得到了计算机硬件爱好者以及教育界的欢迎,风靡一时。 《树莓派学习指南(基于Linux)》是学习在树莓派上基于Linux进行开发的一本实践指南。全书共3个部分11章,第一部分是前两章,讲述如何设置和运行图形用户界面(GUI)。第二部分是第3章到第7章,讲......一起来看看 《树莓派学习指南》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

html转js在线工具
html转js在线工具

html转js在线工具