小程序开发API之将页面滚动到目标位置wx.pageScrollTo

时间:2024-04-05 12:58:42

wx.pageScrollTo(Object object)

将页面滚动到目标位置

wx.pageScrollTo属性

小程序开发API之将页面滚动到目标位置wx.pageScrollTo

注:scrollTop是指相对于整个屏幕(不是指某一个控件)向上移动距离,如果屏幕刚好铺满,没有超出屏幕高度,则设置无效

示例:
效果展示


小程序开发API之将页面滚动到目标位置wx.pageScrollTo

代码
index.wxml

<!--index.wxml-->
<button bindtap='btnClick1' type="primary">将页面滚动到目标位置</button>

<view style="height: 150px;background-color: red;margin-top:200px"></view>
<view style="height: 150px;background-color: green"></view>
<view style="height: 150px;background-color: blue"></view>
<view style="height: 150px;background-color: grey"></view>
<view style="height: 150px;background-color: red"></view>
<view style="height: 150px;background-color: green"></view>
<view style="height: 150px;background-color: blue"></view>

index.wxss

button{
  margin: 20rpx
}

index.js

//index.js
/*
  scrollTop    滚动到页面的目标位置,单位 px
  duration   滚动动画的时长,单位 ms
*/
Page({
  data: {
  },
  btnClick1: function (options) {
    wx.pageScrollTo({
      scrollTop: 200,
      duration: 1000
    })
  }
})