uniapp项目的加载更多及返回顶部(day8)

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情

上一篇文章介绍到上拉加载更多的时候获取数据的getNewsData方法需要改变一下，让新的文章和旧的文章进行拼接并且解构一下，然后loading状态从正在加载中改为我是有底线的 这个过程的判断的依据是res.data.length ==0 ，也就是说当获取数据的数组长度为0也就是没有数据的时候，loading展示为我是有底线的，让loading状态改为2，然后让接收数据的空数组nwesData赋值为...this.nwesData,...res.data,具体的实现代码如下所示：

 getNewsData() {
      uni.request({
        url: "http://localhost:3000/news",
        data: {
          _page: this.page,
          _limit: this.limit,
        },
        method: "GET",
        success: (res) => {
          if (res.data.length == 0) {
            this.loading = 2;
          }
          this.newsData = [...this.newsData, ...res.data];
        },
      });
    },

• 然后loading状态的实现需要使用到v-if，当loading为1的时候就是数据加载中，loading为2的时候文本为我是有底线的，这里我们使用到的组件是uView中的u-loadmore组件，官方链接：www.uviewui.com/components/… ,然后我们需要在return中定义一个loading的状态，初始为0，当页面触底的时候让这个this.loading为1或者为2，具体的代码如下所示：

 <view>
      <u-loadmore
        v-if="loading == 1"
        loadmoreText="数据加载中"
        color="#34e2a3"
        lineColor="#34e2a3"
        line
      />
      <u-loadmore
        v-if="loading == 2"
        loadmoreText="我是有底线的"
        color="#34e2a3"
        lineColor="#34e2a3"
        line
      />
    </view>

• 在我们浏览这种文章列表的时候有时候拉的太深，需要快速返回顶部，这时候就要用到一个返回顶部的组件，组件的链接： www.uviewui.com/components/… ，将其使用到项目上然后规定页面的高度就会在页面的右下角出现了，点击就会返回到页面的顶部