小程序_上拉加载更多
Posted 皮皮是只公喵
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序_上拉加载更多相关的知识,希望对你有一定的参考价值。
小程序有两种上拉加载更多的分页效果。
第一种利用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>
wxss
.radio { width: 100%; height: 100rpx; border-bottom: 1px solid #999; } .arriveList { height: 1100rpx; } .loadTinps { text-align: center; }
js
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) }, })
以上是关于小程序_上拉加载更多的主要内容,如果未能解决你的问题,请参考以下文章