微信小程序scroll-view滚动条始终再最底部,实现自动滚动的效果

1、再组件scroll-view中有一个属性scroll-top,我们只需要实时改变它的数值即可

 2、首先我们要保证scroll-view中的scroll-y属性为true;并且保证盒子有高度

<scroll-view  class="display" scroll-y="true" style="height: 600rpx;" scroll-top="{{scrollTop}}"   >

   <text >

    {{display}}

   </text>

</scroll-view>

3、生成一个函数,只需要在需要滚动的时候条用此函数即可

   //滚动条至最底部
    autoScroll() {
        var that = this
        let query = wx.createSelectorQuery()
        query.select('.display').boundingClientRect(res => {
            console.log('res', res)
            that.setData({
                scrollTop: res.height * 100
            })
        })
        query.exec(res => {})

    },

4、在设置scrollTop的数值时,小编乘以了一个100的数值,是因为在运行的过程中,如果没有这个数值,函数一直没有效果,所以乘以一个100,小编猜测其实函数是有效果的只是,因为我们的单位较小,效果不明显

希望此教程可以帮助大家解决问题,如果有更好的方法,欢迎大家评论!

  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值