Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
sss宋
unidocs-zh
提交
05b5b6dc
unidocs-zh
项目概览
sss宋
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录