37-优化细节增加loading加载样式

提示：数据加载中和没有更多数据了

先写两个盒子，分别对应数据加载的时候和没有数据的时候

    <!-- 数据加载中提示 -->
    <view class="loading">
      <view class="">数据加载中...</view>
      <view class="">没有更多了~~</view>
    </view>

  .loading{
    text-align: center;
    font-size: 26rpx;
    color: #888;
    line-height: 2em;
  }

接下来就是在data中定义loading的状态。通过对状态的判断决定显示哪一个盒子,默认不显示任何内容显示

data() {
    return {
        navIndex:0,
        navArr: [],
        newsArr:[],
        currentPage:1,
        loading: 0, // 0默认 1加载中 2没有更多了
}

在标签上写if判断

    <!-- 数据加载中提示 -->
    <view class="loading">
      <view v-if="loading==1">数据加载中...</view>
      <view v-if="loading==2">没有更多了~~</view>
    </view>

接下来就是在触底时重置loading的值为1

    onReachBottom(){
      this.currentPage++;
      this.loading = 1;
      this.getNewsData()
    },

在控制台中将网络改成3G慢速，就能看到提示文字了

这样写点击其他导航栏都会显示数据加载中，所以，需要在点击切换栏目的方法中，将这个值重置为0

		methods: {
      // 点击导航栏切换选中项
      clickNav(index,id){
        this.navIndex = index;
        // 切换导航栏时,将点击的页码置为1，否则不同栏目的页码将会一直++
        this.currentPage = 1;
        // 将加载中状态的值重置为0
        this.loading = 0
        // 重置已经获取到的数据,不清空会把不同栏目的数据拼接在一起
        this.newsArr = [];
        this.getNewsData(id)
      },

接下来是没有更多了提示，这个提示可以写在获取网络数据的方法中，因为接口返回值中，有一个属性data，如果没有数据了，这个值是0，可以根据这个来进行判断

      // 获取新闻列表数据
      getNewsData(id=50){
        uni.request({
          url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
          data:{
            cid:id,
            page: this.currentPage
          },
          success:res=>{
            // 如果接口返回值中data为0,表示没有数据了,将loading重置为2
            if(res.data.length == 0){
              this.loading = 2
            }
            // 将获取到的当前页面数据赋值给newsArr
            // this.newsArr = res.data
            // 将当前页面的数据和之前获取的数据拼接起来并赋值给newsArr
            this.newsArr = [...this.newsArr, ...res.data]
          }
        })

还有一个问题，在显示已经显示没有更多了的时候，还是会显示正在加载数据，因为他还是会再获取一次数据，这不合理

所以在触底时，如果loading状态已经是2了，就不要翻页和请求网络数据了，可以用if判断来做

    onReachBottom(){
      // 如果状态是2,就不再翻页和加载网络数据
      if(this.loading == 2){
        return;
      }
      this.currentPage++;
      this.loading = 1;
      this.getNewsData()
    },

还有一个问题，时尚这一项本身就是没有数据的，它会显示没有更多了，这不合理，原因是之前是通过接口数据的长度进行判断的，在获取接口数据的方法中，数据的长度等于0就直接把状态改成2了，所以就会显示这个字符

解决办法： 在数据加载提示的盒子上进行判断，如果有数据才走文字提示这个盒子，如果没有数据就不显示文字提示，只显示图片

    <view class="nodata" v-if="!newsArr.length">
      <image src="../../static/images/nodata.png" mode="widthFix"></image>
    </view>
    
    <!-- 数据加载中提示 -->
    <view class="loading"  v-if="newsArr.length">
      <view v-if="loading==1">数据加载中...</view>
      <view v-if="loading==2">没有更多了~~</view>
    </view>