文章目录
学习前后
上一篇:微信小程序开发之九 —— JavaScript入门
下一篇:微信小程序开发之十一 —— 页面渲染
页面滚动
官方文档:wx.pageScrollTo(Object object)
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
scrollTop | number | / | 滚动到页面的目标位置,单位px |
duration | number | 300 | 滚动动画的时长,单位ms |
selector | string | / | 选择器 |
success | function | / | 接口调用成功的回调函数 |
fail | function | / | 接口调用失败的回调函数 |
complete | function | / | 接口调用结束的回调函数(调用成功、失败都会执行) |
selector 语法
selector类似于 CSS 的选择器,但仅支持下列语法。
- ID选择器:#the-id
- class选择器(可以连续指定多个):.a-class.another-class
- 子元素选择器:.the-parent > .the-child
- 后代选择器:.the-ancestor .the-descendant
- 跨自定义组件的后代选择器:.the-ancestor >>> .the-descendant
- 多选择器的并集:#a-node, .some-other-nodes
之前的页面写得太多内容了,建议重新建一个页面来编写,在app.json的pages数组前面添加路径就可以了,记住,小程序首次加载的页面是pages数组的第一个页面的值。
我们在新建页面的.wxml文件输入以下代码:
<button type="primary" bindtap="scrollToPosition">滚动到页面指定位置</button>
<view class="pagetop" style="background-color:#333;width:100%;height:400px"></view>
<button type="primary" bindtap="scrollToTop">滚动到页面顶部(返回顶部)<