博客

列表实现下拉分页

敲黑板：

onReachBottom

页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。

1、界面：循环后端返回的数据显示

  <view class="ul">
      <view
        class="li"
        v-for="(item, index) in productList"
        :key="index"
        @click.native="clickProjectItem(item)"
      >
        <view class="type">
          {{ item.projectRegionArea }}
        </view>
        <view class="name">
          {{ item.name }}
        </view>
        <view class="ifText">
          <view class="ifTextLeft"> 组长：{{ item.projectGroupLeader }} </view>
          <view class="ifTextLeft">
            地址：{{ item.provinceName + item.regionName + item.cityName }}
          </view>
        </view>
      </view>
    </view>
    <view class="isOver" v-if="isOver">------没有下一条了哦------</view>

2、方法：使用页面滚动到底部的事件触发分页

 // 查找所有项目
    findData() {
      var data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        searchValue: this.searchValue
      } 
      findAlltahProject(data).then(val => {
        console.log(val.data.data.list)
        // 将之前数据和下拉返回的数据拼一起显示
        this.productList = [...this.productList, ...val.data.data.list]
      })
    },
   // 下拉到底部后加载新数据
    onReachBottom() {
      //判断下一页是否存在数据，不存在将显示暂无数据等提示语
      if (this.productList.length < this.pageIndex * 10) {
        this.isOver = true;
      }
      this.pageIndex++;//页数加一
      this.findData();//回调接口
    },

如果有查询：点击查询的时候初始化数据

 sercher() {
      this.isOver = false;
      this.productList = []
      this.pageIndex = 1
      this.findData()
    }

完整代码：

<template>
  <view class="pageContent">
    <!-- 搜索框 -->
    <view class="search-bar">
      <view class="search-bar-box">
        <image class="search-span" src="../../static/searchSpan.png" />
        <input
          type="text"
          value=""
          confirm-type="search"
          @confirm="sercher()"
          v-model="searchValue"
          placeholder="请输入搜索内容"
          class="search-text"
          maxlength="10"
          focus
        />
        <button class="search-btn" @click="sercher">搜索</button>
      </view>
    </view>

    <view class="ul">
      <view
        class="li"
        v-for="(item, index) in productList"
        :key="index"
        @click.native="clickProjectItem(item)"
      >
        <view class="type">
          {{ item.projectRegionArea }}
        </view>
        <view class="name">
          {{ item.name }}
        </view>
        <view class="ifText">
          <view class="ifTextLeft"> 组长：{{ item.projectGroupLeader }} </view>
          <view class="ifTextLeft">
            地址：{{ item.provinceName + item.regionName + item.cityName }}
          </view>
        </view>
      </view>
    </view>
    <view class="isOver" v-if="isOver">------我是有底线的------</view>
  </view>
</template>

<script>
import {
  findAlltahProject
} from "@/api/project_api.js"
export default {
  data() {
    return { 
      productList: [],
      pageIndex: 1,
      pageSize: 10,
      intoType: '',
      searchValue: '',
      isOver: false,
    };
  },

  onLoad: function (option) { 
    this.intoType = option.name
    this.findData()
  },
  methods: {
    sercher() {
      this.isOver = false;
      this.productList = []
      this.pageIndex = 1
      this.findData()
    },
    // 查找所有项目
    findData() {
      var data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        searchValue: this.searchValue
      }
      console.log(data)
      findAlltahProject(data).then(val => {
        console.log(val.data.data.list)
        this.productList = [...this.productList, ...val.data.data.list]
      })
    },

    // 下拉到底部后加载新数据
    onReachBottom() {
      //判断下一页是否存在数据，不存在将显示暂无数据等提示语
      if (this.productList.length < this.pageIndex * 10) {
        this.isOver = true;
      }
      this.pageIndex++;//页数加一
      this.findData();//回调接口
    },
    // 点击项目跳转界面
    clickProjectItem(item) { 
      if (this.intoType == '生产日报') {
        uni.navigateTo({
          url: '/pages/submitDaily/submitPage?projectItem=' + JSON.stringify(item),
        });
      } 
    }

  }
}

</script>

<style lang="scss" scoped>
.ul {
  width: 100%;
  height: 100%;
  .li {
    margin-top: 25px;
    width: 100%;
    height: auto;
    padding: 15px;
    box-shadow: 0px 0px 5px #ccc;
    border-radius: 5px;
    position: relative;
    .type {
      position: absolute;
      top: -12px;
      left: 20px;
      width: 60px;
      height: 23px;
      line-height: 23px;
      background-color: #27a118;
      color: #fff;
      text-align: center;
      font-size: 14px;
      border-radius: 5px;
    }

    .name {
      font-size: 20px;
      width: 100%;
      height: auto;
      line-height: 30px;
      margin: 5px 0 10px 0;
    }

    .ifText {
      width: 100%;
      height: auto;
      .ifTextLeft,
      .ifTextRight {
        height: 25px;
        line-height: 25px;
      }
      .ifTextRight {
        text-align: right;
        font-size: 14px;
        color: #c0c0c0;
      }
    }
    .ifBtu {
      width: 100%;
      height: auto;
      button {
        width: 30%;
        height: 32px;
        line-height: 32px;
        background-color: #4e92f5;
      }
      button:nth-of-type(2) {
        margin-left: 5%;
      }
      button:nth-of-type(3) {
        margin-left: 5%;
      }
    }
  }
}

// 搜索框
.search-bar {
  width: 100%;
  height: 100rpx;
  margin-top: 2%;
}
.search-bar-box {
  display: flex;
  margin: 0 auto;
  width: 620rpx;
  height: 74rpx;
  border: 5rpx solid #00a8cc;
  border-radius: 50rpx;
}
.search-span {
  width: 100rpx;
  height: 56rpx;
  margin-top: 6rpx;
  margin-left: 30rpx;
}
.search-text {
  width: 100%;
  margin-top: 10rpx;
  margin-left: 20rpx;
  font-size: 30rpx;
  color: #7f7f81;
}
.search-btn {
  background-color: #00a8cc; /* Green */
  color: white;
  text-align: center;
  display: inline-block;
  font-size: 35rpx;
  width: 240rpx;
  height: 70rpx;
  line-height: 65rpx;
  border-radius: 30rpx;
  letter-spacing: 3rpx;
}
.isOver {
  font-size: 20px;
  margin: 0 auto;
  width: 70%;
  padding: 5px;
}
</style>