小程序_上拉加载更多 -云博客

小程序_上拉加载更多

# 微信 2024-05-05 22:18 0 160 来源：云博客

小程序有两种上拉加载更多的分页效果。

第一种利用onReachBottom函数

1 onReachBottom: function() {2 3 // Do something when page reach bottom.4 5 }

第二种使用scroll-view标签，这个标签需要给定一定的高度才能实现，同时还需要设置scroll-y为true，再在bindscrolltolower滚动到底部触发事件。

代码：

wxml

<!-- 主容器 --><view> <scroll-view class=‘arriveList‘ scroll-y="true" bindscrolltolower="loadMore"> <radio-group class="radio-group" bindchange="radioChange"> <radio class="radio" wx:for-items="{{items}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}"> <text>{{item.value}}</text> <text>{{item.time}}</text> </radio> <view class=‘loadTinps‘>正在加载中...</view> </radio-group> </scroll-view></view>

View Code

wxss

.radio { width: 100%; height: 100rpx; border-bottom: 1px solid #999;}.arriveList { height: 1100rpx;}.loadTinps { text-align: center;}

View Code

Page({ data: { items: [{ name: ‘USA‘, value: ‘美国‘, time: ‘2018-09-11‘ }, { name: ‘CHN‘, value: ‘中国‘, checked: ‘true‘, time: ‘2018-09-11‘ }, { name: ‘BRA‘, value: ‘巴西‘, time: ‘2018-09-11‘ }, { name: ‘JPN‘, value: ‘日本‘, time: ‘2018-09-11‘ }, { name: ‘ENG‘, value: ‘英国‘, time: ‘2018-09-11‘ }, { name: ‘FRA‘, value: ‘法国‘, time: ‘2018-09-11‘ }, { name: ‘BRA‘, value: ‘巴西‘, time: ‘2018-09-11‘ }, { name: ‘JPN‘, value: ‘日本‘ }, { name: ‘ENG‘, value: ‘英国‘ }, { name: ‘FRA‘, value: ‘法国‘ }, { name: ‘BRA‘, value: ‘巴西‘ }, { name: ‘JPN‘, value: ‘日本‘ }, { name: ‘ENG‘, value: ‘英国‘ }, { name: ‘FRA‘, value: ‘法国‘ }, { name: ‘BRA‘, value: ‘巴西‘ }, { name: ‘JPN‘, value: ‘日本‘ }, { name: ‘ENG‘, value: ‘英国‘ }, { name: ‘FRA‘, value: ‘法国‘ }, { name: ‘BRA‘, value: ‘巴西‘ }, { name: ‘JPN‘, value: ‘日本‘ }, { name: ‘ENG‘, value: ‘英国‘ }, { name: ‘FRA‘, value: ‘法国‘ }, ] }, onLoad: function(options) { }, radioChange() { }, loadMore(){ let self = this, arr2 = self.data.items; arr2.push({ name: ‘USA‘, value: ‘美国‘, time: ‘2018-09-11‘ }, { name: ‘USA‘, value: ‘美国‘, time: ‘2018-09-11‘ }, { name: ‘USA‘, value: ‘美国‘, time: ‘2018-09-11‘ } , { name: ‘USA‘, value: ‘美国‘, time: ‘2018-09-11‘ } , { name: ‘USA‘, value: ‘美国‘, time: ‘2018-09-11‘ }) setTimeout(function(){ self.setData({ items: arr2 }) },1000) },})