首先，我们需要改变小程序的加载动画，小程序默认
<loading visible="{{hasMore}}"></loading>是有加载动画的，如下，是浮动的，这样就不美观了，而且往下加载不断这样会导致人视觉疲劳和烦躁。
网上有很多这样的，就不做更新了。本文主要增加了 没有了出现一个我是有底线的内容。
改变方法为，
1、我们再小程序pages的同级建立目录components。
2、再建立文件夹Loading；
3、在小程序内右键Loading 选择新建 Page 然后输入loading 就会生成4个文件
4、文件内容
loading.wxml
<!--components/Loading/loading.wxml-->
<view class="loadmore {{visible && 'visible'}}">
<view class="my-loading" wx:if="{{visible}}"></view>
<view class="my-loadings" wx:elif="{{visible==false}}"><text>我是有底线的</text></view>
</view>loading.js
Component({
data: {
},
properties: {
visible: {//loading效果是否显示
type: Boolean,
value: false//默认不显示
},
},
})loading.json
{
"component": true,//定义为组件
"usingComponents": {}
}css部分
loading.wxss
.loadmore {
width: 100%;
height: 0rpx;
display: flex;
align-items: center;
justify-content: center;
padding-top:24rpx;
transition: all 200ms linear;
}
.loadmore.visible {
height: 80rpx;
}
.my-loading:after {
content: " ";
display: block;
width: 26px;
height: 26px;
margin: 1px;
border-radius: 50%;
border: 2px solid #FFD800;
border-color: #eee #efefef #FFD800 transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.my-loadings{ display: box; /* OLD - Android 4.4- */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align:center;
-moz-box-align:center;
-ms-flex-align:center;
-webkit-align-items:center;
align-items:center;
font-size: 12px; color: #999;
}
.my-loadings text{padding: 0px 6px;}
.my-loadings:after,.my-loadings:before{
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
-moz-flex:1;
-ms-flex:1;
-webkit-flex:1;
flex:1;
width: 100px;
height: 1px;
background:#aaa;
content: "";
}好了，这样我们加载动画组件就做好了！
接下来就是引入的问题了
假设我们在index引入
index.wxml
<loading visible="{{hasMore}}"></loading>还是一样
index.js
data: {
hasMore:ture,//设置默认为显示
},index.json
{
"navigationBarTitleText": "首页",
"usingComponents": {
"loading": "/components/Loading/loading"//引入组件
}
}好了我们看下效果吧！
接下来我们就是要做到底部加载就显示了
独立加载的js请看
https://www.xhcss.com/xh/js/jiaocheng/223.html
一文。
好了！我们来看加载底部完整版
主要思路就是底部加载动画一直存在，当没有数据了就不执行了也就不显示了。 可以自行根据实际情况进行改进！
index.wxml
<scroll-view class='list-arc' scroll-y style="height:{{scrollYHeight}}px" scroll-top="{{scrollTop}}" bindscroll="bindscroll">
<block wx:for="{{list}}" wx:key="*this" wx:for-item='v'>
<text class='h6'>{{v.title}}</text>
</block>
<loading visible="{{hasMore}}"></loading>
</scroll-view >js部分
Page前面增加变量
let loadingMore = false//控制加载时间等 let lastScollTop = 0;// let lastRequestTime = 0;//
data增加部分变量
data: {
page: 1,//页码
pagesize: 8,//每页个数
list: [],//获取数据的数组
hasMore: true, //列表是否有数据未加载
scrollYHeight: '1000px', //scroll-view高度 可以在onReady里面设置和网页一样高也行 这个必须设置高度onReady: function() {
wx.getSystemInfo({
success: ({ windowHeight }) => {
this.setData({ scrollYHeight: windowHeight }) //设置scrill-view组件的高度为屏幕高度
}
})
},增加函数
bindscroll: function(e) {
const { scrollHeight, scrollTop } = e.detail;
const { scrollYHeight, hasMore } = this.data;
//如果当前没有加载中且列表还有数据未加载，且页面滚动到距离底部40px内
if (!loadingMore && hasMore && (scrollHeight - scrollYHeight - scrollTop < 40) && lastScollTop <= scrollTop) {
this.loadMore();//判断底部后就直接loadMore函数
}
lastScollTop = scrollTop
},然后增加loadMore函数
loadMore: function() {
const { page, hasMore } = this.data;//获得page 和 滚动的状态
if (!hasMore || loadingMore) return; //如果hasMore为false,就不执行了。
loadingMore = true
setTimeout(
() => { //传递参数page和一个改变loadingMore函数的脚本
this.fetchList(page + 1, () => {
loadingMore = false;
})
}, 333//延迟执行，防止一直滚太快访问太快
)
},然后增加fetchList 函数
fetchList: function(page, cb) { //接收page和函数
let nowRequestTime = (new Date()).getTime();//获取当前时间
//限制两次网络请求间隔至少1秒
if (nowRequestTime - lastRequestTime < 1000) {//如果当前时间和上次加载的时间少于1秒，则把loadingMorer设为false!
if (cb) cb();
return;
}
lastRequestTime = nowRequestTime//改变上次加载时间为当前时间
wx.request({//加载的 就和你自己加载的就行了
url: app.host + '/plus/list_ajax.php',
data: {
ajax: 'pullload',
typeid: '3',
page,//传递过来的page
pagesize: this.data.pagesize//每页的个数
},
method: 'GET',
dataType: 'json',
header: {
'content-type': 'application/json'
},
success: (res) => {
if (res.data && res.data.data) {
let list = res.data.data || [];
if (list.length == 0) {//如果没有数据
if (page == 1) {//如果是第一页，还没有数据，那么就隐藏hasMore，并设置list为空
this.setData({
hasMore: false,
page,
list: []
})
} else {
this.setData({ //如果page不是第一页，就不设置list为空了
hasMore: false,
page,
})
}
} else {//如果有数据
this.setData({
list: this.data.list.concat(list),//那么就把新的变量串联到list
hasMore: list.length == this.data.pagesize,//判断list的数据和pagesize数据是否相等，相等就证明还有数据，loading继续显示，不相等就直接隐藏了，就不再加载
page,
})
}
} else {
wx.showToast({
title: res.data ? res.data.message : "列表加载失败",
icon: 'none',
duration: 1000
})
}
if (cb) {
cb()
}
},
fail: () => {
wx.showToast({
title: "列表加载失败",
icon: 'none',
duration: 1000
})
if (cb) {
cb()
}
}
})
},好了 试一下吧！