Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
9786b0b4
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3188
Star
106
Fork
809
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
93
列表
看板
标记
里程碑
合并请求
69
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
93
Issue
93
列表
看板
标记
里程碑
合并请求
69
合并请求
69
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
9786b0b4
编写于
9月 28, 2023
作者:
shutao-dc
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update scroll-view.md
上级
72094e92
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
37 addition
and
37 deletion
+37
-37
docs/uni-app-x/component/scroll-view.md
docs/uni-app-x/component/scroll-view.md
+37
-37
未找到文件。
docs/uni-app-x/component/scroll-view.md
浏览文件 @
9786b0b4
## scroll-view
<!-- UTSCOMJSON.scroll-view.description -->
<!-- UTSCOMJSON.scroll-view.attrubute -->
<!-- UTSCOMJSON.scroll-view.event -->
<!-- UTSCOMJSON.scroll-view.example -->
### 自定义下拉刷新样式
1.
设置
`refresher-default-style`
属性为 none 不使用默认样式
2.
自定义下拉刷新元素必须要声明为 slot="refresher"
3.
通过组件提供的refresherpulling、refresherrefresh、refresherrestore、refresherabort下拉刷新事件调整自定义下拉刷新元素!实现预期效果
## scroll-view
<!-- UTSCOMJSON.scroll-view.description -->
<!-- UTSCOMJSON.scroll-view.attrubute -->
<!-- UTSCOMJSON.scroll-view.event -->
<!-- UTSCOMJSON.scroll-view.example -->
### 自定义下拉刷新样式
1.
设置
`refresher-default-style`
属性为 none 不使用默认样式
2.
自定义下拉刷新元素必须要声明为 slot="refresher"
,需要设置刷新元素宽高信息否则可能无法正常显示!
3.
通过组件提供的refresherpulling、refresherrefresh、refresherrestore、refresherabort下拉刷新事件调整自定义下拉刷新元素!实现预期效果
**注意:**
目前自定义下拉刷新元素不支持放在scroll-view的首个子元素位置上。可能无法正常显示
```
vue
<scroll-view
refresher-default-style=
"none"
:refresher-enabled=
"true"
:refresher-triggered=
"refresherTriggered"
@
refresherpulling=
"onRefresherpulling"
@
refresherrefresh=
"onRefresherrefresh"
@
refresherrestore=
"onRefresherrestore"
style=
"flex:1"
>
<view
v-for=
"i in 20"
class=
"content-item"
>
<text
class=
"text"
>
item-{{i}}
</text>
</view>
<!-- 自定义下拉刷新元素 -->
<view
slot=
"refresher"
class=
"refresh-box"
>
<text
class=
"tip-text"
>
{{text[state]}}
</text>
</view>
</scroll-view>
```
<scroll-view
refresher-default-style=
"none"
:refresher-enabled=
"true"
:refresher-triggered=
"refresherTriggered"
@
refresherpulling=
"onRefresherpulling"
@
refresherrefresh=
"onRefresherrefresh"
@
refresherrestore=
"onRefresherrestore"
style=
"flex:1"
>
<view
v-for=
"i in 20"
class=
"content-item"
>
<text
class=
"text"
>
item-{{i}}
</text>
</view>
<!-- 自定义下拉刷新元素 -->
<view
slot=
"refresher"
class=
"refresh-box"
>
<text
class=
"tip-text"
>
{{text[state]}}
</text>
</view>
</scroll-view>
```
**具体代码请参考:**
[
自定义下拉刷新样式示例
](
https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/scroll-view/scroll-view-custom-refresher-props.uvue
)
### nested-scroll嵌套滚动协商
...
...
@@ -72,10 +72,10 @@
+
仅Android平台支持嵌套滚动协商
**具体代码请参考:**
[
nested-scroll嵌套滚动示例
](
https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/template/long-list/long-list.uvue
)
<!-- UTSCOMJSON.scroll-view.compatibility -->
<!-- UTSCOMJSON.scroll-view.compatibility -->
<!-- UTSCOMJSON.scroll-view.children -->
<!-- UTSCOMJSON.scroll-view.reference -->
<!-- UTSCOMJSON.scroll-view.reference -->
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录