mui框架探索

時間 2019-12-06

標籤 mui 框架探索简体版

原文原文鏈接

0- mui輪播方法

//重要的事情說一遍：若輪播組件內容爲js動態生成時（好比經過ajax動態獲取的營銷信息），
//則須要在動態生成完整DOM後，手動調用圖片輪播的初始化方法。
 
//得到slider插件對象
var gallery = mui('.mui-slider');
gallery.slider({
  interval:5000//自動輪播週期，若爲0則不自動播放，默認爲0；
});
 
//切換到指定輪播
gallery.slider().gotoItem(1); //切換至第二個輪播
 
//當前所處輪播位置的索引
gallery.slider().getSlideNumber();
 
//上一個輪播
gallery.slider().prevItem();
 
//下一個輪播
gallery.slider().nextItem();
 
//左右滑動獲取當前輪播位置索引
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
  //注意slideNumber是從0開始的；
    var index = event.detail.slideNumber;
   console.info(index)
});

mui('.mui-scroll-wrapper#scrollMain').scroll().scrollTo(0, 0, 0); //100毫秒滾動到頂

若是有多個.mui-scroll-wrappe時候, 得單獨定義一個標識, 不然會報錯
複製代碼

1- 橫向滾動報錯

* { touch-action: pan-y; } 
 使用全局樣式樣式去掉
複製代碼

<div class="translate_l mui-scroll-wrapper mui-segmented-control mui-segmented-control-inverted">
    <div class="mui-scroll">
        <div class="swiper-slide">
            <a class="mui-control-item home active" href="/">
                <span>首頁</span>
                <i class="line"></i>
            </a>
        </div>
        <div class="swiper-slide">
            <a class="mui-control-item transaction active" href="/transaction">
                <span>環評辦理</span>
                <i class="line"></i>
            </a>
        </div>
    </div>
</div>
複製代碼

2- MUI-之-頁面傳值中的坑與解決辦法

頁面傳值5種方法:

1.若是頁面沒有被建立可使用打開頁面時的擴展參數傳值過去.

A頁面 ---- mui.openWindow({ url: 'detail.html', id: 'accuracydetail', extras:{//擴展參數 id:'我是傳的值' //k-v } }} B頁面--- var wv = plus.webview.currentWebview();//當前頁面的窗口對象 var id = wv.id;css

2.若是頁面被建立了，使用第一種方法傳值會失效.這裏講evalJS傳值(只支持string)

A頁面---- var list = plus.webview.getWebviewById('頁面Id');//接收參數的窗口對象 list.evalJS('getData(''+JSON.stringify(Data)+'')');//自定義函數getData() B頁面---- function getData(data){ console.log('收到來自A頁面傳遞的數據：'+data); var dataObj = JSON.parse(data); }html

3.使用自定義事件傳值mui.fire('web窗口Id','事件名','數據Json')

A頁面 ---- var list = plus.webview.getWebviewById('頁面Id');//接收參數的頁面 mui.fire('web窗口Id','事件名A','數據Json') B頁面--- document.addEventListener('事件名A', function(event) { console.log(event.detail.數據Json裏的字段) });web

4.利用緩存傳參數

分爲H5的localStorage、sessionStorage 和 mui api的plus.storage.setItem('鍵值', ObjStr) plus.storage.getItem('鍵值')ajax

5.url傳參

坑: 1.webview必須觸發loaded事件後，才能執行evalJS或mui.fire方法 webview.addEventListener('loaded',function () { console.log(1221); webview.evalJS("test()"); mui.fire(webview, 'pageShow', {}); }) 2.頁面被建立了後用第二種方法傳值會失敗(機率性很大99%)json

3- 遮罩組件使用

var mask = mui.createMask();//callback爲用戶點擊蒙版時自動執行的回調；

mask.show(); //顯示遮罩
mask.close(); //關閉遮罩
複製代碼

4- ajax請求錯誤

$.ajax({
      type: "post",
      url: "/assist/create",
      data: JSON.stringify({
        entity
      }),
      contentType: 'application/json;charset=utf-8',
      success: function (res) {}
})

1. data數據必須給轉換成Json字符串, JSON.stringify()方法
2. 必須設置contentType.  contentType: 'application/json;charset=utf-8',
複製代碼

5- 獲取地址欄參數

function getSearch() {
    var search = location.search; //獲取參數
    search = decodeURI(search); //解碼成中文
    search = search.slice(1); //去掉?
    var arr = search.split("&"); //轉成數組
    //遍歷數組
    var obj = {};
    arr.forEach(function (item) {
        var k = item.split("=")[0];
        var v = item.split("=")[1];
        obj[k] = v;
    });
    //返回
    return obj;
}

取數據:
	var obj = getSearch();
    var newsCode = obj.newsCode;
    var newsType = obj.newsType;
複製代碼

6- template過濾事件

// 過濾時間
  template.defaults.imports.timestamp = function (value) {
    return timestampToTime(value);
  };
  
// 過濾時間函數
function timestampToTime(val) {
    var date = new Date(val);//時間戳爲10位需*1000，時間戳爲13位的話不需乘1000
    Y = date.getFullYear() + '-';
    M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    D = date.getDate() + ' ';
    // h = date.getHours() + ':';
    // m = date.getMinutes() + ':';
    // s = date.getSeconds();
    // return Y + M + D + h + m + s;
    return Y + M + D;
  };
複製代碼

7- 使用上拉加載和下拉刷新方法致使整個頁面非定位元素點擊事件失效

// 頁面加了上拉加載和下拉刷新後全部的非定位元素的click事件所有失效
mui('body').on('tap', '.toDetails1', function () {
    window.top.location.href = this.href;
});
mui('body').on('tap', '.toDetails2', function () {
    window.top.location.href = this.href;
});
mui("body").on("tap", ".home", function () {
    window.top.location.href = this.href;
})
// this.href 能夠獲取到當前元素的href值
//  window.top.location.href 是最外層的頁面跳轉
複製代碼

8- 給tabs頁籤加上一個滑動的效果

原理是用的輪播圖的效果來實現的,api

<div class="mui-content information">
    <div id="slider" class="mui-slider tabsHeight mui-fullscreen">
        <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="titleList">
                <a id="itemmobile1" class="itemmobile1 tabsTitle mui-control-item paddingNone mui-active" href="#item1mobile" data-id="0">
                    環評資訊
                </a>
                <a id="itemmobile2" class="itemmobile2 tabsTitle mui-control-item paddingNone" href="#item2mobile" data-id="1">
                    環評知識
                </a>
            </div>
        </div>

        <div class="mui-slider-group informaTabs" style="transform: translate3d(0px, 0px, 0px) translateZ(0px);">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <div class="mui-scroll-wrapper" data-scroll="1">
                    <div class="mui-scroll" data-pulltorefresh="9" style="transform: translate3d(0px, 0px, 0px) translateZ(0px);">
                        <ul class="mui-table-view ul_tap1">
                            <!-- 坑 -->
                        </ul>
                    </div>
                </div>
            </div>
            <div id="item2mobile" class="mui-slider-item mui-control-content">
                <div id="scroll2" class="mui-scroll-wrapper" data-scroll="2">
                    <div class="mui-scroll" data-pulltorefresh="9" style="transform: translate3d(0px, 0px, 0px) translateZ(0px);">
                        <ul class="mui-table-view ul_tap2">
                            <!-- 坑2 -->
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
複製代碼

9- 動態賦予高度

由於這個輪播組件剛開始是沒有高度的, 須要動態賦予它高度, 其實若是不用這個滑動功能, 是不會出現這種bug的數組

// 獲得每次請求的start,和數組的length, 這樣就能計算出總共的li的長度
var start = res.result.start;
var lis_length = res.result.data.length;
var lis_number = parseInt(start / lis_length) + 1;
var result = res.result;
$(".ul_tap1").append(template("tpl1", result));
getHeight(lis_number, lis_length); // 獲取mui-content頁籤內容的高度

// 獲取高度而且賦值
function getHeight(lis_number, lis_length) {
  var li_height = 113; // 固定li的高度爲 113px
  var lis_length = lis_number * lis_length; // 全部的li的個數

  // ----- 保留代碼 -----
  // var lis_length = document.querySelectorAll(".mui-table-view.ul_active li");
  // var li_height = parseInt(window.getComputedStyle(lis[0], null).height);
  // ----- 保留代碼 -----

  // +40 是加tabs標題的高度
  var heights = li_height * lis_length + 40 + 'px';
  $(".mui-content.information").css("height", heights);
}
// 我是固定了li的高度, 而後在動態獲取的數據中獲得每次的start和數組的length,這樣就獲得的是 
複製代碼

10- 將輪播圖直接第二頁展現

var gallery = mui('.mui-slider'); // 得到slider插件對象
gallery.slider().gotoItem(0); //切換至第一個輪播
gallery.slider().gotoItem(1); //切換至第二個輪播
複製代碼

11- 上拉加載

up: {
    height: 200, // 可選.默認50.觸發上拉加載拖動距離
    auto: true, // 默認爲false, 自動上拉加載一次
    contentrefresh: "正在加載...",//可選，正在加載狀態時，上拉加載控件上顯示的標題內容
    contentnomore: '沒有更多數據了',//可選，請求完畢若沒有更多數據時顯示的提醒內容；
    callback: function () {
        var id = $(".tabsTitle.mui-active")[0].id;
    	renderFirst(fn());
    }
}
// 精髓在於: renderFirst調用一個函數方法過去, 而後這個callback(res)直接調用
複製代碼

12- 滑動到頂部

mui('.mui-scroll-wrapper#scrollMain').scroll().scrollTo(0, 0, 0); //100毫秒滾動到頂
複製代碼

13- 滑動到其餘tabs滾動條的問題

1- 直接執行代碼置頂, 效果也確實置頂了, 可是出現了滾動條還在下面, 一滑動頁面會馬上到最下面去緩存

mui('.mui-scroll-wrapper#scrollMain').scroll().scrollTo(0, 0, 0); //100毫秒滾動到頂
複製代碼

2- 使用從新執行上拉加載一次再置頂, 效果也確實置頂了, 可是出現了滾動條還在下面, 一滑動頁面會馬上到最下面去bash

mui('#scrollMain').pullRefresh().pullupLoading(); // 從新執行上拉加載一次
mui('.mui-scroll-wrapper#scrollMain').scroll().scrollTo(0, 0, 0); //100毫秒滾動到頂
複製代碼

3- 使用下拉刷新方法, 滑動以後啓動下拉刷新方法, 效果確實達到了, 可是第二個tabs會無限執行下拉方法,session

mui('#scrollMain').pullRefresh().pulldownLoading();
複製代碼

4- 使用啓動下拉刷新方法後立刻結束下拉刷新, 完美解決

mui('#scrollMain').pullRefresh().pulldownLoading();
mui('#scrollMain').pullRefresh().endPulldownToRefresh();
複製代碼

14- 當沒有數據的時候應該結束上拉加載

有個bug: 一排代碼必定要在二排代碼前, 不然沒有數據, 還會再重置上拉加載一塊兒就報錯了

一. mui('#scrollMain').pullRefresh().refresh(true)
二. mui('#scrollMain').pullRefresh().endPullupToRefresh(res.result.data.length < 10);
複製代碼

15- 留個問題

以前沒有調用下拉刷新方法前高度一直存在問題, 雖然使用不少方法讓高度變爲0, 但最後由於執行輪播效果, 滑動以後高度其實一直都存在, 因此輪播組件裏的高度是很差控制的, 不知道哪位高手是能夠控制呢

16- 在寫了上拉加載和下拉刷新以後, 全部的點擊事件所有無效了, 包括a標籤

我只寫了兩個, 實際上是全部的非定位元素點擊事件所有失效的, 等一個個寫才行

mui('body').on('tap', '.toDetails1', function () {
    window.top.location.href = this.href;
});
mui('body').on('tap', '.toDetails2', function () {
    window.top.location.href = this.href;
});
複製代碼

17- 輪播圖組件

圖片要多放2個圖片第一張是最後一張最後一張是第一張第一張和最後一張要添加mui-slider-item-duplicate 類名

<div class="mui-slider lunbo">
    <!-- 圖片 -->
    <div class="mui-slider-group mui-slider-loop">
        <div class="mui-slider-item-duplicate mui-slider-item">
            <a href="#">
                <img class="img_banner" src="./images/carousel_003.jpg" />
            </a>
        </div>
        <div class="mui-slider-item">
            <a href="#">
                <img class="img_banner" src="./images/carousel_001.jpg" />
            </a>
        </div>
        <div class="mui-slider-item">
            <a href="#">
                <img class="img_banner" src="./images/carousel_002.jpg" />
            </a>
        </div>
        <div class="mui-slider-item">
            <a href="#">
                <img class="img_banner" src="./images/carousel_003.jpg" />
            </a>
        </div>
        <div class="mui-slider-item-duplicate mui-slider-item">
            <a href="#">
                <img class="img_banner" src="./images/carousel_001.jpg" />
            </a>
        </div>
    </div>

    <!-- 小圓點 -->
    <div class="mui-slider-indicator">
        <div class="mui-indicator mui-active"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
    </div>
</div>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。