组件库文档 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-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
width | Number | 0 | 宽度,单位rpx,默认为0表示自动宽度 |
height | Number | 300 | 高度,单位rpx |
openPull | Boolean | true | 是否开启下拉刷新 |
openBootom | Boolean | false | 是否否开触底刷新 |
pullFun | Function | (type:'bottom':'top')=>{} | 触发的函数(下拉或者触底时触发) |
label | String | '已最近更新' | 提示文字 |
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
refresh | - | - | 松开时高度超过阈值则触发刷新 |
🌽 slot插槽
插槽名 | 数据 | 类型 | 描述 |
---|
🥗 ref方法
无