scroll-view 组件划到底部后,更新数据,代码
时间: 2024-05-12 21:19:20 浏览: 104
如下:
```html
<scroll-view scroll-y="true" bindscrolltolower="loadMoreData">
<!-- 内容区域 -->
<view wx:for="{{list}}" wx:key="index">
<text>{{item}}</text>
</view>
</scroll-view>
```
```js
Page({
data: {
list: []
},
onLoad() {
// 初始化数据
this.loadData()
},
loadData() {
// 模拟请求数据
setTimeout(() => {
const newData = Array.from({ length: 10 }, (_, index) => `item${index}`)
this.setData({
list: [...this.data.list, ...newData]
})
}, 1000)
},
loadMoreData() {
// 当滚动到底部时触发加载更多数据
this.loadData()
}
})
```
以上代码中,通过 `scroll-view` 组件监听 `bindscrolltolower` 事件,当滚动到底部时触发 `loadMoreData` 方法,该方法会调用 `loadData` 方法请求更多数据,然后将新数据和旧数据拼接起来更新到页面中,实现了滚动到底部自动加载更多数据的效果。
阅读全文