uniapp - h5 - 下拉加载更多 & 下拉刷新 & 监听页面滚动距离顶部的距离

uniapp 开发的 h5

1. 下拉加载更多

2. 下拉刷新

3. 监听页面滚动距离顶部的距离

<script>
import config from '@/common/config/index';
export default {
  data() {
    return {
      banner,
      search_text: '',
      goodsList: [],
      total: '',
      page: 1, // 页码
      rows: 6, // 条数
    };
  },
  mounted() {
    var a = document.getElementsByClassName('uni-page-head__title')[0];
    a.textContent = '商城首页';

    this.getList();
  },
  // 2.1 先在 pages.json 对应的页面配置中开启下拉功能
  // 2.2 onPullDownRefresh 中监听下拉
  //下拉刷新
  onPullDownRefresh() {
    //重置关键数据

    //重置页码值
    this.page = 1;
    //重置总数
    this.total = 0;

    // 2.3 重新发起请求：请求发送成功以后传入一个回调函数，回调函数停止下拉刷新
    this.getList(() => uni.stopPullDownRefresh());
  },

  // 1.1 判断页面触底，页码加一。如果频繁触底导致 页码 * 条数 > 返回数据的总数，则不做任何操作
  // 触底操作,上拉请求更多数据
  onReachBottom() {
    if (this.page * this.rows >= this.total) {
      return;
    }
    this.page = this.page + 1;
    this.getList();
  },

// 3.1 onPageScroll 中 监听滚动距离进行业务操作
  onPageScroll(res) {
    // console.log('距离页面顶部距离', res.scrollTop); //距离页面顶部距离
    if (0 <= res.scrollTop && res.scrollTop < 50) {
      this.searchBox_style = {
        background: 'rgba(255,255,255,' + res.scrollTop / 50 + ')',
        borderBottom: '1px solid rgba(232,232,232,' + res.scrollTop / 50 + ')',
      };
    } else if (res.scrollTop > 50) {
      this.searchBox_style = {
        background: '#fff',
        borderBottom: '1px solid rgba(232,232,232,1)',
      };
    }
  },

  methods: {
    async getList(stop) {
      const params = {
        pageNum: this.page,
        pageSize: this.rows,
        search_text: this.search_text,
      };
      const res = await GET_listPage(params);
      if (res.code === 200 && res.msg) {
        // 2.4 请求完毕立即关闭下拉请求
        stop && stop();
        const BASE_URL = config.BASE_URL;
        // 业务操作
        res.rows.forEach(v => {
          v.filePath = BASE_URL + v.filePath;
        });
        // 1.2 当page === 1 ，则为第一次请求，直接赋值。否则则需合并数据
        let list = [];
        if (this.page == 1) {
          list = res.rows;
        } else {
          list = [...this.goodsList, ...res.rows];
        }
        this.goodsList = list;
        this.total = res.total;
        console.log(116161, this.goodsList);
      }
    },
  },
};
</script>