阅读 1024

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

背景

最近在做一个微信公众号的h5页面,使用Jquery Weui组件实现项目中需要的功能。做个笔记,方便后期使用。若有不好的地方,欢迎给出宝贵建议哦。

一个问题

会导致页面在大屏幕上样式冲突,文字字体很小,且布局错乱。

jquery weui在plus上兼容性问题,导致样式变形、冲突: blog.csdn.net/lilinoscar/…

功能

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

关注下面的标签,发现更多相似文章
评论