滚动

@pageScrollTo
实现页面或部分内容的滚动
wx.pageScrollTo(Object object)
将页面滚动到目标位置,支持 选择器滚动距离 两种方式定位;2选1
深层嵌套中,配合 wx.createSelectorQuery() 获取节点信息,实现更精确的滚动定位
更多信息,请访问 官方文档 - pageScrollTo
pageScrollTo常用属性
参数 说明
scrollTop 滚动到 页面 的目标位置;单位 px
duration 滚动动画时长;单位 ms;默认300
selector 选择器;仅仅支持ID、类、后代、并列等 基本选择器
offsetTop 偏移距离,需要 搭配 selector 参数使用,可以滚动到 selector 加偏移距离的位置,单位 px
返回顶部 - 到页面0的位置;使用距离
将某个元素 固定定位 - fixed 在页面底部并绑定事件
wx.pageScrollTo({
    scrollTop: 0,
    duration: 300,
    success: res => console.log(res),
    fail: err => console.log(err),
    complete: () => console.log('scroll done')
})
页面滚动到某个元素 - 使用选择器
页面结构 wxml
<view class="wrap">
    <view class="header"></view>
    <view class="nav"></view>
    <view class="cont"></view>
    <view class="footer"></view>
    <view class="backToNav" bind:tap="toNav">返回主菜单</view>
</view>
页面逻辑 js
toNav(){
    wx.pageScrollTo({
        selector:'.nav',
        // offsetTop: 100, // 返回到距离元素顶部100px的位置
        duration: 300,
        success: res => console.log(res),
        fail: err => console.log(err),
        complete: () => console.log('scroll done')
    })
}
美食列表 - 增加导航菜单,分类美食,单击菜单跳转到对应的分类;详情见 美食地图