【微信小程序开发】小程序中的上滑加载更多,下拉刷新是如何实现的?

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯,先赞后看哦~🎈🎈

🏆 作者简介:景天科技苑

🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。

🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi,flask等框架,linux,shell脚本等实操经验,网站搭建,数据库等分享。

所属的专栏: 微信小程序开发零基础教学,难点与应用实战总结
景天的主页: 景天科技苑

文章目录

1.上滑加载更多

结合上一章我们的项目,先在原来的基础上添加个goods页面

js代码

javascript 复制代码
Page({

  data: {
    good_list: [1, 2, 3]
  },
  // 当滑动到底部还有100rpx时,就会触发这个函数执行---》发送请求获取数据
  onReachBottom() {
    console.log('上拉了')
    // 发送请求获取数据
    wx.request({
      url: 'http://127.0.0.1:8000/app01/random/',
      method:'GET',
      success:(res)=>{
          this.setData({
            good_list:this.data.good_list.concat(res.data)
          })
      }
    })
  },
})

###wxml####

html 复制代码
<view wx:for="{{good_list}}" wx:key="*this">{{item}}</view>

这样的123不好看没我们设置个样式

###wxss###

css 复制代码
view{
  height: 400rpx;
  display: flex;
  justify-content: center;
  align-items: center;

}

/* 奇数背景色是粉色 */
view:nth-child(odd){
  background-color: pink;
}


/* 偶数背景色绿色 */
view:nth-child(even){
  background-color: rgb(17, 133, 88);
}

现在我们要实现,往上拉,拉到最底部时,显示更多的数字

此时需要在goods.json文件中配置onReachBottomDistance

###json###

javascript 复制代码
{
  "usingComponents": {},
  "onReachBottomDistance": 100
}

onReachBottomDistance的意思是,当拉到距离底部距离多少rpx时开始触发加载更多

滑动加载数据,在js代码中是固定的函数名 onReachBottom

javascript 复制代码
      // 当滑动到底部还有100rpx时,就会触发这个函数执行---》发送请求获取数据
  onReachBottom() {
    console.log('下拉了')
    // 发送请求获取数据
    wx.request({
      url: 'http://127.0.0.1:8000/random',
      method:'GET',
      success:(res)=>{
          this.setData({
            good_list:this.data.good_list.concat(res.data)
          })
      }
    })
  },

django后端代码:

###url###

###视图###

python 复制代码
import random

def random_view(request):
    l = []
    for i in range(3):
        l.append(random.randint(0, 99999))
    return JsonResponse(l,safe=False)  # 返回json格式,如果里面有列表,必须加safe=False

后端运行

小程序上拉,显示更多数据

2.下拉刷新

上面我们讲到了下拉加载更多数据,如果我们想恢复到最初的默认怎么办,此时就用到了下拉刷新

###json中配置###

javascript 复制代码
{
  "usingComponents": {},
  "onReachBottomDistance": 100,
  "enablePullDownRefresh": true,
  "backgroundColor": "#efefef",
  "backgroundTextStyle":"dark"
}

###wxml ###

html 复制代码
<view wx:for="{{good_list}}" wx:key="*this">{{item}}</view>

###js ###

javascript 复制代码
// 下拉刷新-
onPullDownRefresh(){
    console.log('下拉了,刷新')
    // 只要下来,把数据恢复
    this.setData({
        good_list:[1,2,3]
    })
    // 下拉刷新后,loading效果回弹
    if(this.data.good_list.length==3){
        wx.stopPullDownRefresh()
    }
}

3.scroll-view实现上拉加载更多,下拉刷新

我们再新建个页面

重新建个tarbar

#####wxml####

html 复制代码
<scroll-view 
class="scroll"
scroll-y  # 运行y轴滑动
lower-threshold="100" # 距离底部还有100px时,触发事件
bindscrolltolower="handleGetData"# 事件处理函数


refresher-enabled="true"        # 开启 下拉刷新
refresher-default-style="black" # 下拉默认样式
refresher-background="#f0f0f0"  # 下拉背景色
bindrefresherrefresh="handleReload" # 下拉触发事件
refresher-triggered="{{isRefresh}}" # 设置下拉回弹,false允许回弹,

enable-back-to-top="true"  # 快速回到顶部,ios点顶部,安卓点tab
>
  <view wx:for="{{goods}}" wx:key="index">{{item}}</view>
</scroll-view>

###wxss###

css 复制代码
.scroll{
  /* 100vh就是指元素的高度等于当前浏览器的视窗高度,即浏览器内部的可视区域的高度大小 */
  height: 100vh; 
  background-color: grey;
}

view{
  height: 400rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 奇数 */
view:nth-child(odd){
  background-color: pink;
}
/* 偶数 */
view:nth-child(even){
  background-color: green;
}

效果:

下拉刷新

上拉加载更多

相关推荐
丁总学Java1 小时前
页面、组件、应用、生命周期(微信小程序)
微信小程序·小程序·生命周期
编程千纸鹤6 小时前
高校宿舍信息管理系统小程序
小程序·宿舍管理小程序
说私域7 小时前
基于开源 AI 智能名片 S2B2C 商城小程序的视频号交易小程序优化研究
人工智能·小程序·零售
丁总学Java18 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域19 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen86819 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq229511650220 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦1 天前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac1 天前
微信小程序的组件
微信小程序
stormjun1 天前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享