微信小程序触底加载scroll-view是一个常见需求，特别是在列表展示或瀑布流效果中。下面我们将一步步地讲解如何实现这个功能。
一、内容盒子的高度
首先，我们需要定义一个固定高度的容器，这个容器就是我们的内容盒子。假设我们使用 `scroll-view` 组件作为内容盒子，高度为300px。
```html
```
二、盒子里内容的总高度
接下来，我们需要计算盒子里内容的总高度。我们可以使用 `getBoundingClientRect()` 方法来获取元素的实际高度。
```javascriptconst contentHeight = wx.createSelectorQuery().select('.content').boundingClientRect((rect) => {
console.log(rect.height); // 内容盒子的高度});
```
三、滚动条的scrollTop
当我们滚动内容盒子时，滚动条的 `scrollTop` 值会随之改变。我们可以使用 `scrolltoupper()` 方法来触发滚动事件。
```javascript
```
四、触底加载的原理
触底加载的原理是，当内容盒子触底时，请求接口获取下一页数据，然后追加到内容盒子中。我们可以使用 `wx.request()` 方法来发送请求。
```javascriptwx.request({
url: ' method: 'GET',
data: {
page:1,
size:10,
},
success: (res) => {
const newData = res.data;
// 追加到内容盒子中 wx.createSelectorQuery().select('.content').add({
type: 'node',
id: 'new-data',
class: 'new-data',
children: [
{
type: 'text',
text: newData,
},
],
});
},
});
```
五、实现触底加载
现在，我们可以实现触底加载的功能。我们需要监听内容盒子的滚动事件，并检查是否触底。
```javascript
```
```javascripthandleScrollToLower() {
const contentHeight = wx.createSelectorQuery().select('.content').boundingClientRect((rect) => {
if (rect.height <= this.data.scrollTop + this.data.scrollIntoView) {
// 触底时请求接口获取下一页数据 this.requestNextPage();
}
});
}
requestNextPage() {
const page = this.data.page +1;
wx.request({
url: ' method: 'GET',
data: {
page,
size:10,
},
success: (res) => {
const newData = res.data;
// 追加到内容盒子中 wx.createSelectorQuery().select('.content').add({
type: 'node',
id: 'new-data',
class: 'new-data',
children: [
{
type: 'text',
text: newData,
},
],
});
},
});
}
```
六、总结
通过以上步骤，我们实现了微信小程序触底加载scroll-view的功能。这个功能可以用于列表展示或瀑布流效果中，提高用户体验和页面性能。
