微信小程序 特殊布局下,页面上拉触底事件onReachBottom无法触发解决方法

一、js

import fn from '../../utils/functions.js'; // 你自己封装的方法集
Page({
  data: {
    list: [],
    page: 1,
    loading: false, // 是否加载中
    finished: false // 是否加载完毕
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  scrollToLower: function(e) {
    if (!this.data.finished) {
      this.getList();
    }
  },
  getList() {
    const init = this.data.page === 1;
    const json = {
      page: this.data.page
    };
    this.setData({ loading: true });
    fn.get('products', json, res => {
      if (res.status === 'error') {
        this.setData({ finished: true });
        return fn.toast(res.msg);
      }
      this.data.list = init ? res.data : this.data.list.concat(res.data);
      this.setData({ 
      	list: this.data.list,
      	loading: false
	  });
      if (res.data.length > 0) {
        this.setData({ page: this.data.page + 1 });
      }
      if (res.meta.current_page === res.meta.last_page) {
        this.setData({ finished: true });
      }
    });
  }
})

二、wxml

<!-- 其中有引入有赞ui组件 -->
<scroll-view scroll-y="true" bindscrolltolower="scrollToLower" wx:if="{{list.length > 0}}" class="list">
  <view class="item" wx:for="{{list}}" wx:key="index" bindtap="goDetail" data-value="{{item}}">
    <image src="{{item.cover ? item.cover : '/static/images/avatar_default.jpg'}}"/>
    <view class="content">
      <view class="title two-nowrap">{{item.name ? item.name : '暂无标题'}}</view>
      <view class="spc one-nowrap">{{item.describe ? item.describe : '暂无描述'}}</view>
      <view class="bottom flex-between">
        <view class="bottom-price">
          <view class="sale-price"><text></text>{{filter.priceFormat(item.sale_price)}}</view>
        </view>
        <view class="cart-icon" catchtap="showSku" data-value="{{item}}">
          <van-icon name="shopping-cart-o" color="#ffffff"></van-icon>
        </view>
      </view>
    </view>
  </view>
  <view wx:if="{{loading}}">
    <van-loading size="18px">加载中...</van-loading>
  </view>
</scroll-view>

三、wxss
省略
注:其中主要的就是scrollToLower方法,以及标签中调用此方法,以实现onReachBottom无法触发的解决方法。

你可能感兴趣的:(微信小程序)