上拉加载更多这个需求我相信应该应用颇为广泛的，今天说我认为两种可行的方式哈 。
一、第一个应该是最简单的一种实现方式（我认为的哈），文档自带的一个api 可以监听滚动到页面底部的方法（onReachBottom） 、"onPageScroll"方法可以监听页面滚动条的位置。(PS：页面.json 中'onReachBottomDistance:number'默认为50，这个可以设置在距离底部多少px执行onReachBottom方法，具体使用看你需求。)
1.首先准备几个盒子 使其 超出page 页面高度产生滚动条、然后准备一个加载动画具体实现如下：
//wxml： arr是length为4的数组随意定义 只是为了撑高度的
<view class='warp'>
<view wx:for="{{arr}}" class='bg_cl'></view>
</view>
<!--加载动画 -->
<view class='bottom'>
<view class="loading">
<text></text>
<text></text>
<text></text>
<text></text>
<text></text>
</view>
</view>
// wxss ========================================
.warp{
display: flex;
flex-flow: column;}
.bg_cl{
width: 100%;
flex: 1;
height: 400rpx;
background: pink;}
.bg_cl:nth-child(2),.bg_cl:nth-child(4){
background: purple;}
.bottom{
line-height: 50rpx;
font-size: 24rpx;
display: flex; align-items: center;
justify-content: center;}
/*过渡动画 */
.loading{
width: 148rpx;
height: 44rpx;}
.loading text{
display: inline-block;
width: 20rpx;
height:20rpx;
margin-right: 5px;
border-radius: 50%;
background:#999;
-webkit-animation: load 1.04s ease infinite;
}
.loading text:last-child{
margin-right: 0px;
}
@-webkit-keyframes load{
0%{
opacity: 1;
-webkit-transform: scale(1);
}
100%{
opacity: 0.2;
-webkit-transform: scale(.3);
}
}
.loading text:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading text:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading text:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading text:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading text:nth-child(5){
-webkit-animation-delay:0.65s;
}
//js=========================================================
onReachBottom(e){
console.log("底部")// 滚动到页面执行 该 方法
wx.showToast({
title: '加载中...',
icon:'loading',
duration:2000
})
/*
这里执行你需要的请求数据追加到循环数组就好了
*/
},
onPageScroll(e){
//console.log(e) //滚动条 滚动的位置（e.scrollTop）从头部开始计算
},
效果如图
第二种：可以用 scroll-view 组件，scroll-y为true 时允许纵向滚动、使用scroll-view 组件时需要设置固定的高度。组件中有一个bindscrolltolower 触底 /右边 方法。详情见官方文档（PS: 使用组件会在页面产生一个滚动条，而page中也会有一个此时会出现问题，可以在页面 .json配置文件中 设置："disableScroll":true 页面整体不能上下滚动 等价于 wxss 中page{overflow:hidden} ;）
<!-- scroll-view -->
<scroll-view scroll-y='true' style="height:{{height}}px" bindscroll='scrollt' bindscrolltolower='scrollBottom'>
<view class='warp'>
<view wx:for="{{arr}}" class='bg_cl'></view>
</view>
</scroll-view>
==============wxss 延用上方就好了 下方是js'=================
onLoad: function () {
var that=this
wx.getSystemInfo({
success:res=>{
console.log(res)
this.setData({
height: res.windowHeight //获取屏幕高度 赋值给scroll-view
})
}
})
},
//scroll- view 滚动条 距顶部多少px
scrollt(e){
console.log(e.detail)
},
// scroll-view 滚动到底部触发
scrollBottom(e){
console.log(" 我是scroll 的底部")
//此处添加你的 请求方法就好了 这里不多做赘述了。
},
到此结束 ，如有疑问欢迎指出。诸君收刀！！！！
