更新记录
1.0.1(2021-12-28)
更新readme文件
1.0.0(2021-12-28)
初始发布版本
平台兼容性
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>