微信公眾號H5頁面–JqueryWeui元件使用

一如初衷發表於2019-03-01
H5jQueryUI元件

背景

最近在做一個微信公眾號的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:這個專案還在開發中，後期遇到的問題或新增的功能，此文也會不斷的更新。

相關文章