更新记录

1.0.0（2019-12-12）

更新日志

平台兼容性

sib-list

基于uni-app实现列表list的上拉加载，下拉刷新，自定义列表内容
参考自: https://ext.dcloud.net.cn/plugin?id=443

插件预览图

如预览图无法显示请点击此处: 点我加载

使用教程

• 导入组件

import sibList from '@/components/sib-list/sib-list.vue'
    

• 声名组件

components: {
    sibList
}
    

• 使用组件

<!-- @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" 此三个方法必须写 -->
<view class="list" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
    <!-- ref="sibList" @isRefresh='isRefresh' @scrolltolowerFn="scrolltolowerFn" 此三个必须写 -->
    <sib-list ref="sibList" @isRefresh='isRefresh' @scrolltolowerFn="scrolltolowerFn">
        <!-- 内部block可自定义 -->
        <block class="" slot="sibScrollList">
            <view class="" v-for="(item, index) in list" :key="index">
                <view class="" style="height: 100px;">{{item}}
            </view>
        </block>
    </sib-list>
</view>
    

• 函数实现

// 刷新touch监听
touchstart: function(e) {
    this.$refs.sibList.refreshStart(e);
},
touchmove: function(e) {
    this.$refs.sibList.refreshMove(e);
},
touchend: function(e) {
    this.$refs.sibList.refreshEnd(e);
},
isRefresh: function() {
    const _this = this
    setTimeout(() => {
        uni.showToast({
            icon: 'success',
            title: '刷新成功,数据恢复初始值'
        })
        const defaultData = [
            '初始数据1', '初始数据2', '初始数据3', '初始数据4',
            '初始数据5', '初始数据6'
        ]
        _this.list = defaultData
        // 刷新结束调用
        this.$refs.sibList.endAfter()
    }, 1000)
},
scrolltolowerFn: function() {
    uni.showLoading({
        title: '加载中...',
        mask: true
    })
    // 模拟请求
    const _this = this
    setTimeout(() => {
        // 请求成功
        const newData = [
            '新数据1', '新数据2', '新数据3', '新数据4'
        ]
        _this.list = _this.list.concat(newData)
        console.log(_this.list)
        uni.hideLoading()
    }, 1000)
}
    

参数说明

函数事件说明

其他

如有bug请前往github更正, github地址: https://github.com/gameruleCEO/sib-list