更新记录

1.0.1(2021-12-28)

更新readme文件

1.0.0(2021-12-28)

初始发布版本


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × ×

滚动组件

x-KUI -> KUI-ListView

说明

组件使用控制器作为核心,控制整个控制器(数据加载等)。
由Flutter得出想法。
目前项目 Uni版本。

存在问题请留言

uni_modules 组件 可以直接使用

<KUI-ListView></KUI-ListView>

首页文件

index.vue

<template>
    <view class="content">
        <!-- 直接使用组件 -->
        <KUI-ListView ref="ListView">
            <!-- 组件吸顶方式,主要: style的sticky,需要浏览器或者手机支持。 -->
            <view class="view" style="position: sticky;top: 0;">
                <text>header</text>
            </view>
            <!-- 组件内容 -->
            <view class="view" v-for="item in list" :key="item">
                <text>{{ item }}</text>
            </view>
        </KUI-ListView>
    </view>
</template>

<script>
// 导入控制器文件
import {
    ScrollController,
    PageController
} from '@/uni_modules/x-KUI/tools/ScrollContoller.js';
/**
 * 生成列表
 * @param {Number} length 长度 int
 * @param {Function(int index)} fun 返回值作为数组的元素 
 */
const ListGenerate = function (length, fun) {
    var c = -1;
    var arr = [];
    while (++c < length) {
        arr.push(fun(c));
    }
    return arr;
};
export default {
    data() {
        return {
            // 滚动控制器
            controller: null,
            // 滚动控制器加载的列表,直接在页面展示
            list: [],
        }
    },
    onReady() {
        // 初始化 滚动控制器
        var controller = new ScrollController();
        // 初始化 页面控制器(存在默认页面控制器)
        controller.pageController = new PageController();
        // 初始化 页面控制器的每页最大数量
        controller.pageController.pageSize = 20;
        // 初始化 滚动控制器的请求。 要求 必须是异步函数,
        // 此函数的参数pageController是页码控制器
        // 在函数内,请求成功后需要将最大页码赋值给pageController,使其pageController加载下一页条件生效
        // 返回的Array是请求的结果
        controller.promise = async (pageController) => {
            pageController.setTotalPage(5);
            console.log(pageController);
            var c = -1,
                arr = [];
            while (++c < pageController.pageSize) {
                arr.push(pageController.pageNum + "-" + c);
            }
            await this.get(pageController.pageNum);
            return arr;
        }

        // 开启自动加载
        controller.autoLoad = false;
        // 开启下拉刷新
        controller.refresherEnabled = true;
        // 是否开启上拉加载
        controller.loadMoreEnabled = true;

        // 数据监听器 获取请求后的数据的必要函数
        controller.addListener = (list) => {
            this.list = list;
        }
        // 本地保存一份
        this.controller = controller;
        // 初始化 KUI-ListView 组件的滚动控制器
        this.$refs.ListView.initController(this.controller);
    },
    methods: {
        // 模拟请求的延迟 以及请求错误
        get(num) {
            return new Promise((success, fail) => {
                setTimeout(res => {
                    if (num > 3) {
                        return fail();
                    }
                    success();
                }, 1000);
            });
        },
    }
}
</script>

<style scoped lang="scss">
.content,
page {
    position: absolute;
    width: 100%;
    height: 100%;
    .view {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100rpx;
        border-bottom: 1rpx solid #eeeeee;
        font-size: 26rpx;
        font-family: serif;
    }
}
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问