小程序 滚动wx.pageScrollTo

API:https://developers.weixin.qq.com/miniprogram/dev/api/wx.pageScrollTo.html

 

wx.pageScrollTo

 

在小程序的开发过程中,有个功能是点击后需要往view层中添加数据内容,在添加后需要将内容滚动到最下面一条,以便有更好的用户体验。

页面布局是:

最外层<view class="box">内容</view>

底部有输入框固定着<view class='footer'></footer>

为了解决抖动页面的问题:如果页面中有fixed定位的元素,定位的元素会跟随页面滚动,再回到位置上,产生页面抖动 => 在代码中加入duration:0

滚动到底部代码如下 

  wx.createSelectorQuery().select('.box').boundingClientRect(function (rect) {
      // 使页面滚动到底部
      // console.log(rect.bottom)
      // console.log(rect.height)
      wx.pageScrollTo({
        scrollTop: rect.height,
        duration: 0
      })
    }).exec()

 

参考博文 转自:https://blog.csdn.net/qq_41080490/article/details/80267742

转载于:https://www.cnblogs.com/dudu123/p/10412379.html

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: wx.pageScrollTo 是微信小程序 JavaScript API 中的一个方法,它可以在页面滚动到指定位置。该方法接受一个对象作为参数,该对象指定滚动的目标位置以及其他一些选项,例如滚动速度等。使用该方法可以在小程序中实现页面滚动效果。 ### 回答2: wx.pageScrollTo 是微信小程序中的一个页面滚动方法,用于实现页面滚动效果。通过使用该方法,可以实现用户点击按钮或者其他交互操作时,页面可以平滑滚动到指定的位置。 使用 wx.pageScrollTo 方法,需要传入一个对象作为参数,该对象有以下属性: - scrollTop:滚动到的位置,单位为px。例如,通过设置 scrollTop: 200 可以让页面滚动到垂直方向的200px位置。 - duration:滚动动画的时长,默认值为300ms。 - success:滚动成功的回调函数。 - fail:滚动失败的回调函数。 - complete:滚动结束的回调函数。 例如,可以在一个按钮的点击事件中使用 wx.pageScrollTo 方法,让页面滚动到顶部的位置: ``` wx.pageScrollTo({ scrollTop: 0, duration: 500, success: function() { console.log('滚动成功') }, fail: function() { console.log('滚动失败') }, complete: function() { console.log('滚动结束') } }) ``` 上述代码中,通过设置 scrollTop: 0,即将页面滚动到顶部的位置,动画时长为500ms。当滚动成功后,会在控制台输出"滚动成功",滚动失败或滚动结束都会相应输出对应的提示信息。 总之,wx.pageScrollTo 是实现微信小程序页面滚动效果的方法,通过设置滚动位置和滚动时间,可以实现页面滚动的平滑效果,并且可以在滚动成功、失败或结束时触发相应的回调函数。 ### 回答3: wx.pageScrollTo是微信小程序中用于页面滚动的API方法。 它的作用是将页面滚动到指定位置。通过调用该方法,我们可以将页面滚动到指定距离的位置,实现页面滚动效果。 wx.pageScrollTo方法接受一个对象参数,参数包括以下属性: 1. scrollTop:要滚动到的目标位置的距离,单位px。 2. duration:滚动动画的时长,默认300ms。 3. success:滚动完成的回调函数。 4. fail:滚动失败的回调函数。 5. complete:无论成功或失败都会执行的回调函数。 使用该方法时,我们可以根据具体的需求设置scrollTop的值,通过指定不同的scrollTop值来实现页面滚动到不同的位置。 比如,我们可以使用wx.pageScrollTo({scrollTop: 500})来将页面滚动到距离顶部500px的位置。 另外,在滚动过程中可以设置滚动动画的时长,以及相应的成功、失败与完成的回调函数来处理滚动结果。 总结起来,wx.pageScrollTo是微信小程序中用于实现页面滚动效果的API方法,通过调用该方法并设置相应的参数,我们可以实现将页面滚动到指定位置的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值