Skip to content
On this page

组件库文档 tmui.design

纵向滚动 Scrolly 试验 v3.0.83+

横向滚动,应用于菜单图标,内容需要横向滚动的场景,注意:我已经兼容了所有平台,如果你需要使用原生的scroll-view横向滚动,需要自行兼容。


🌶️ 纵向滚动 Scrolly 示例效果

查看模拟效果
示例代码
vue
<template>
	<tm-app>
		<tm-sheet>
			<tm-text :font-size="32" label="纵向滚动,也可称之为下拉,触底刷新组件"></tm-text>
			<tm-divider></tm-divider>
			<tm-text label="不支持在pc端使用.请在移动端查看效果,在nvue端使用的是原生高性能下拉组件,非nvue端使用自定下拉组件."></tm-text>
			<tm-scrolly v-model="pull" @refresh="refresh">
				<tm-text label="触摸区域,体验下拉刷新操作."></tm-text>
				<view v-for="(item,index) in 50" :key="index" style="height: 40px;" class="px-36">
					<text>{{item}}</text>
				</view>
			</tm-scrolly>
		</tm-sheet>

	</tm-app>
</template>

<script lang="ts" setup>
	import tmApp from "../../tmui/components/tm-app/tm-app.vue";
	import tmScrolly from "../../tmui/components/tm-scrolly/tm-scrolly.vue";
	import tmText from "../../tmui/components/tm-text/tm-text.vue"
	import tmDivider from "../../tmui/components/tm-divider/tm-divider.vue"
	import tmSheet from "../../tmui/components/tm-sheet/tm-sheet.vue"
	import {onMounted, ref} from "vue"
	const pull = ref(false)
	const bottomFresh = ref(false)
	function refresh(){
		setTimeout(function() {
			pull.value = false;
		}, 1500);
	}
	function refreshBottom(){
		bottomFresh.value = true;
		uni.showLoading({title:'...',mask:true})
		setTimeout(function() {
			bottomFresh.value = false;
			uni.hideLoading()
		}, 1500);
	}

	
</script>

<style>

</style>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
widthNumber0宽度,单位rpx,默认为0表示自动宽度
heightNumber300高度,单位rpx
openPullBooleantrue是否开启下拉刷新
openBootomBooleanfalse是否否开触底刷新
pullFunFunction(type:'bottom':'top')=>{}触发的函数(下拉或者触底时触发)
labelString'已最近更新'提示文字

🌹 事件

事件名参数返回数据描述
refresh--松开时高度超过阈值则触发刷新

🌽 slot插槽

插槽名数据类型描述

🥗 ref方法

💏 文档贡献