微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
更新时间:2018年11月09日 15:24:29 作者:ICE小学生
本文通过实例代码给大家介绍了微信小程序使用scroll-view标签实现自动滑动到底部功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
具体代码如下所示:
// 1.scroll-y="true" Y轴滚动
// 2.应该是设置了高才能行
// 3.使用scroll-top属性实现滚动到底部,scroll-top不要带单位
<scroll-view scroll-y="true" style="height:{{height-50}}px;" scroll-top="{{scrollTop}}">
<block wx:for="{{recordList}}" wx:key="item.id">
<view>
<text>{{item.text}}</text>
</view
</block>
</scroll-view>
Page({
data: {
// 列表
recordList:'',
height: '',
scrollTop: 0
},
onLoad: function (options) {
// 获取当前窗口的高度
var height = wx.getSystemInfoSync().windowHeight;
// 下面的是我封装的一个http请求
App.HttpService.getReturnVisitRecordList(options.id).then(res => {
//res 是请求成功后返回的数据
if (res.data.code === 0) {
var length = res.data.data.length
that.setData({
// 将获取的List赋值给recordList
'recordList': res.data.data,
// 1.计算页面上每一个item的标签的高
// 2.用数组的获取的List的长度*每个item标签的高度(400是我目测的,说白了就是瞎写的,反正肯定比每个item的高度高,只要够高就行。)
'scrollTop': length * 400
})
}
})
}
})
总结
以上所述是小编给大家介绍的微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
HTML中Select不用Disabled实现ReadOnly的效果
Disabled ReadOnly之家的联系2008-04-04
JavaScript的null和undefined区别示例介绍
在Javascript中对于这种生命后没有给定初始值的变量,就给他一个undefined,如果要将一个标识符声明称object类型,但是暂时不给他实例,那么就可以将它先初始化为null2014-09-09
JavaScript处理XML DOM、XPath和XSLT方法详解
这篇文章介绍了JavaScript处理XML DOM、XPath和XSLT的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-05-05


最新评论