微信小程序上拉刷新

更新时间:2018-06-13 13:49:33点击次数:401次

小程序的滚动列表组件是scroll-view,.wxml文件代码:

  <scroll-view style="height:100%;" scroll-y bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
    <view class='flext-wrp' style='flex-direction:column; background-color:#ffffff; height:2.2rem;' wx:for="{{infoContent}}">
      <view class='flex-wrp' style='flex-direction:row;'>
        <view class='phoneNumContent'>{{item[0]}}</view>
        <image src="{{item[1]}}" class="imageContent"/>
        <view class='timeContent'>{{item[2]}}</view>
      </view>
      <view class="page-head-line" style="width:95%;"></view>
    </view>

  </scroll-view>

.js文件获取数据,infoContent为二元数组:

  this.setData({
      infoContent:[[], [], []]
  })

.js文件监听上拉到底:

  lower: function () {
   //  这个方法是滑动组件绑定的触底方法,如果滑动组件不是铺满全页面,滑动到底部并不会触发

  },

  onReachBottom: function () {

    //这个是页面触底会自动触发的方法,和scroll-view组件无关
  },
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息