1.需要用到的组件和api
scroll-view(可滚动视图区域)
2.需要用到的属性
3.scrol-view需要指定一个高度,这个高度可以按自己的需求计算,我使用的是屏幕可用高度并且默认一页显示6个
4.滚动到底部绑定需要触发的事件
5.操作事件函数,主要是将请求下来的数据用concat方法进行合并,然后赋值,我是用的for循环假装添加的数据,实际项目中可以换成自己的ajax,并且为了模拟加载我添加了一个1.5秒的定时器,先调用提示框api成功之后关闭
result =
</span><span style="color: #0000ff">var</span> resArr =<span style="color: #000000"> []; //这里可以使用自己的ajax
</span><span style="color: #0000ff">for</span> (let i = 0; i < 10; i++<span style="color: #000000">) {
resArr.push(i);
};
</span><span style="color: #0000ff">var</span> cont =<span style="color: #000000"> result.concat(resArr);//合并请求的数据
console.log(resArr.length);
</span><span style="color: #0000ff">if</span> (cont.length >= 100<span style="color: #000000">) {
wx.showToast({ </span><span style="color: #008000">//</span><span style="color: #008000">期间为了显示效果可以添加一个过度的弹出框提示“加载中” </span>
title: '我也是有底线的'<span style="color: #000000">,icon: </span>'success'<span style="color: #000000">,duration: </span>300<span style="color: #000000">
});
</span><span style="color: #0000ff">return</span> <span style="color: #0000ff">false</span><span style="color: #000000">;
} </span><span style="color: #0000ff">else</span><span style="color: #000000"> {
wx.showLoading({ </span><span style="color: #008000">//</span><span style="color: #008000">期间为了显示效果可以添加一个过度的弹出框提示“加载中” </span>
title: '加载中'<span style="color: #000000">,icon: </span>'loading'<span style="color: #000000">,});
setTimeout(() </span>=><span style="color: #000000"> {
</span><span style="color: #0000ff">this</span><span style="color: #000000">.setData({
res: cont
});
wx.hideLoading();
},</span>1500<span style="color: #000000">)
}
}
6.成功,放完整代码可以直接复制运行
wxml代码
{{item}}
js代码
<span style="color: #008000">/<span style="color: #008000">
- 页面的初始数据
<span style="color: #008000">*/<span style="color: #000000">
data: {
height: ''<span style="color: #000000">,res: [0,1,2,3,4,5,6,7,8,9<span style="color: #000000">]
},lower() {
<span style="color: #0000ff">var result = <span style="color: #0000ff">this<span style="color: #000000">.data.res;
</span><span style="color: #0000ff">var</span> resArr =<span style="color: #000000"> [];
</span><span style="color: #0000ff">for</span> (let i = 0; i < 10; i++<span style="color: #000000">) {
resArr.push(i);
};
</span><span style="color: #0000ff">var</span> cont =<span style="color: #000000"> result.concat(resArr);
console.log(resArr.length);
</span><span style="color: #0000ff">if</span> (cont.length >= 100<span style="color: #000000">) {
wx.showToast({ </span><span style="color: #008000">//如果全部加载完成了也弹一个框</span>
title: '我也是有底线的'<span style="color: #000000">,</span>1500<span style="color: #000000">)
}
},<span style="color: #008000">/<span style="color: #008000">
- 生命周期函数--监听页面加载
<span style="color: #008000">*/<span style="color: #000000">
onLoad: <span style="color: #0000ff">function<span style="color: #000000"> (options) {
wx.getSystemInfo({
success: (res) =><span style="color: #000000"> {
<span style="color: #0000ff">this<span style="color: #000000">.setData({
height: res.windowHeight
})
}
})
}<span style="color: #000000">
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。