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

当前位置 : 易用通 > 小程序模板
微信小程序-刷新加载	微信小程序-刷新加载
立即下载

微信小程序-刷新加载

模板分类 : 小程序模板 模板编号 : Y32 源码文件 : 完全开源 下载权限 : VIP会员
模板大小 :  模板指数 :  更新时间 : 2018-01-16 09:22 模板等级 : ☆☆☆☆☆

模板截图:

本帖最后由 彤之云 于 2016-11-23 13:24 编辑 又是一天,继续小程序之旅,这一次把项目优化了一下布局,不至于那么丑了,然后实现了上拉加载更多,下拉刷新,需要滚轮操作才可以,鼠标多拽好像不灵活。效果图
微信小程序-刷新加载	(图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>

加入收藏
立即下载
分享到微信朋友圈
X

免责声明:

1. 本站所有素材(未指定商用),仅限学习交流,请勿用于商业用途。
2. 本站所有小程序模板Demo和图片均来自用户分享上传和网络收集,模板和图片版权归原作者及原出处所有。
3. 未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材。