小程序到底部无限加载的并加加载动画怎么做呢!完整解释版

首先,我们需要改变小程序的加载动画,小程序默认

<loading visible="{{hasMore}}"></loading>

是有加载动画的,如下,是浮动的,这样就不美观了,而且往下加载不断这样会导致人视觉疲劳和烦躁。

image.png

网上有很多这样的,就不做更新了。本文主要增加了 没有了出现一个我是有底线的内容。

改变方法为,

1、我们再小程序pages的同级建立目录components。

2、再建立文件夹Loading;

3、在小程序内右键Loading 选择新建 Page 然后输入loading 就会生成4个文件

image.png

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"//引入组件
}
}

好了我们看下效果吧!


11.gif

接下来我们就是要做到底部加载就显示了

独立加载的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()
}
}
})
},

好了 试一下吧!

写的好!

微信扫一扫赏大洋