小程序_上拉加载更多

2023-11-23 19:15:16

小程序有两种上拉加载更多的分页效果。

第一种利用onReachBottom函数

1 onReachBottom: function() {
2 
3     // Do something when page reach bottom.
4 
5 }

第二种使用scroll-view标签，这个标签需要给定一定的高度才能实现，同时还需要设置scroll-y为true，再在bindscrolltolower滚动到底部触发事件。

代码：

wxml

<!-- 主容器 -->
<view>
    <scroll-view class=‘arriveList‘ scroll-y="true" bindscrolltolower="loadMore">
      <radio-group class="radio-group" bindchange="radioChange">
        <radio class="radio" wx:for-items="{{items}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}">
          <text>{{item.value}}</text>
          <text>{{item.time}}</text>
        </radio>
        <view class=‘loadTinps‘>正在加载中...</view>
      </radio-group>
    </scroll-view>
</view>

View Code

wxss

.radio {
  width: 100%;
  height: 100rpx;
  border-bottom: 1px solid #999;
}

.arriveList {
  height: 1100rpx;
}

.loadTinps {
  text-align: center;
}

View Code

Page({
  data: {
    items: [{
        name: ‘USA‘,
        value: ‘美国‘,
        time: ‘2018-09-11‘
      },
      {
        name: ‘CHN‘,
        value: ‘中国‘,
        checked: ‘true‘,
        time: ‘2018-09-11‘
      },
      {
        name: ‘BRA‘,
        value: ‘巴西‘,
        time: ‘2018-09-11‘
      },
      {
        name: ‘JPN‘,
        value: ‘日本‘,
        time: ‘2018-09-11‘
      },
      {
        name: ‘ENG‘,
        value: ‘英国‘,
        time: ‘2018-09-11‘
      },
      {
        name: ‘FRA‘,
        value: ‘法国‘,
        time: ‘2018-09-11‘
      },
      {
        name: ‘BRA‘,
        value: ‘巴西‘,
        time: ‘2018-09-11‘
      },
      {
        name: ‘JPN‘,
        value: ‘日本‘
      },
      {
        name: ‘ENG‘,
        value: ‘英国‘
      },
      {
        name: ‘FRA‘,
        value: ‘法国‘
      },
      {
        name: ‘BRA‘,
        value: ‘巴西‘
      },
      {
        name: ‘JPN‘,
        value: ‘日本‘
      },
      {
        name: ‘ENG‘,
        value: ‘英国‘
      },
      {
        name: ‘FRA‘,
        value: ‘法国‘
      },
      {
        name: ‘BRA‘,
        value: ‘巴西‘
      },
      {
        name: ‘JPN‘,
        value: ‘日本‘
      },
      {
        name: ‘ENG‘,
        value: ‘英国‘
      },
      {
        name: ‘FRA‘,
        value: ‘法国‘
      },
      {
        name: ‘BRA‘,
        value: ‘巴西‘
      },
      {
        name: ‘JPN‘,
        value: ‘日本‘
      },
      {
        name: ‘ENG‘,
        value: ‘英国‘
      },
      {
        name: ‘FRA‘,
        value: ‘法国‘
      },
    ]
  },
  onLoad: function(options) {

  },
  
  radioChange() {
  },
  loadMore(){
    let self = this,
      arr2 = self.data.items;

    arr2.push({
      name: ‘USA‘,
      value: ‘美国‘,
      time: ‘2018-09-11‘
    }, {
        name: ‘USA‘,
        value: ‘美国‘,
        time: ‘2018-09-11‘
      }, {
        name: ‘USA‘,
        value: ‘美国‘,
        time: ‘2018-09-11‘
      }
      , {
        name: ‘USA‘,
        value: ‘美国‘,
        time: ‘2018-09-11‘
      }
      , {
        name: ‘USA‘,
        value: ‘美国‘,
        time: ‘2018-09-11‘
      })
    setTimeout(function(){
      self.setData({
        items: arr2
      })

    },1000)
    
  },
})

View Code

小程序_上拉加载更多

码农公寓

相关文章