滚动区域

自定义下拉刷新，回到顶部，多列切换

平台差异

App	H5	微信小程序	支付宝小程序	头条小程序
√	√	√	√	√

Props

参数	说明	类型	可选值	默认值
top	距离顶部多少 px 触发	number		80
bottom	距离底部多少 px 触发	number		100
loading-text	正在刷新文案	string		正在刷新
pulling-text	下拉刷新文案	string		下拉刷新
release-text	释放刷新文案	string		释放刷新
scroll-top	滚动条距离顶部位置	number
scroll-into-view	滚动到对应元素 id	string
scroll-with-animation	在设置滚动条位置时使用动画过渡	boolean
enable-back-to-top	滚动条返回顶部	boolean
show-back-top-button	是否显示回到顶部按钮	boolean		true
show-scrollbar	控制是否出现滚动条	boolean
enable-flex	启用 flexbox 布局	boolean
refresher-enabled	是否开启下拉刷新	boolean		true

Methods

事件名称	说明	参数
end	结束（收起）下拉刷新	function()
scrollTo	滚动到	function(top)
backTop	回到顶部	function()

Slots

插槽	说明	参数
loading	下拉加载区域	{text, status, move}
default	内容区域

status：

• pulling 下拉中
• loading 加载中
• end 结束

示例

基本用法

<template>
	<view class="demo-scroller">
		<cl-scroller ref="scroller" @up="onUp" @down="onDown">
			<view class="item" v-for="(item, index) in list" :key="index">
				<cl-list-item :label="`${index + 1}`"></cl-list-item>
			</view>

			<cl-loadmore v-if="list.length > 0" :loading="loading"></cl-loadmore>
		</cl-scroller>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				loading: false
			};
		},

		created() {
			this.onDown();
		},

		methods: {
			onUp() {
				this.loading = true;

				setTimeout(() => {
					this.list.push(...new Array(20).fill(1));
					this.loading = false;
				}, 1000);
			},

			onDown() {
				setTimeout(() => {
					this.list = new Array(20).fill(1);
					this.$refs["scroller"].end();
				}, 1000);
			}
		}
	};
</script>

<style lang="scss">
	page,
	.demo-scroller {
		height: 100%;
		overflow: hidden;

		.item {
			margin: 20rpx;
		}
	}
</style>