更新记录
1.0.1(2023-07-07) 下载此版本
1.更新文档
1.0.0(2023-07-07) 下载此版本
1.列表滚动组件直关注获取数据 2.支持顶部banner上下滑折叠 3.支持h5,ios,android,微信小程序
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 app-vue | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | × | √ | √ | √ |
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(),执行结果=下拉重刷 |