移動(dòng)端頁面實(shí)現(xiàn)下拉刷新、上拉加載 – 基于MUI插件

以樂淘的商品搜索（結(jié)果）頁面為例。

【待補(bǔ)充：效果圖】

HTML的實(shí)現(xiàn)

使用MUI的父子盒子嵌套的結(jié)構(gòu)。

  • 區(qū)域滾動(dòng)中，上下拉動(dòng)后出現(xiàn)的提示信息（轉(zhuǎn)菊花、文本等）元素是用絕對(duì)定位方式定位到該區(qū)域的頂端，且會(huì)被頁面其他元素（如固定定位的元素）遮住。
  • 調(diào)整父容器樣式：（原默認(rèn)樣式為絕對(duì)定位，不符合需求）設(shè)置父高100%，設(shè)置(子絕)父相。

MUI插件模板：下拉刷新、上拉加載

產(chǎn)品文檔寫的比較亂，沒有完整模板。
產(chǎn)品文檔鏈接：MUI文檔JS組件

代碼框架模板

模板經(jīng)整理如下。
其中，倒計(jì)時(shí)器是在本地模擬服務(wù)器響應(yīng)時(shí)長(zhǎng)，實(shí)際生產(chǎn)環(huán)境中基本不會(huì)用倒計(jì)時(shí)器。

    mui.init({
        pullRefresh: {　　
        container: ".mui-scroll-wrapper", //下拉刷新父容器容器標(biāo)識(shí)
        down: {     //down表示控制下拉刷新
           callback: function() {     //callback表示下拉刷新時(shí)的回調(diào)函數(shù) 可以發(fā)生ajax請(qǐng)求來刷新頁面
           setTimeout(function() {     //模擬請(qǐng)求時(shí)間 延遲1秒結(jié)束下拉刷新
           //當(dāng)數(shù)據(jù)請(qǐng)求完畢后結(jié)束下拉刷新
           mui('.mui-scroll-wrapper').pullRefresh().endPulldownToRefresh();
                    }, 1000)
                }
            },
         up: {     //up表示控制上拉加載更多
           contentrefresh: '正在加載...',
           contentnomore: '沒有更多數(shù)據(jù)了',
           callback: function() {     //上拉加載更多的回調(diào)函數(shù) 可以發(fā)送ajax請(qǐng)求來加載更多數(shù)據(jù)
                }
            }　　
        }
    });


pullRefresh可選參數(shù)
  1. 下拉刷新
  • style:'circle',必選，下拉刷新樣式，目前支持原生5+ ‘circle’樣式
  • color:'#2BD009', 可選，默認(rèn)“#2BD009” 下拉刷新控件顏色
  • height:'50px', 可選,默認(rèn)50px.下拉刷新控件的高度,
  • range:'100px', 可選 默認(rèn)100px,控件可下拉拖拽的范圍
  • offset:'0px', 可選 默認(rèn)0px,下拉刷新控件的起始位置
  • auto: true, 可選,默認(rèn)false.首次加載自動(dòng)上拉刷新一次
  • contentdown : "下拉可以刷新", 可選，在下拉可刷新狀態(tài)時(shí)，下拉刷新控件上顯示的標(biāo)題內(nèi)容
  • contentover : "釋放立即刷新", 可選，在釋放可刷新狀態(tài)時(shí)，下拉刷新控件上顯示的標(biāo)題內(nèi)容
  • contentrefresh : "正在刷新...", 可選，正在刷新狀態(tài)時(shí)，下拉刷新控件上顯示的標(biāo)題內(nèi)容
  1. 上拉加載更多
  • contentrefresh: '正在下拉加載的時(shí)候的提示文字',
  • contentnomore: '所有數(shù)據(jù)數(shù)據(jù)加載完畢后的提示文字'
    但是要顯示所有數(shù)據(jù)加載完畢必須結(jié)束【上拉加載更多】。
    要調(diào)用結(jié)束方法：
    mui('.mui-scroll-wrapper').pullRefresh().endPullupToRefresh(true);
  1. 結(jié)束下拉刷新的方法
    mui('.mui-scroll-wrapper').pullRefresh().endPulldownToRefresh();
  2. 結(jié)束上拉加載更多方法
    mui('.mui-scroll-wrapper').pullRefresh().endPullupToRefresh();
  3. 結(jié)束上拉加載更多方法 并且提示沒有更多數(shù)據(jù)了
    mui('.mui-scroll-wrapper').pullRefresh().endPullupToRefresh(true);
  4. 重置上拉加載更多方法
    mui('.mui-scroll-wrapper').pullRefresh().refresh(true);

場(chǎng)景與流程分析

用戶操作：搜索頁輸入關(guān)鍵詞點(diǎn)擊搜索

→ window：跳轉(zhuǎn)到新頁面productlist，JS：取到地址中的proNam (search關(guān)鍵詞)
→JS：通過aJax調(diào)用“搜索產(chǎn)品”接口，向后臺(tái)傳入proNam，拿到后臺(tái)數(shù)據(jù)→渲染頁面生成初始（新）的商品列表

用戶操作：下拉操作

→JS：下拉結(jié)束后，down的回調(diào)函數(shù)通過aJax調(diào)用“搜索產(chǎn)品”接口，向后臺(tái)再請(qǐng)求一次數(shù)據(jù)→用數(shù)據(jù)渲染頁面生成新的商品列表

用戶操作：上拉操作

→JS：下拉結(jié)束后，up的回調(diào)函數(shù)通過aJax調(diào)用“搜索產(chǎn)品”接口，向后臺(tái)請(qǐng)求其他數(shù)據(jù)→用數(shù)據(jù)渲染頁面生成新的商品列表

用戶操作：點(diǎn)擊不同排序按鈕

→JS：點(diǎn)擊事件中，通過aJax調(diào)用“搜索產(chǎn)品”接口，向后臺(tái)請(qǐng)求數(shù)據(jù)→用數(shù)據(jù)渲染頁面生成新的商品列表

綜上所述，商品的查找、篩選及排序都通過同一個(gè)后臺(tái)接口【搜素產(chǎn)品】完成，傳入的參數(shù)不同返回的結(jié)果不同。

搜素產(chǎn)品接口參數(shù)：
data: {
proNam：產(chǎn)品名稱（非必須）,
brandId：品牌id（非必須）,
price：使用價(jià)格排序（非必須）（1升序，2降序）,
num：產(chǎn)品庫存排序（非必須）（1升序，2降序）,
pag：第幾頁（!必須）,
pageSize：每頁的條數(shù)（!必須）
}

總結(jié)：
  • 在該頁面中，不同的行為都會(huì)調(diào)用同一個(gè)后臺(tái)接口，向這個(gè)后臺(tái)接口傳入同樣的對(duì)象（對(duì)象中的屬性不同），對(duì)拿到的數(shù)據(jù)做不同的處理。
  • 所以，將aJax請(qǐng)求封裝成各行為公共的方法，
    在上拉、下拉、排序等不同行為的函數(shù)中，向這個(gè)公共方法傳入兩個(gè)參數(shù)：ajax傳輸?shù)膁ata，拿到data后的頁面渲染行為（回調(diào)函數(shù)）。

JS中如何實(shí)現(xiàn)

依賴的框架與庫
  • 依賴框架：MUI
  • 依賴JS庫：Zepto
  • 頁面渲染依賴插件： art-template（非必須，本案例中需要用模板引擎調(diào)用生成頁面元素）
實(shí)現(xiàn)模式：
功能一：模塊初始化，調(diào)用mui.init方法

在原插件中，下拉和上拉是可以相互獨(dú)立的兩個(gè)功能，也可以寫到一起。
在初始化模板中設(shè)置MUI的pullRefresh各項(xiàng)參數(shù)。

功能二（公共方法）：通過aJax向后臺(tái)接口請(qǐng)求數(shù)據(jù)，執(zhí)行傳進(jìn)來的函數(shù)

這個(gè)功能既會(huì)被上拉調(diào)用，也會(huì)被下拉調(diào)用，因此獨(dú)立封裝在初始化模塊的外部，與需求二函數(shù)同級(jí)作用域。

  • 必傳值的判斷賦值：必傳項(xiàng)（pag, pageSize）如無傳入值則寫默認(rèn)值
    原因：product頁面加載時(shí)，這個(gè)方法即第一次被調(diào)用，沒有其他函數(shù)向它傳data值
  • aJax請(qǐng)求數(shù)據(jù)：success回調(diào)函數(shù)callback需要被傳入，使用短路運(yùn)算符

功能三：下拉后刷新頁面、上拉后加載更多商品，傳入mui.init方法作為回調(diào)函數(shù)調(diào)用

其中，下拉down與上拉up的參數(shù)中的回調(diào)函數(shù)用函數(shù)名調(diào)用，函數(shù)聲明在初始化模塊的外部（同級(jí)作用域，而不是內(nèi)部）。

  • 下拉down的回調(diào)函數(shù)：
    向公共方法傳入data；
    向公共方法傳入回調(diào)函數(shù)：
    -調(diào)用模板引擎渲染并替換頁面內(nèi)容；
    -結(jié)束下拉刷新（調(diào)用MUI方法）；
    -重置page，
    -重置上拉加載（調(diào)用MUI方法）。

  • 上拉up的回調(diào)函數(shù)：
    page++，
    向公共方法傳入data；
    向公共方法傳入回調(diào)函數(shù)：
    -判斷返回?cái)?shù)據(jù)是否為空（沒有更多數(shù)據(jù)了），如為空則結(jié)束上拉加載并提示沒有更多數(shù)據(jù)（調(diào)用MUI方法），如數(shù)據(jù)不為空則渲染內(nèi)容并向頁面append加載；
    -數(shù)據(jù)刷新完畢后結(jié)束上拉加載。
    -重置上拉加載。

功能四：商品排序

*注冊(cè)singleTap事件（不能用click）：
MUI提倡在模板中用tap而不是click，MUI的插件源碼中會(huì)阻止click的默認(rèn)事件

  • 獲取data的排序參數(shù)（順/逆序、排序類型等）。
  • 向公共方法傳入回調(diào)函數(shù)：渲染并替換頁面內(nèi)容。
  • 改變被點(diǎn)擊的排序按鈕樣式。

【待補(bǔ)充：代碼實(shí)現(xiàn)】

2018.1.31

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容