微信小程序--开启下拉刷新页面

明日春风2024-03-20 13:04

1、下拉刷新获取数据enablePullDownRefresh

开启下拉刷新：

|-----------------------|---------|-------|--------------|
| enablePullDownRefresh | boolean | false | 是否开启当前页面下拉刷新 |

案例：

下拉刷新，获取新的列表数据,其实就是进行一次新的网络请求：

第一步：在.json文件中开启下拉刷新

XML 复制代码 
{
  "usingComponents": {},
  "enablePullDownRefresh":true,
  "backgroundColor": "#6D9AD6"
 
}

第二步：在.js配置文件中找到下拉刷新处理函数：

XML 复制代码 
// pages/wxRequest/wxRequest.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      listArr:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
      this.getData();
  },

  getData(){
    wx.showLoading({
      title: '网络加载中...',
      mask:true//遮罩层，防止用户误触
    })
      wx.request({
        url: 'https://api.thecatapi.com/v1/images/search?limit=2',
        success:res=>{
            console.log(res)
            this.setData({
              listArr:res.data
            })
            //当网络请求完成后，我们要自动的把下拉刷新的样式关闭掉，要不然不好看：
            wx.stopPullDownRefresh() 
        },
        complete:res=>{
             //无论网络请求是否成功，都要关闭loading样式：
             wx.hideLoading()
        }
      })
  },
    /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.setData({
      //细节：其实我们下拉刷新后，应该先把页面清空，再获取新的数据：
      //只不过页面清空效果很快，肉眼看不太出来
      listArr:[]  
    })
    this.getData();
  },

细节一：当网络请求完成后，我们要自动的把下拉刷新的样式关闭掉，要不然不好看：

  • wx.stopPullDownRefresh(Object object):停止当前页面下拉刷新;
  • wx.startPullDownRefresh(Object object):开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
XML 复制代码 
   /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
     //细节：其实我们下拉刷新后，应该先把页面清空，再获取新的数据：
     //只不过页面清空效果很快，肉眼看不太出来
    this.setData({
      listArr:[]  
    })
    this.getData();
  },

细节二：在页面加载完毕前，应该添加一个wx.showLoading()提示用户正在加载，网络请求完成后，就关闭这个加载动作

XML 复制代码 
  getData(){
    wx.showLoading({
      title: '网络加载中...',
      mask:true//遮罩层，防止用户误触
    })
      wx.request({
        url: 'https://api.thecatapi.com/v1/images/search?limit=2',
        success:res=>{
            console.log(res)
            this.setData({
              listArr:res.data
            })
            //当网络请求完成后，我们要自动的把下拉刷新的样式关闭掉，要不然不好看：
            wx.stopPullDownRefresh() 
            //当网络请求完成后，还要关闭loading样式：
            wx.hideLoading()
        }
      })
  },

细节三：如果网络请求失败呢？例如接口失效：

|----------|----------|---|--------------------------|
| success | function | 否 | 接口调用成功的回调函数 |
| fail | function | 否 | 接口调用失败的回调函数 |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |

XML 复制代码 
getData(){
    wx.showLoading({
      title: '网络加载中...',
      mask:true//遮罩层，防止用户误触
    })
      wx.request({
        url: 'https://api.thecatapi.com/v1/images/search?limit=2',
        success:res=>{
            console.log(res)
            this.setData({
              listArr:res.data
            })
            //当网络请求完成后，我们要自动的把下拉刷新的样式关闭掉，要不然不好看：
            wx.stopPullDownRefresh() 
        },
        complete:res=>{
             //无论网络请求是否成功，都要关闭loading样式：
             wx.hideLoading()
        }
      })
  },

2、触底加载更多的数据onReachBottom

在json文件中配置：

XML 复制代码 
{
  "usingComponents": {},
  "enablePullDownRefresh":true,
  "backgroundColor": "#6EB66E",
  "navigationStyle":"custom" ,
  "onReachBottomDistance":200
}
  • 距离底部多少的时候触发我们的触底事件 默认是50px
  • 触底加载更多的数据通常与这个api联合使用：导航栏有加载中的小圆圈wx.showNavigationBarLoading(Object object)
  • 在js中找到触底事件对应的处理函数：
XML 复制代码 
 /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },
XML 复制代码 
// pages/wxRequest/wxRequest.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      listArr:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
      wx.showLoading({
        title: '网络加载中...',
        mask:true//遮罩层，防止用户误触
      })
      this.getData();
  },

  getData(){
      wx.request({
        url: 'https://api.thecatapi.com/v1/images/search?limit=2',
        success:res=>{
          let oldArr = this.data.listArr;
          let newArr = oldArr.concat(res.data)//调用concat()方法进行数组的拼接
            console.log(res)
            this.setData({
              listArr:newArr
            })
            //当网络请求完成后，我们要自动的把下拉刷新的样式关闭掉，要不然不好看：
            wx.stopPullDownRefresh() 
        },
        complete:res=>{
             //无论网络请求是否成功，都要关闭loading样式：
             wx.hideLoading()
             wx.hideNavigationBarLoading()
        }
      })
  },
    /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.setData({
      //细节：其实我们下拉刷新后，应该先把页面清空，再获取新的数据：
      //只不过页面清空效果很快，肉眼看不太出来
      listArr:[]  
    })
    this.getData();
  },
   /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    console.log("触底啦");
    wx.showNavigationBarLoading();
    this.getData();
},

res.data是网络请求完成后获取到的数组：

let oldArr = this.data.listArr;

let newArr = oldArr.concat(res.data)//调用concat()方法进行数组的拼接

console.log(res)

this.setData({

listArr:newArr

})

3、wx.request的其他参数:

wx.request(Object object),默认是get请求

XML 复制代码 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
      this.getData();
  },

  getData(){
      wx.request({
        url:"https://api.thecatapi.com/v1/images/search",
        method:"get",
        data:{
          limit:2 //如果是字符串就要写上双引号
        },
        success:res=>{
          console.log(res);
        }
      })
  },

post请求：

XML 复制代码 
  onLoad(options) {
      this.getData();
  },

  getData(){
      wx.request({
        url:"http://jsonplaceholder.typicode.com/posts",
        header:{"content-type":"application/json","token":123456},
        method:"post",
        data:{
          name:"zhangfei飞",
          age:18
        },
        success:res=>{
          console.log(res);
        }
      })
  },
案例1：POST请求获取

wxml:

XML 复制代码 
<view class="out">
  <veiw class="from">
    <input type= "text" model:value="{{iptValue}}" placeholder="请输入用户名" bindconfirm="onSubmit"/> <!--bindconfirm:回车触发此事件-->
  </veiw>
  <view class="row" wx:for="{{listArr}}" wx:key="_id">
      <view class="username">
          用户名：{{item.title}}
      </view>
      <view class="time">时间：{{item.posttime}}</view>
  </view>
  
</view>

wxss：

XML 复制代码 
.out{
  padding:30rpx;
  border: red solid 9rpx;
}
.out .row{
  padding:15rpx;
  border-bottom: 2px solid #ccc;
}

.js:

XML 复制代码 
Page({

  /**
   * 页面的初始数据
   */
  data: {
    iptValue:""
  },

  onSubmit(){
    console.log(this.data.iptValue);
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
      this.getData();
  },

  getData(){
      wx.request({
        url:" https://tea.qingnian8.com/demoArt/get",
        method:"POST",
        header:{"Content-Type":"application/json"},
        data:{
          num:3,
          page:1
        },
        success:res=>{
          console.log(res);
        }
      })
  },
案例2： POST 请求新增

.js:

XML 复制代码 
Page({

  /**
   * 页面的初始数据
   */
  data: {
    iptValue:"",
    listArr:[]
  },

  onSubmit(){
    console.log(this.data.iptValue);
    wx.request({
      url:"https://tea.qingnian8.com/demoArt/add",
      method:"POST",
      header:{"Content-Type":"application/json"},
      data:{
        title:this.data.iptValue //插入的数据
      },
      success:res=>{
        console.log(res);
        if(res.data.errCode!=0){
          return; //如果插入数据失败，会直接返回
        }
        this.setData({
          iptValue:""//清空输入框
        })
        this.getData();//重新发起请求获取数据
        wx.showToast({
          title: res.data.errMsg 
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
      this.getData();
  },

  getData(){
      wx.request({
        url:" https://tea.qingnian8.com/demoArt/get",
        method:"POST",
        header:{"Content-Type":"application/json"},
        data:{
          num:3,//取三条数据
          page:1
        },
        success:res=>{
          console.log(res);
          this.setData({
            listArr:res.data.data
          })
        }
      })
  },

wxml:

XML 复制代码 
<view class="out">
  <veiw class="from">
    <input type= "text" model:value="{{iptValue}}" placeholder="请输入用户名" bindconfirm="onSubmit" style="padding: 20rpx;background:#eee;margin-bottom: 20rpx;"/> <!--bindconfirm:回车触发此事件-->
  </veiw>
  <view class="row" wx:for="{{listArr}}" wx:key="_id">
      <view class="username">
          用户名：{{item.title}}
      </view>
      <view class="time">时间：{{item.posttime}}</view>
  </view>
  
</view>

wxss:

XML 复制代码 
.out{
  padding:30rpx;
  border: red solid 9rpx;
}
.out .row{
  padding:15rpx;
  border-bottom: 2px solid #ccc;
}

4、自定义组件Component

新建文件夹componens->新建文件夹Myheader->新建Component

注意：组件和pages同级：

​​​​​​​ ​​​​​​​

引入组件就像你写view标签是一样的

相关推荐
小马哥编程1 小时前
【微信小程序】报修管理
微信小程序·小程序
Json____2 小时前
学法减分交管12123模拟练习小程序源码前端和后端和搭建教程
前端·后端·学习·小程序·uni-app·学法减分·驾考题库
前端（从入门到入土）3 小时前
微信小程序自定义顶部导航栏（适配各种机型）
微信小程序·小程序
百事老饼干4 小时前
小程序入门到实战（二）-----基础知识部分1.0
小程序
qq_332783548 小时前
wx小程序turf.js判断点是否位于该多边形内部
小程序
放逐者-保持本心，方可放逐9 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
计算机-秋大田9 小时前
基于微信小程序的养老院管理系统的设计与实现，LW+源码+讲解
java·spring boot·微信小程序·小程序·vue
钰@12 小时前
小程序开发者工具的network选项卡中有某域名的接口请求，但是在charles中抓不到该接口
运维·服务器·小程序
尚学教辅学习资料13 小时前
基于微信小程序的电商平台+LW示例参考
java·微信小程序·小程序·毕业设计·springboot·电商平台
尘浮生13 小时前
Java项目实战II基于微信小程序的移动学习平台的设计与实现（开发文档+数据库+源码）
java·开发语言·数据库·spring boot·学习·微信小程序·小程序
热门推荐
01玄机平台应急响应—webshell查杀02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04液体神经网络：LNN是个啥概念？05文件或文件夹名称中有空格如何批量去除06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07新版微信小程序获取用户手机号08优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测102024最新 无人机 数据集（不定期更新）