微信小程序开发之scroll-view上拉加载数据实现

蔚落 2022-01-31 09:57 1236阅读 0赞

## 一、开发思路 ##

1、使用小程序的scroll-view组件中提供了一个bindscrolltolower属性监听组件的滑动到了底部

[https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html][https_developers.weixin.qq.com_miniprogram_dev_component_scroll-view.html]可以点击链接查看scroll-view组件拥有的属性

2、组件滑动到底部这个事件会频繁触发、所以为了防止多次触发我们定义一个状态用于管理加载的状态、如果上拉数据状态在加载中就不去做网络请求加载数据

3、上拉的时候对page进行加1然后获取网络请求

4、数据获取成功对获取的数据进行叠加

## 二、实现代码 ##

### 1、布局 ###

布局中我使用了*scroll-view*并且使用了*bindscrolltolower*这个属性绑定了我的lowe函数

<scroll-view scroll-y="true" scroll-y="{
       {isScroll}}" enable-back-to-top='true' bindscrolltolower='lower' style='overflow: scroll;-webkit-overflow-scrolling:touch;margin-top:130px;'>
        <block wx:key="index" wx:for="{
       {dataShow}}">
          <view data-index='{
       {index}}' class="order-item">
            <view class="contentBody">
              <view class='title'>
                {
       {item.company}}
              </view>
              <view class='time'>
              {
       {item.time}}
              </view>
              <view class='title'>
                <text>{
       {item.university}}</text>
                <text style='margin-left:32px'>{
       {item.place}}</text>
              </view>
              <view style='margin-top: 8px'>
                <text class='origin'>来源</text>
                <text class='originInfo'>{
       {item.university}}/就业网</text>
              </view>
            </view>
          </view>
        </block>
        <view wx:if='{
       {noData}}'class="noData">没有更多了~</view>
      </scroll-view>

### 2、js中的实现 ###

stopLoadMoreTiem是我在data中定义的变量默认是false

定义page和stopLoadMoreTiem

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTcwNjQxNQ_size_16_color_FFFFFF_t_70][]

下面就是布局中组件中*bindscrolltolower*绑定的函数、 t*hat.getList()*就是网络请求方法

//下拉加载
      lower: function() {
        var that = this;
        if (that.stopLoadMoreTiem) {
          return;
        }
        this.setData({
          page: this.data.page + 1 //上拉到底时将page+1后再调取列表接口
        });
        that.getList();
    
      },

网络请求方法中网络请求成功改变*stopLoadMoreTiem*的状态网络请求成功没有数据的时候我给nodata赋值了 ，nodata布局中负责显示*没有更多数据 *布局的显示

/**
       * 请求网络获取列表数据
       */
      getList() {
        var that = this;
        that.stopLoadMoreTiem = true;
        // if (!that.stopLoadMoreTiem) {
         
        // }
        wx.showLoading({title:'数据读取中...'})
        wx.request({
          url: app.globalData.apiHost + '/page?page=' + that.data.page + '&size=10',
          method: 'GET',
          data: {
            queryStartDate: that.data.queryStartDate,
            queryEndDate: that.data.queryStartDate,
          },
          header: {
            'Accept': 'application/json'
          },
          success: function(res) {
            wx.hideLoading();
            if (!res.data.content || res.data.content.length === 0) {
              that.setData({
                noData: true,
              })
              return;
            }
            if (that.stopLoadMoreTiem) {
              if (res.data.content && res.data.content.length > 0) {
                that.setData({
                  dataShow: that.data.dataShow.concat(res.data.content),
                  total: res.data.totalElements,
                })
              }
            } else {
              that.setData({
                dataShow: res.data.content,
                total: res.data.totalElements,
              })
            }
            that.stopLoadMoreTiem = false;
          }
        })
      },

下面这块代码是关键代码 这块我写的如果是上拉加载并且获取的数据长度大于0我在这里使用***concat****关联将数组叠加。*

* **dataShow: that.data.dataShow.concat(res.data.content),***

if (that.stopLoadMoreTiem) {
              if (res.data.content && res.data.content.length > 0) {
                that.setData({
                  dataShow: that.data.dataShow.concat(res.data.content),
                  total: res.data.totalElements,
                })
              }
            } else {
              that.setData({
                dataShow: res.data.content,
                total: res.data.totalElements,
              })
            }

以上就是上拉加载更多的数据有问题请留言下拉刷新也很简单使用*bindscrolltoupper*这个属性

**送上一波福利**

### 微信公众号开发、企业建站开发、小程序、vue、h5、css3、react等前端视频学习资料关注公众号【码兄】免费获取 ###

![20191014103439896.png][]

[https_developers.weixin.qq.com_miniprogram_dev_component_scroll-view.html]: https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTcwNjQxNQ_size_16_color_FFFFFF_t_70]: /images/20220131/5e848caf14ca4820800c9b76e64383bf.png
[20191014103439896.png]: /images/20220131/9b5d53589c974701b7514ccac55b2fee.png