Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
05b5b6dc
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3598
Star
108
Fork
921
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
120
列表
看板
标记
里程碑
合并请求
109
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
120
Issue
120
列表
看板
标记
里程碑
合并请求
109
合并请求
109
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
05b5b6dc
编写于
8月 23, 2023
作者:
W
wanganxp
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
更新scroll-view文档
上级
8b8df4e6
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
43 addition
and
29 deletion
+43
-29
docs/api/ui/scroll.md
docs/api/ui/scroll.md
+20
-17
docs/component/scroll-view.md
docs/component/scroll-view.md
+21
-10
docs/tutorial/err-spec.md
docs/tutorial/err-spec.md
+2
-2
未找到文件。
docs/api/ui/scroll.md
浏览文件 @
05b5b6dc
#
##
uni.pageScrollTo(OBJECT)
# uni.pageScrollTo(OBJECT)
将页面滚动到目标位置。
将页面滚动到目标位置。
可以指定滚动到具体的scrollTop数值,也可以指定滚动到某个元素的位置
**平台差异说明**
## 平台差异说明
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|华为快应用|360小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(nvue不支持)|√|√|√|√|√|√|√|√|
## OBJECT参数说明
**OBJECT参数说明**
|参数名 |类型 |必填 |说明 |
|:- |:- |:- |:- |
|scrollTop|Number |否 |滚动到页面的目标位置(单位px) |
|selector |String |否 |选择器,App、H5、微信小程序2.7.3+ 、支付宝小程序1.20.0+支持 |
|duration |Number |否 |滚动动画的时长,默认300ms,单位 ms |
|success |function |否 |接口调用成功的回调函数 |
|fail |function |否 |接口调用失败的回调函数 |
|complete |function |否 |接口调用结束的回调函数(调用成功、失败都会执行) |
|参数名 |类型 |必填 |说明 |
|:- |:- |:- |:- |
|scrollTop |Number |否 |滚动到页面的目标位置(单位px) |
|selector |String |否 |元素选择器,用于指定要滚动到的元素位置,App、H5、微信小程序2.7.3+ 、支付宝小程序1.20.0+支持|
|duration |Number |否 |滚动动画的时长,默认300ms,单位 ms |
|success |function |否 |接口调用成功的回调函数 |
|fail |function |否 |接口调用失败的回调函数 |
|complete |function |否 |接口调用结束的回调函数(调用成功、失败都会执行) |
**selector 语法**
selector类似于 CSS 的选择器,但仅支持下列语法。
-
ID选择器:#the-id
...
...
@@ -35,6 +31,13 @@ selector类似于 CSS 的选择器,但仅支持下列语法。
-
跨自定义组件的后代选择器:
`.the-ancestor >>> .the-descendant`
-
多选择器的并集:
`#a-node, .some-other-nodes`
## uni-app x 注意事项
1.
app-uvue支持的选择器较少,不支持ID选择器,
[
详见
](
../../uni-app-x/css/readme.md#选择器
)
2.
app-uvue的页面滚动,是由页面最外层的scroll-view模拟的,如果页面最外层不是scroll-view,无法使用本api。
[
详见
](
../../uni-app-x/css/readme.md#pagescroll
)
3.
app-uvue的scroll-view滚动时,如需动画,则需要在scroll-view的属性中配置
`scroll-with-animation="true"`
,
[
详见
](
../../component/scroll-view.md
)
4.
scroll-view的滚动,另见API
**示例**
```
javascript
...
...
docs/component/scroll-view.md
浏览文件 @
05b5b6dc
#
##
scroll-view
# scroll-view
可滚动视图区域。用于区域滚动。
需注意在webview渲染的页面中,区域滚动的性能不及页面滚动。
**属性说明**
## 属性说明
|属性名 |类型 |默认值 |说明 |平台差异说明 |
|:- |:- |:- |:- |:- |
...
...
@@ -35,7 +35,9 @@
使用竖向滚动时,需要给
``<scroll-view>``
一个固定高度,通过 css 设置 height;使用横向滚动时,需要给
``<scroll-view>``
添加
``white-space: nowrap;``
样式。
**示例**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/scroll-view/scroll-view
)
## 示例
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/scroll-view/scroll-view
)
以下示例代码,来自于
[
hello uni-app项目
](
https://github.com/dcloudio/hello-uniapp
)
,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
...
...
@@ -147,7 +149,7 @@
### 自定义下拉刷新
注意自定义下拉刷新的性能不及pages.json中配置的原生下拉刷新。
注意
,在webview渲染时,
自定义下拉刷新的性能不及pages.json中配置的原生下拉刷新。
::: preview
> Template
...
...
@@ -202,12 +204,21 @@
```
:::
**Tips**
## webview中使用scroll-view的注意@webviewtips
-
原生组件嵌套问题
*
APP-vue,scroll-view 中避免使用 map、video 等原生组件。
*
微信基础库2.4.4起支持了原生组件在 scroll-view、swiper、movable-view 中的使用。但并非所有小程序都支持,需具体查询各家小程序webview是否实现了同层渲染。
-
长列表性能问题
*
scroll-view 不适合放长列表,有性能问题。webview渲染时,建议改用webview的页面滚动;app-nvue需使用list组件;app-uvue需使用list-view组件。
*
如果您一定要在webview中实现区域长列表,建议使用三方如better-scroll组件,或者插件市场搜索
[
虚拟列表
](
https://ext.dcloud.net.cn/search?q=%E8%99%9A%E6%8B%9F%E5%88%97%E8%A1%A8
)
,这些专业组件实现了dom复用,即便列表很长也不会创建很多dom。
-
下拉刷新问题
*
webview渲染时,建议使用页面级的原生下拉刷新,性能更好。如一定要在webview中自定义下拉刷新,建议插件市场搜索
[
虚拟列表
](
https://ext.dcloud.net.cn/search?q=%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0
)
,这些专业组件使用wxs、renderjs等技术避免通信阻塞。
-
scroll-view是区域滚动,不会触发页面滚动,无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。但在app-uvue下,scroll-view如果是页面顶级节点,则等同于页面滚动。
[
详见
](
../uni-app-x/css/readme.md#pagescroll
)
-
webview渲染时,scroll-view的滚动条设置,可通过css的-webkit-scrollbar自定义,包括隐藏滚动条。
在app-uvue中,其实没有页面级滚动,scroll-view也不存在原生组件层级、下拉刷新性能问题。但app-uvue里使用长列表,请务必使用list-view组件,这个组件内置了recycle-view机制,不管列表多长,都可以通过回收不显示的列表来保证高性能。
[
详见
](
list-view.md
)
-
APP-vue和小程序中,请勿在 scroll-view 中使用 map、video 等原生组件。小程序中 scroll-view 中也不要使用 canvas、textarea 原生组件。更新:微信基础库2.4.4起支持了原生组件在 scroll-view、swiper、movable-view 中的使用。app-nvue无此限制。
-
scroll-view 不适合放长列表,有性能问题。长列表滚动和下拉刷新,应该使用原生导航栏搭配页面级的滚动和下拉刷新实现。包括在app-nvue页面,长列表应该使用list而不是scroll-view。
## 其他注意事项
-
scroll-into-view 的优先级高于 scroll-top。
-
scroll-view是区域滚动,不会触发页面滚动,无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。
-
若要使用下拉刷新,建议使用页面的滚动,而不是 scroll-view 。插件市场有前端模拟的基于scroll-view的下拉刷新,但性能不佳。如必需使用前端下拉刷新,推荐使用基于wxs的下拉刷新,性能会比基于js监听方式更高。
-
如果遇到scroll-top、scroll-left、refresher-triggered属性设置不生效的问题参考:
[
组件属性设置不生效解决办法
](
/tutorial/vue-api?id=componentsolutions
)
-
scroll-view的滚动条设置,可通过css的-webkit-scrollbar自定义,包括隐藏滚动条。(app-nvue无此css)
docs/tutorial/err-spec.md
浏览文件 @
05b5b6dc
...
...
@@ -142,7 +142,7 @@ new UniError(errSubject:string, errCode:number, errMsg:string)
统一错误描述信息,字符串类型,应准确描述引起的错误原因
**示例**
```
```
ts
//创建一个UniError
let
error
=
new
UniError
(
"
uni-apidName
"
,
60000
,
"
Custom uni error
"
);
//设置data数据(可选)
...
...
@@ -165,7 +165,7 @@ new SourceError(message:string)
源错误描述信息,字符串类型
**示例**
```
```
ts
//创建一个SourceError
let
sourceError
=
new
SourceError
(
"
Third SDK error message
"
);
//创建一个UniError
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录