好快, 1分鐘寫好下拉刷新,滾動加載自動分頁列表

前言

歡迎關注BUI Webapp專欄 或者 bui神速微信公衆號.

以往文章:

• 2019開發最快的Webapp框架--BUI交互框架
• 微信Webapp開發的各種變態路由需求及解決辦法!
• 【BUI實戰篇】BUI數據驅動做的拼圖遊戲 Webapp移動適配版，基於vuejs拼圖遊戲改造
• webapp結合Dcloud平臺打包圖文教程
• 一張腦圖看懂BUI Webapp移動快速開發框架【上】--框架與工具、資源

一、觀看實操視頻

點擊觀看視頻實錄

安裝完以下環境後, 從0到1, 手把手教, 你也可以做到!

二、開發準備

• 安裝buijs cli命令行工具(需要先安裝node環境, 建議使用node 8.x);

如何安裝使用buijs?

• 安裝bui-fast 快速編輯器插件(推薦vscode);

如何安裝使用bui-fast?

• 打開跨域的chrome瀏覽器;

如何打開跨域的Chrome瀏覽器?

三、開發過程

使用 buijs 構建工程

• 1.創建Webapp工程

buijs create demo

• 2.安裝依賴

cd demo/

npm install

windows 推薦使用淘寶的 cnpm install

• 3.運行預覽

npm run dev

使用bui-fast編輯器插件生成控件

視頻裏使用的是vscode 可以在安裝插件那裏找到 bui-fast.

xxx 假設爲控件名

生成規則1:

• 在html裏, 使用 ui-xxx 生成控件結構

ui-list

生成以下結構

<div id="uiList" class="bui-scroll">
    <div class="bui-scroll-head"></div>
    <div class="bui-scroll-main">
        <ul class="bui-list">
        </ul>
    </div>
    <div class="bui-scroll-foot"></div>
</div>

• 在js裏, 使用 bui-xxx 生成控件的初始化代碼

bui-list

生成以下初始化代碼

// 列表控件 js 初始化:
var uiList = bui.list({
    id: "#uiList",
    url: "http://rap2api.taobao.org/app/mock/84605/example/getNews",
    pageSize: 5,
    data: {},
    //如果分頁的字段名不一樣,通過field重新定義
    field: {
        page: "page",
        size: "pageSize",
        data: "data"
    },
    callback: function(e) {},
    template: function(data) {
        var html = "";
        data.forEach(function(el, index) {

            html += `<li class="bui-btn bui-box">
                <div class="bui-thumbnail"><img src="${el.image}" alt=""></div>
                <div class="span1">
                    <h3 class="item-title">${el.name}</h3>
                    <p class="item-text">${el.address}</p>
                    <p class="item-text">${el.distance}公里</p>
                </div>
                <span class="price"><i>￥</i>${el.price}</span>
            </li>`
        });

        return html;
    }
});

保存就會自動預覽

四、從bui.list看自動分頁設計原理

常用參數說明:

• id 用來跟結構綁定
• url 數據請求的地址
• data 數據請求需要
• height 列表的高度
• page 從第幾頁開始請求
• pageSize 要返回多少條數據
• field 字段映射
• template 根據返回的數據, 渲染自定義模板,支持es6模板
• callback 爲每一行添加一個點擊事件,比方點擊跳轉
• onRefresh 下拉刷新的時候觸發回調
• onLoad 上拉滾動到底部的時候觸發回調

1. 滾動自動分頁原理

滾動的第一要素就是高度, 當內容撐出容器的高度,纔會產生滾動條, 才能監聽id的滾動事件, 可以知道是否已經滾動到底部, 到底部則自動發起新一頁的請求.

2. 爲何有時候會請求多次?

這裏我們需要解決的第一個問題,就是高度, 所以我們可以傳height參數,默認是0, 爲0,則會自動計算列表的頁面剩餘高度.

有了高度以後, 我們要計算請求返回的數據能不能撐開容器, 如果不行, 則自動請求下一頁, 直到容器被撐開, 所以你會看到pageSize 設置的值較小的時候, 頁面會發起第2次請求, 就是這個原因.

3. 如何知道返回的數據在哪個字段?

我們來看一下這個接口返回的數據是什麼?

http://rap2api.taobao.org/app/mock/84605/example/getNews

這個是淘寶的mock模擬接口,隨機返回數據, 返回一個 {data:[],info:"",status:""} 結構的數據.

{
  data: [{
    uid: 6801,
    name: "和再團之較",
    image: "http://dummyimage.com/200x134/4A7BF7&text=Thumbnail",
    phone: "17612327699",
    location: "惠城區",
    price: "65",
    distance: "52",
    status: 1,
    date: "2003-06-28",
    url: "gopher://brcce.cq/svku",
    email: "[email protected]",
    time: "20:39:53",
    address: "海南省 三沙市 西沙羣島",
    detail: "式始衆組月他政例了部自革每往子。但本活又己交給音長爭標識我。八說前它特用達圓是路看江才。開次他爭從點軍容給油很出。成育料技所心並精北酸間辦元。除現七團一歷積動兩水礦花始線黨黨她。"
  }],
  info: "獲取成功",
  status: 0
}

那麼問題來了? 不管接口的規則是後端還是前端定的, 控件並不事先知道接口的規則, 如果把規則限定死了, 那很多先開發接口再來學習移動端開發的還會選擇bui框架嗎?

我們來看看有沒有漏了什麼參數?

• field 字段配置

這個就是用來做數據請求的字段映射, 比方, 我請求的接口地址是http://rap2api.taobao.org/app/mock/84605/example/getNews, 請求第幾頁是用的大寫 PAGES 請求每頁的大小 是用的 PAGESIZES; 那麼 field 的配置應該爲:

{
  page: 2,
  pageSize: 20,
  field: {
    page: "PAGES",
    size: "PAGESIZES"
  }
}

那麼接口就會請求爲 http://rap2api.taobao.org/app/mock/84605/example/getNews?PAGES=2&PAGESIZES=20; 這樣接口就能正常請求到對應的數據了, 那請求到以後的數據返回回來, 怎麼知道數據在什麼字段呢? 同樣也是在field的 data 參數裏面配置;

{
  page: 2,
  pageSize: 20,
  field: {
    page: "PAGES",
    size: "PAGESIZES",
    data: "data"
  }
}

如果返回的數據是嵌套多個層級呢? 比如返回

{
  result: {
      data: [{
        uid: 6801,
        name: "和再團之較",
        image: "http://dummyimage.com/200x134/4A7BF7&text=Thumbnail",
        phone: "17612327699",
        location: "惠城區",
        price: "65",
        distance: "52",
        status: 1,
        date: "2003-06-28",
        url: "gopher://brcce.cq/svku",
        email: "[email protected]",
        time: "20:39:53",
        address: "海南省 三沙市 西沙羣島",
        detail: "式始衆組月他政例了部自革每往子。但本活又己交給音長爭標識我。八說前它特用達圓是路看江才。開次他爭從點軍容給油很出。成育料技所心並精北酸間辦元。除現七團一歷積動兩水礦花始線黨黨她。"
    }],
  },
  info: "獲取成功",
  status: 0
}

那麼我們就要找到該數據返回的數組字段在哪裏? 你可以這樣配置.

{
  page: 2,
  pageSize: 20,
  field: {
    page: "PAGES",
    size: "PAGESIZES",
    data: "result.data"
  }
}

4. 如何知道已經到最後一頁了?

我們操作一下剛剛生成的控件, 會看到底部有沒有更多內容字樣, 那怎麼知道是否是最後一頁了呢? 通過返回的數組大小, 跟你請求的每頁大小做比對, 如果小余pageSize設置的值, 則認爲已經是最後一頁了.

實際上就是把 bui.ajax+bui.scroll+bui.pullrefresh幾個控件的通用需求整合在一塊, 這樣我們就可以解決數據接口+控件整合, 又能抽離業務的一個控件. 通過簡單配置,我們可以滿足很多開發需求.

五、注意事項

• 對於接口的請求必須返回數組才能操作, 非數組請使用 bui.scroll 控件;
• 如果高度自動計算不準確, 需要自行計算好告訴它;
• 如果是restful接口, 需要在接口設置允許這種問號傳參的形式;