前言

list-pull-loading是一個(gè)基于VUE實(shí)現(xiàn)的下拉刷新，上拉加載的組件，支持圖片懶加載，數(shù)據(jù)緩存（返回列表頁(yè)記住當(dāng)前位置）。主使用IScroll（iscroll-probe）來(lái)實(shí)現(xiàn)，提供了項(xiàng)目中數(shù)據(jù)列表經(jīng)常會(huì)用到的下拉提示信息、上拉提示信息、圖片懶加載、回到頂部，其提示信息UI、內(nèi)容可靈活配置，可使用提供的默認(rèn)樣式也可以自定義也可以隱藏。

列表初始化時(shí)也做了優(yōu)化，對(duì)于沒(méi)有列表數(shù)據(jù)時(shí)顯示沒(méi)有數(shù)據(jù)的提示信息（可自定義），對(duì)于首次加載的數(shù)據(jù)沒(méi)有超過(guò)一屏?xí)r會(huì)自動(dòng)加載下一頁(yè)的數(shù)據(jù)，但最多只會(huì)自動(dòng)加載2次（可配置）。

示例

demo使用了vue2+vuex3+vue-router3，對(duì)于圖片懶加載使用的是vue-lazyload第三方插件。

示例一

image

說(shuō)明：普通示例

示例二

image

說(shuō)明：多個(gè)tap分類數(shù)據(jù)列表

示例三

image

說(shuō)明：數(shù)據(jù)列表中有圖片而且圖片還使用了懶加載的方式。

示例四

image

說(shuō)明：數(shù)據(jù)列表中的鏈接跳轉(zhuǎn)到其它頁(yè)面，再返回時(shí)自動(dòng)加載到上一次看到的狀態(tài)位置。

運(yùn)行項(xiàng)目

clone項(xiàng)目到本地，進(jìn)入項(xiàng)目文件夾，安裝依賴

git clone https://github.com/yujinjin/list-pull-loading.git
cd list-pull-loading
npm install

運(yùn)行demo，會(huì)自動(dòng)打開瀏覽器地址運(yùn)行

npm run demo

編譯打包項(xiàng)目

npm run compile

NPM

npm install list-pull-loading

依賴

• VUE
• IScroll(iscroll-probe)

CDN

https://apps.bdimg.com/libs/list-pull-loading/1.0.0/list-pull-loading.js

https://apps.bdimg.com/libs/list-pull-loading/1.0.0/list-pull-loading.css

<script src="https://apps.bdimg.com/libs/list-pull-loading/1.0.0/list-pull-loading.js"></script>
<link  rel="stylesheet">
<script>
  Vue.use(ListPullLoading)
  ...
</script>

使用

作為插件

import Vue from 'vue'
import ListPullLoading from 'list-pull-loading'
import 'list-pull-loading/dist/list-pull-loading.css'

// VUE use
Vue.use(ListPullLoading);
// or with options
Vue.use(ListPullLoading, {
    isLoading: false, // API是否正在加載
    hasData: true, // 當(dāng)前列表是否有數(shù)據(jù)
    downElHeight: 0, // 下拉元素的高度
    upElHeight: 0, // 上拉提示元素的高度
    scrollerMinHeight: 0, //當(dāng)前容器最小高度
    directionY: 0, // -1:up 上, 1: down下
    startPullTime: 0, // 開始下拉的時(shí)間
    endPullTime: 0, // 結(jié)束下拉的時(shí)間
    lastQueryTime: 0, // 最后一次查詢的時(shí)間
    isCanToTop: false, // 根據(jù)當(dāng)前滾動(dòng)位置判斷是否能調(diào)到頂部
    isShowToTop: true, // 是否顯示去頂部圖標(biāo)
    initMaxTimes: 3, // 初始化數(shù)據(jù)不夠一屏最大查詢次數(shù)
    noDataText: "沒(méi)有找到相關(guān)的內(nèi)容哦~", // 沒(méi)有列表數(shù)據(jù)時(shí)的內(nèi)容展示
    myScroll: null, // 當(dāng)前iScroll實(shí)例
    api: null, // 當(dāng)前數(shù)據(jù)列表API查詢接口
    auto: true, // 是否自動(dòng)查詢
    // 圖片自適應(yīng)，默認(rèn)為false。最好不要設(shè)置為true，因?yàn)楸容^消耗資源。
    // 原因是：true的情況下是應(yīng)用于列表數(shù)據(jù)里有懶加載的圖片但沒(méi)有指定圖片大小導(dǎo)致iScroll計(jì)算高度不準(zhǔn)確需要的等圖片加載完之后再重新計(jì)算高度。
    // 目前都是通過(guò)監(jiān)控圖片的onload事件來(lái)刷新的這樣真的不爽但也沒(méi)找到其他好的解決方案，所以最好是列表中有圖片加載時(shí)就預(yù)先把高度寫死
    imgResize: false, 
    iScrollOptions: {
        probeType: 3, //必須指定為3，否則拖動(dòng)太快就監(jiān)控不到
        mouseWheel: false,
        disableMouse: true,
        scrollbars: false,
        preventDefault: true
        startY: 0
    }, //IScroll選項(xiàng)
    down: {
        offset: 50, //列表下拉滾動(dòng)大于50px,即可觸發(fā)下拉刷新的回調(diào)
        initText: "下拉刷新", //初始化文案，這個(gè)是在當(dāng)前下來(lái)滾動(dòng)未超過(guò)指定的值時(shí)顯示文案
        notReleaseText: "松開刷新", // 釋放滾動(dòng)加載時(shí)當(dāng)前下拉高度還未回彈時(shí)的文案
        loadingText: "正在加載更多", // 正在加載時(shí)的文案
        state: 0, //當(dāng)前加載時(shí)的狀態(tài)。0:初始化狀態(tài) 1：未釋放滾動(dòng)加載時(shí) 2：正在加載時(shí)
        isShowLastTimeText: true // 是否顯示最后更新時(shí)間提示 
    }, // 下拉刷新
    up: {
        offset: 50, //列表上拉滾動(dòng)大于50px,即可觸發(fā)上拉加載的回調(diào)
        initText: "上拉加載更多", //初始化文案，當(dāng)前上拉高度未超過(guò)指定的高度時(shí)
        notReleaseText: "松開加載更多", // 未釋放滾動(dòng)加載時(shí)的文案，當(dāng)前上拉高度超過(guò)指定的高度時(shí)且還未釋放滾動(dòng)
        loadingText: "正在加載更多", // 正在加載時(shí)的文案
        noMoreText: "沒(méi)有更多數(shù)據(jù)了...", // 沒(méi)有數(shù)據(jù)時(shí)的文案
        state: 0, //當(dāng)前加載時(shí)的狀態(tài)。0:初始化狀態(tài) 1：未釋放滾動(dòng)加載時(shí) 2：正在加載時(shí) 3: 沒(méi)有更多數(shù)據(jù)了
    }, // 上拉加載
    parameters: {
        maxResultCount: 20, //每次分頁(yè)數(shù)據(jù)加載多少條
        skipCount: 0 //每次數(shù)據(jù)偏移
    } // 數(shù)據(jù)查詢參數(shù)
});

作為組件

import Vue from 'vue'
import {listPullLoading} from 'list-pull-loading'
import "list-pull-loading/dist/list-pull-loading.css"

new Vue({
    // ...
    components: {
        "list-pull-loading": listPullLoading
    }
})

view層舉例

<list-pull-loading :options="options" ref="listPullLoading">
    <template slot="list">
        <ul>
            <li v-for="(dataItem,dataIndex) in dataList" :key="dataItem.id">
                <a>
                    ...
                </a>
            </li>
        </ul>
    </template>
</list-pull-loading>

注意

1. 由于組件使用了IScrol（iscroll-probe）來(lái)實(shí)現(xiàn)如果項(xiàng)目中是通過(guò)webpack來(lái)引入IScrol包一定要在webpack.config里配置IScrol的alias，具體如下：

...
    resolve: {
        alias: {
            iscroll: 'iscroll/build/iscroll-probe'
        }
    }
...

2. 部分老androd機(jī)可能會(huì)有卡頓現(xiàn)象，建議加入以下css屬性樣式來(lái)提升硬件加速

* {
    -webkit-overflow-scrolling: touch;
}

3. 發(fā)現(xiàn)在chrome瀏覽器中模擬webapp運(yùn)行時(shí)鼠標(biāo)滑動(dòng)很不流暢，原因是新谷歌瀏覽滾動(dòng)條的阻止默認(rèn)事件會(huì)失效,所以得所有滾動(dòng)區(qū)域都要加上touch-action:none 來(lái)解決。

{
    ...
    touch-action: none;
    ...
}

4. 由于list-pull-loading組件的滾動(dòng)不是body上滾動(dòng)而是在內(nèi)部盒子里滾動(dòng)，所以在定義內(nèi)部的盒子高度，特別是頁(yè)面內(nèi)局部滾動(dòng)。

image

配置選項(xiàng)

API

1. refresh

刷新數(shù)據(jù)列表，有時(shí)根據(jù)實(shí)際的業(yè)務(wù)需要，需手動(dòng)刷新列表數(shù)據(jù)。

this.$refs['listPullLoading'].refresh();//listPullLoading是組件注冊(cè)引用名稱

2. initIScrollCacheData

初始化列表的緩存數(shù)據(jù)，主要用于列表數(shù)據(jù)的緩存

this.$refs['listPullLoading'].initIScrollCacheData(y=0, upState=0);//y 當(dāng)前滾動(dòng)條的y軸位置，upState 當(dāng)前下拉列表的狀態(tài)

3. destroy

組件銷毀

this.$refs['listPullLoading'].destroy();//listPullLoading是組件注冊(cè)引用名稱

最后

• 如果喜歡一定要 star哈!!!（謝謝!!）

• 如果有意見(jiàn)和問(wèn)題 請(qǐng)?jiān)?lssues提出，我會(huì)在線解答。