提交 233a94ad 编写于 作者: D DCloud_LXH

feat: uni-app x list-view 组件新增 sticky-section

上级 5e93eeeb
...@@ -14,35 +14,35 @@ list-view支持通过子组件sticky-header处理吸顶的场景。 ...@@ -14,35 +14,35 @@ list-view支持通过子组件sticky-header处理吸顶的场景。
<!-- UTSCOMJSON.list-view.event --> <!-- UTSCOMJSON.list-view.event -->
<!-- UTSCOMJSON.list-view.example --> <!-- UTSCOMJSON.list-view.example -->
### 自定义下拉刷新样式 ### 自定义下拉刷新样式
list-view组件有默认的下拉刷新样式,如果想自定义,则需使用自定义下拉刷新。 list-view组件有默认的下拉刷新样式,如果想自定义,则需使用自定义下拉刷新。
1. 设置`refresher-default-style`属性为 none 不使用默认样式 1. 设置`refresher-default-style`属性为 none 不使用默认样式
2. 设置 list-item 定义自定义下拉刷新元素并声明为 `slot="refresher"`,需要设置刷新元素宽高信息否则可能无法正常显示! 2. 设置 list-item 定义自定义下拉刷新元素并声明为 `slot="refresher"`,需要设置刷新元素宽高信息否则可能无法正常显示!
```html ```html
<template> <template>
<list-view refresher-default-style="none" :refresher-enabled="true" :refresher-triggered="refresherTriggered" <list-view refresher-default-style="none" :refresher-enabled="true" :refresher-triggered="refresherTriggered"
@refresherpulling="onRefresherpulling" @refresherrefresh="onRefresherrefresh" @refresherpulling="onRefresherpulling" @refresherrefresh="onRefresherrefresh"
@refresherrestore="onRefresherrestore" style="flex:1" > @refresherrestore="onRefresherrestore" style="flex:1" >
<list-item v-for="i in 10" class="content-item"> <list-item v-for="i in 10" class="content-item">
<text class="text">item-{{i}}</text> <text class="text">item-{{i}}</text>
</list-item> </list-item>
<!-- 自定义下拉刷新元素 --> <!-- 自定义下拉刷新元素 -->
<list-item slot="refresher" class="refresh-box"> <list-item slot="refresher" class="refresh-box">
<text class="tip-text">{{text[state]}}</text> <text class="tip-text">{{text[state]}}</text>
</list-item> </list-item>
</list-view> </list-view>
</template> </template>
``` ```
3. 通过组件提供的refresherpulling、refresherrefresh、refresherrestore、refresherabort下拉刷新事件调整自定义下拉刷新元素!实现预期效果 3. 通过组件提供的refresherpulling、refresherrefresh、refresherrestore、refresherabort下拉刷新事件调整自定义下拉刷新元素!实现预期效果
**注意:** **注意:**
+ 3.93版本开始支持 + 3.93版本开始支持
+ 目前自定义下拉刷新元素不支持放在list-view的首个子元素位置上。可能无法正常显示 + 目前自定义下拉刷新元素不支持放在list-view的首个子元素位置上。可能无法正常显示
...@@ -99,7 +99,7 @@ list-view组件有默认的下拉刷新样式,如果想自定义,则需使 ...@@ -99,7 +99,7 @@ list-view组件有默认的下拉刷新样式,如果想自定义,则需使
- 联网联表:[https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/template/list-news/list-news.uvue](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/template/list-news/list-news.uvue) - 联网联表:[https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/template/list-news/list-news.uvue](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/template/list-news/list-news.uvue)
- 可左右滑动的多个列表:[https://gitcode.net/dcloud/hello-uni-app-x/-/tree/master/pages/template/long-list](https://gitcode.net/dcloud/hello-uni-app-x/-/tree/master/pages/template/long-list) - 可左右滑动的多个列表:[https://gitcode.net/dcloud/hello-uni-app-x/-/tree/master/pages/template/long-list](https://gitcode.net/dcloud/hello-uni-app-x/-/tree/master/pages/template/long-list)
## sticky-header ## sticky-header
<!-- UTSCOMJSON.sticky-header.description --> <!-- UTSCOMJSON.sticky-header.description -->
...@@ -115,7 +115,22 @@ list-view组件有默认的下拉刷新样式,如果想自定义,则需使 ...@@ -115,7 +115,22 @@ list-view组件有默认的下拉刷新样式,如果想自定义,则需使
<!-- UTSCOMJSON.sticky-header.children --> <!-- UTSCOMJSON.sticky-header.children -->
<!-- UTSCOMJSON.sticky-header.reference --> <!-- UTSCOMJSON.sticky-header.reference -->
## sticky-section
<!-- UTSCOMJSON.sticky-section.description -->
<!-- UTSCOMJSON.sticky-section.attrubute -->
<!-- UTSCOMJSON.sticky-section.event -->
<!-- UTSCOMJSON.sticky-section.example -->
<!-- UTSCOMJSON.sticky-section.compatibility -->
<!-- UTSCOMJSON.sticky-section.children -->
<!-- UTSCOMJSON.sticky-section.reference -->
### Bug & Tips@tips ### Bug & Tips@tips
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册