作者:小花
github链接:https://github.com/mengbodi/swan/issues/1
在智能小程序的开发过程中,上拉加载是一种十分常见的加载效果,最近也收到了一些开发者在开发上拉加载时遇到的问题,今天的内容就为您介绍一下如果想实现下上拉加载,我们需要如何去做。
以下是为大家总结的四种常见的实现方式:
使用 onReachBottom 实现
智能小程序提供了onReachBottom
,即页面上拉触底事件的处理函数。可以拿在 Page 中定义 onReachBottom 处理函数,监听该页面用户上拉触底事件,从而实现上拉加载。
为方便大家直接使用看到效果,将下述代码片段,直接导入开发者工具中运行查看即可:
swanide://fragment/7e944c0c3785bbdf4437c672dd0dc8e41584413934361
代码解析
-
swan 文件是每个智能小程序页面的展现模板,类似于 Web 开发中的 HTML,所以我们先在 swan 文件中设置商品的展现样式:
<view class="goodsList"> <block s-for="item,index in goods"> <view class="goodsItem"> <view class="goodsImage"> <image src="{ {item.img}}"></image> </view> <view class="goodsTitle"> <text>{ {item.title}}</text> </view> </view> </block> </view> <view class="loading">努力加载中...</view>
-
在 js 文件中使用
onReachBottom
事件,当页面滑动到页面底部时,请求下一页展示数据,即实现上拉加载的效果。... ... onReachBottom() { //触底时继续请求下一页展示的数据 this