Scroll 滚动

滚动组件，用于提供滚动容器，支持配置滚动类型、是否有弹跳效果、滚动方向、是否自定义嵌套滚动、是否启用下拉刷新和上拉加载等功能。

示例

<template>
	<t-page title="Scroll" class="p.30">
		<t-card class="mb.30" title="Scroll 滚动组件"
			sub-title="自研滚动组件非scroll-view封装 自研惯性阻力算法-对齐web端,支持增量滚动,暂停滚动,增加关闭刷新接口,兼容PC端手势滚动"></t-card>
		<t-section title="基础使用" class="mb.30"></t-section>
		<t-col class="tdr-tdb-mb.30">
			<t-scroll class="h.300" direction="h">
				<t-row class="w.300-h.300-fc" v-for="i in 10" :key="i">
					<t-text>{{i}}</t-text>
				</t-row>
			</t-scroll>
		</t-col>
		<t-section title="下拉刷新-上拉加载 + 数据分页加载后增量滚动" class="mb.30"></t-section>
		<t-col class="tdr-tdb-mb.30">
			<t-scroll class="h.500" ref="tuiscroll">
				<t-row class="h.300-fc" v-for="i in loaderCount" :key="i">
					<t-text>{{i}}</t-text>
				</t-row>
			</t-scroll>
		</t-col>
		<t-section title="其它用法同scroll-view(后续完善)" class="mb.30"></t-section>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				loaderCount: 100
			};
		},
		methods: {
			refresherrefresh() {
				setTimeout(() => {
					this.closeRefresher()
				}, 1000)
			},
			loaderrefresh() {
				setTimeout(() => {
					this.loaderCount += 10
					this.$nextTick(() => {
						const ins = this.$refs['tuiscroll'] as TScrollComponentPublicInstance
						ins.closeLoader()
						ins.scrollingIncremental(300, 3000) //增量滚动向下滚动300px
					})
				}, 500)
			},
			closeRefresher() {
				const ins = this.$refs['tuiscroll'] as TScrollComponentPublicInstance
				ins.closeRefresher()
			}
		}
	}
</script>

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

Props

名称	描述	类型	默认值
type	滚动类型	String	'p'
bounces	是否有弹跳效果	Boolean	true
direction	滚动方向	String	'vertical'
customNestedScroll	是否自定义嵌套滚动	Boolean	false
refresher	是否启用下拉刷新	Boolean	false
refresherClass	下拉刷新区域的类名	String	''
loader	是否启用上拉加载	Boolean	false
loaderClass	上拉加载区域的类名	String	''
backgroundClass	背景区域的类名	String	''

Events

名称	描述	参数
refresherrefresh	当下拉刷新被触发时	-
loaderrefresh	当上拉加载被触发时	-
scrollend	当滚动结束时触发	-
scroll	当滚动时触发	-

Methods

名称	描述
rescan	重新开始扫描
scanImageByURI	通过URI扫描图片
maskCanvasInit	初始化遮罩Canvas
drawMask	绘制遮罩
drawScannerLine	绘制扫描线
init	初始化滚动组件
translateBoxEl	移动滚动容器
translateEl	移动滚动元素
touchstart	处理触摸开始事件
touchmove	处理触摸移动事件
touchend	处理触摸结束事件
getPos	获取触摸位置
animateScroll	执行滚动动画
closeRefresher	关闭下拉刷新
closeLoader	关闭上拉加载
setRefresherState	设置下拉刷新状态
setLoaderState	设置上拉加载状态
emitScrollend	触发滚动结束事件