微信小程序上拉刷新

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

小程序的滚动列表组件是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组件无关
  },

本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息