提交 05b5b6dc 编写于 作者: W wanganxp

更新scroll-view文档

上级 8b8df4e6
### 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
......
### 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)
......@@ -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.
先完成此消息的编辑!
想要评论请 注册