小程序_上拉加载更多

Posted 皮皮是只公喵

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序_上拉加载更多相关的知识,希望对你有一定的参考价值。

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

第一种利用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

js

技术分享图片
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

 

以上是关于小程序_上拉加载更多的主要内容,如果未能解决你的问题,请参考以下文章

小程序下拉刷新,上拉加载更多

小程序上拉加载更多,onReachBottom

小程序下拉刷新或上拉加载时背景色

微信小程序上拉加载:onReachBottom详解+设置触发距离

微信小程序页面事件-下拉刷新,上拉加载更多

硅谷新闻6--下拉刷新/上拉加载更多