微信小程序爬坑记之–上划加载更多

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> 微信小程序爬坑记之–上划加载更多

今天继续爬坑,做一下上划加载更过数据的功能,我们浏览网页时,加载更过数据一般有两种方式,一种是点击按钮,实现加载,一种是屏幕上划实现加载。前者容易实现,今天来说下后者。

提示:点击阅读原文,浏览效果更佳喔。

实现页面上划加载下一页数据。先看一下效果,欣赏一波美女,这里解释一下,因为公众号文章内插图最大2M,所以把原图压缩去色就变成了这个鬼样,这里有的图片空白是因为接口问题,可能是图片源地址失效。

微信小程序爬坑记之--上划加载更多

照例先贴最终代码,随后再做详细说明。


scroll-view bindscrolltolower="loadMore" scroll-y="true" style="height: windowHeight}}px"
    view class="img-list"
        view class='item' wx:for=" list }}" wx:key="item.createdAt"
            image src="item.url}}" mode="scaleToFill"/image
        /view
    /view

    // 这里是加载动效  
    // 可以用 wx.showLoading()和wx.hideLoading() 来做加载动效更方便
    view class="loading"
        loading hidden="hidden}}"加载中.../loading
    /view
/scroll-view

.img-list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 5px;
}

.item{
    width: 48.3%;
    height: 400rpx;
    border: 1px solid #c4c4c4;
    box-shadow: 5px 5px 4px #888888;
    margin: 10rpx 0;
}

.item image{
    width: 100%;
    height: 100%;
}

//获取应用实例
const app = getApp()

Page({
  data:{
    hidden: true,
    windowHeight: 0,
    list:[],
    page: 3
  },

  // API接口:https://www.apiopen.top/meituApi?page=3

  onLoad(){
      // 获取屏幕高度
    wx.getSystemInfo({
      success: res = {
        this.setData({
          windowHeight: res.windowHeight
        })
        console.log(res.windowHeight);
      }
    });
    this.getImages()
  },

  // 请求数据
  // api: https://www.apiopen.top/meituApi?
  getImages(){
    // 模板字符串
    // const apiUrl = `https://www.apiopen.top/meituApi?page=${this.data.page}`;

    const apiUrl = "https://www.apiopen.top/meituApi?page=" + this.data.page;
      wx.request({
        url: apiUrl,
        data:{
        },
        header:{
            'content-type': 'json'
        },
        success: res = {
          console.log(res.data);
            this.setData({
            // 把请求的数据存放到 data中的list中
            // list: res.data.data
            // 追加列表
            list: this.data.list.concat(res.data.data)
            })
        }
    })
  },

  //上划加载更多
  loadMore(){
    //console.log(this.data.page);
    this.setData({
        page: this.data.page + 1,
        // 显示加载动画
        hidden: false
        
    });

    // 持续1.5秒的加载动画,并执行加载操作
    setTimeout( () = {
        this.setData({
            hidden: true  //隐藏加载动画
        })
        this.getImages()
    },1500)

  }

})

如果是点击按钮加载更多,只需要给按钮添加一个点击事件,触发时,向服务端发送请求,获取下一页数据,并追加到第一次请求的数据列表之后。上划加载,这里是利用滚动条的高度来判断是否触发加载更多的事件,当滚动条触底时说明当前页数据加载完毕,需要请求下一页数据,所以滚动条触底时触发请求,加载下一页数据。

查看官网组件可以看到视图容器中有一个  scoll-view 可以规定滚动视图区域,其中有一个属性  bindscrolltolower 可以在滚动到底部时触发事件。如图

微信小程序爬坑记之--上划加载更多

有了这个组件,只需要把内容区用  scoll-view 包起来,指定滚动方向  scoll-y 并绑定滚动到底部时触发的事件,这里我绑定的触发事件为 loadMOre 如图

微信小程序爬坑记之--上划加载更多

如果要根据滚动条高度判断是否触发加载事件,首先得知道用户当前是否滑动到了底部,由于机型不同,所以这个高度是不固定值,查找官方文档发现提供的有一个获取系统信息的API  wx.getSystemInfo 其中有一个  windowHeight 属性表示系统可用的窗口高度。这里我们给  scoll-view 指定高度为  windowHeight 如图

微信小程序爬坑记之--上划加载更多

然后调用  wx.getSysteInfo 获取当前窗口可用高度,如图

微信小程序爬坑记之--上划加载更多

这里打印一下成功的返回值, console.log(res.windowHeight) 发现是个数值,而这个值就是当前窗口可用的最大高度,如图

微信小程序爬坑记之--上划加载更多

通过官方提供的  wx.request API发起网络请求,其中  url 为请求的接口,  data 是参数,  success 是请求成功的回调函数。应用如图

微信小程序爬坑记之--上划加载更多

这里  getImages 为请求方法,其中请求的API接口中,由于  page 是表示页数,不能写死,是活参,所以在  data 里初始化  page 默认值为3[你要问我为什么默认值为3,因为喜欢]

这样就可以通过  this.data.page 拿到页码,拼接到地址后面,这里也可以把参数写进  wx.request 中的  data 里。请求成功则执行  success 成功的回调函数

我们打印一下成功的回调返回的数据, console.log(res.data) 发现请求成功,并且打印出了数据,其中  data 里的20条内容是我们想要的数据,如图

微信小程序爬坑记之--上划加载更多

接下来就是把请求的数据储存起来,以备页面渲染使用。在  Page 的  data 中定义了存储数据的数组  list 默认为空。在请求成功后对  list 重新传值,  list: res.data.data 。这样数据就被存起来了。

注意: 要把  getImages 方法在  onLoad 周期函数中调用。

渲染数据

上一步我们已经拿到了数据,下面进行页面渲染,如图

微信小程序爬坑记之--上划加载更多

数据渲染用  wx:for 循环 渲染  list 中的每一项,要指定唯一的  wx:key 这里和Vue里的  v-for 指令类似,须指定唯一  key 。查看数据列表可知,唯一值是  createdAt 。这时打开项目可以看到图片已经渲染出来了。如图

微信小程序爬坑记之--上划加载更多

数据渲染上了,但只是一页的数据,现在解决加载更多的数据。如图

微信小程序爬坑记之--上划加载更多

这里的  loadMore 方法是之前绑定的滚动块儿触底时执行的事件,当滑动到最底部时,触发事件,由于加载更多也是请求数据,不同的是页码值加一,所以这里先对页码值  page 加1后重新赋值,这个  hidden是控制加载动画显示与否,默认初始值为  true 即不显示,这里执行加载更多时,让其显示,有一个加载的动态效果。

页码值加1后,再次调用  getImages 方法,进行数据请求,现在请求的就是下一页的数据了,这里启动了一个定时器,让其有个缓冲加载的效果,当1.5s请求完毕之后,把加载的动效隐藏。再次刷新项目滑动到底部可以发现,能够加载下一页数据了。打开调试器,点开  Network 发现随着每次上划加载,这里的请求地址中的页码是逐次以跨度为1递增的,如图

微信小程序爬坑记之--上划加载更多

但是这里存在一个问题,就是新加载的数据会覆盖掉上一页的数据。这里只需要对  list 进行更改即可。

请求数据的数据是在  list 中保存的,之前是这样写的  list: res.data.data 。这就表示每请求一次数据即一页数据,都会把本次数据更新到  list 。这样下一次的数据永远都会把上一次的覆盖掉,所以这里应该对数据进行追加即把本次数据连接到上一次的数据后面,用  concat 进行连接。如图

微信小程序爬坑记之--上划加载更多

然后在重新启动项目,滑动加载,再返回上一页,发现上一页的数据还在,说明已经解决了问题。

经上操作基本实现了上划加载更多的功能,当然还可以加一些判断,比如当加载到最后一页时,提示已经到底了,更多的就自己根据需求动手完善吧,Demo源码我已经上传到github。

微信小程序爬坑记之--上划加载更多

原文始发于微信公众号(枪在手):

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> 微信小程序爬坑记之–上划加载更多


 上一篇
GitHub+Hexo搭建博客之–部署到GitHub GitHub+Hexo搭建博客之–部署到GitHub
var audio1 = new BeePlayer({element: document.getElementById("audio-1"),music:{title: "Life Goes On -&nb
2021-04-06
下一篇 
微信小程序爬坑记之–获取位置 微信小程序爬坑记之–获取位置
微信小程序快一个月没碰了,今天受一个老哥的启发,决定继续顺爬坑。我们经常遇到这样的情景,比如定外卖或者使用地图APP的时候,会让我们选择当前位置,今天的问题是如何获取当前位置。本文通过一个Demo来展示。废话不多讲,来看看吧。 提示:点击
2021-04-06