700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 微信小程序scroll-view滚动条始终再最底部 实现自动滚动的效果

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

时间:2021-08-19 16:34:05

相关推荐

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

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

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

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

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

//滚动条至最底部autoScroll() {var that = thislet 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,小编猜测其实函数是有效果的只是,因为我们的单位较小,效果不明显

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。