欢迎光临,了解微信小程序开发,就上易用通!

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

发布:2018-01-25 15:05浏览: 来源:网络 作者:tianshu

又是一天,继续小程序之旅,这一次把项目优化了一下布局,不至于那么丑了,然后实现了上拉加载更多,下拉刷新,需要滚轮操作才可以,鼠标多拽好像不灵活。效果图
微信小程序-下拉刷新,上拉加载更多(图1)
简单的说一下实现我的实现思路:

布局
  1. <scroll-view  style="height: {{windowHeight}}px; width: {{windowWidth}}px;" scroll-y="true" bindscrolltoupper="pullDownRefresh" bindscrolltolower="pullUpLoad" >
  2.   <navigator url="../newDetail/newDetail?id={{item.menuId}}" redirect="false" wx:for="{{caiItems}}" hover-class="navigator-hover">
  3.       <view class="test_item">
  4.       <image class="item_img" src="{{item.thumbnail}}" mode="scaleToFill"></image>
  5.       <text class="item_content">{{item.name}}</text>
  6.       </view>
  7. </navigator>
  8. </scroll-view>
核心就是:
  1. ```
  2. style="height: {{windowHeight}}px; width: {{windowWidth}}px;" scroll-y="true" bindscrolltoupper="pullDownRefresh" bindscrolltolower="pullUpLoad"

JS中实现相对应的方法
  1. <font face="微软雅黑"> onShow: function( e ) {
  2.     wx.getSystemInfo( {
  3.       success: ( res ) => {
  4.         this.setData( {
  5.           windowHeight: res.windowHeight,
  6.           windowWidth: res.windowWidth
  7.         })
  8.       }
  9.     })
  10.   },
  11.   pullDownRefresh: function( e ) {
  12.     console.log( "下拉刷新...." )
  13.     this.onLoad()
  14.   },
  15.  
  16.   pullUpLoad: function( e ) {
  17.     this.setData( {
  18.       page: this.data.page + 1
  19.     })
  20.  
  21.     console.log( "上拉拉加载更多...." + this.data.page )
  22.  
  23.     this.getDataFromServer( this.data.page )
  24.   },
  25.  
  26. }</font>
源码下载:https://pan.baidu.com/s/1eTP0xkm



免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。