您现在的位置: 微信小程序 > 微信小程序DEMO >

微信小程序-刷新加载

来源:微信小程序 编辑:易用通 发布时间:01-16热度:
本帖最后由 彤之云 于 2016-11-23 13:24 编辑

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

简单的说一下实现我的实现思路:

布局
  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>