请选择 进入手机版 | 继续访问电脑版

罗密欧自媒体

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 156|回复: 0

微信小程序实现下拉刷新,上拉加载更多教程(附demo下载)

[复制链接]
发表于 2021-2-28 01:01:55 | 显示全部楼层 |阅读模式
本帖最后由 tom 于 2021-2-28 01:03 编辑

效果图:

153844c5xc8whmm6m55dzr.gif

实现思路:

布局
  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. 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.   pullUpLoad: function( e ) {
  16.     this.setData( {
  17.       page: this.data.page + 1
  18.     })

  19.     console.log( "上拉拉加载更多...." + this.data.page )

  20.     this.getDataFromServer( this.data.page )
  21.   },

  22. }
复制代码

实现的功能

实现了网络请求
实现了上拉刷新,下拉加载更多
模拟了登录功能
模拟了开屏页面的动画


下载地址:https://github.com/StudyLifeTime/Eater-APP
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|罗密欧自媒体 ( 豫ICP备15024997号 )

GMT+8, 2021-9-23 05:19 , Processed in 0.028302 second(s), 17 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表