更新记录
1.0.1(2023-07-07) 下载此版本
1.更新文档
1.0.0(2023-07-07) 下载此版本
1.列表滚动组件直关注获取数据 2.支持顶部banner上下滑折叠 3.支持h5,ios,android,微信小程序
平台兼容性
unipp-app组件,使用原生scroll-view组件和uni-load-more组件。以实现只需要关注获取列表数据和布局的组件,方便快速开发。
支持h5,小程序,安卓,ios
支持顶部banner上下滑折叠
ti-view-scroll
使用组件
<ti-view-scroll ref="listScroll"
:getData="getList"
>
<template v-slot:container="{list}">
<div class="list-box">
<view class="list-item" v-for="(item,index) in list">
{{item}}{{index}}
</view>
</div>
</template>
</ti-view-scroll>
组件属性
| 属性名 | 值 | 作用 |
|---|---|---|
| getData | Function,默认值:null | 获取列表数据,函数必须返回数组[] |
| autoUpdate | Boolean,默认值:false | 进入页面是否自动请求 |
| enableRefresh | Boolean,默认值:false | 是否可以下拉刷新 |
| refresherBackground | String,默认值:#ffffff | 下拉刷新背景色 |
| refresherDefaultStyle | String,默认值:black | 下拉刷新默认样式 |
| scrollWithAnimation | Boolean,默认值:false | 滚动条位置时使用动画过渡 |
| upperThreshold | Number,默认值:50 | 上拉拉刷新阈值,触发 scrolltoupper 事件 |
| lowerThreshold | Number,默认值:200 | 下拉刷新阈值,触发 scrolltolower 事件 |
| scrollClass | String,默认值:”“ | 滚动框样式名 |
| emptyType | String,默认值:”1“ | 数据为空类型,1是默认图片,2空/自定义插槽 |
| @scrollUp | Number,返回滚动scrollTop值 | 监听上滑(手机h5,移动端) |
| @scrollDown | Number,返回滚动scrollTop值 | 监听下拉(手机h5,移动端) |
| @onScroll | Number,返回滚动scrollTop值 | 原生监听滚动 |
| @scrollToUpper | e | 原生监听滚动到顶部事件 |
| @scrollToLower | e | 原生监听滚动到底部事件 |
组件方法
| 方法名 | 参数 | 作用 |
|---|---|---|
| run | page,默认值:1 | this.\$refs.组件.run(),执行结果=下拉重刷 |

收藏人数:
下载插件并导入HBuilderX
下载示例项目ZIP
赞赏(0)
下载 47
赞赏 0
下载 10799834
赞赏 1798
赞赏
京公网安备:11010802035340号