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

1、下拉刷新获取数据enablePullDownRefresh

开启下拉刷新：

enablePullDownRefreshbooleanfalse是否开启当前页面下拉刷新

案例： 

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

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

{
  "usingComponents": {},
  "enablePullDownRefresh":true,
  "backgroundColor": "#6D9AD6"
 
}

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

// 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):开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
   /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
     //细节：其实我们下拉刷新后，应该先把页面清空，再获取新的数据：
     //只不过页面清空效果很快，肉眼看不太出来
    this.setData({
      listArr:[]  
    })
    this.getData();
  },

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

                                

  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()
        }
      })
  },

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

successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数（调用成功、失败都会执行）
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文件中配置：

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

  },
// 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请求

  /**
   * 生命周期函数--监听页面加载
   */
  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请求：

  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请求获取
  • 接口URL:POST    https://tea.qingnian8.com/demoArt/get
  • Content-Type:  application/json

                                 

wxml:


<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：

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

 .js:

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 请求新增
  • 接口URL:POST        https://tea.qingnian8.com/demoArt/add
  • Content-Type:           application/json

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/460241.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

FPGA高端项目：FPGA基于GS2971+GS2972架构的SDI视频收发+OSD动态字符叠加，提供1套工程源码和技术支持

FPGA高端项目：FPGA基于GS2971+GS2972架构的SDI视频收发+OSD动态字符叠加，提供1套工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐本博已有的 SDI 编解码方案本方案的SDI接收发送本方案的SDI接收图像缩放应用本方案的SDI接收纯verilog图像缩放纯verilog多路视频拼接应用本方案的SDI接收HLS图像缩放HLS多路视频拼接应用本方案的SDI接收HLS多路视频融合叠加应用本方案的S…
阅读更多...
sqllab第二十二关通关笔记

sqllab第二十二关通关笔记

知识点&#xff1a; cookie注入报错注入 直接抓取对应的数据包&#xff0c;发现还是一个cookie注入 参数值被base64加密了 测试这里使用什么手段读取输入 构造payload:uname1 base64加密&#xff1a;MSc 出现了hacker的页面&#xff0c;说明信息错误但是单引号没起作用 使…
阅读更多...
《ARM汇编与逆向工程》读书心得与实战体验

《ARM汇编与逆向工程》读书心得与实战体验

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 &#x1f4d8; 一、引言 &#x1f4dd; 二、…
阅读更多...
Livox激光雷达 mid360 跑 fastlio2 - 流程记录

Livox激光雷达 mid360 跑 fastlio2 - 流程记录

mid360 跑 fastlio2 一、配置 mid360 环境1.1、主机配置静态IP为192.168.1.501.2、Livox-SDK21.3、Livox_ros_driver2二、Fast-lio22.1、下载源码2.2、修改代码2.3、编译、运行 一、配置 mid360 环境 1.1、主机配置静态IP为192.168.1.50 1.2、Livox-SDK2 安装工具 sudo apt…
阅读更多...
【Unity+Vuforia】AR 发布安卓的设置

【Unity+Vuforia】AR 发布安卓的设置

Player Settings > Resolution and Presentation > Default Orientation portrait Player Settings > Other Settings > Auto Graphics API 取消勾选 Player Settings > Other Settings > Graphics APIs 选择OpenGLES3删除其他的 Player Settings…
阅读更多...
Python QT 之PySide6简单入门

Python QT 之PySide6简单入门

目录 1.开发环境配置 1.1 下载PySide6 2.2 配置pycharm相关快捷方式 PySide6_Designer - QT Designer 设计UI PySide6_UIC - 将QT Designer生成的UI文件转换为python文件 PySide6_RCC - 将RCC文件转换为python文件 2.第一个开发实例 2.1 QT desiger设计界面 2.2 将ui文…
阅读更多...
知名比特币质押协议项目Babylon联合创始人David将出席参加Hack.Summit()2024区块链开发者大会

知名比特币质押协议项目Babylon联合创始人David将出席参加Hack.Summit()2024区块链开发者大会

Babylon项目已确认将派遣其项目代表出席2024年在香港数码港举办的Hack.Summit()2024区块链开发者大会。作为比特币生态的领军项目&#xff0c;Babylon积极参与全球区块链领域的交流与合作&#xff0c;此次出席大会将为其提供一个展示项目进展、交流技术与创新思路的重要平台。B…
阅读更多...
信雅纳网络测试的二次开发集成：XOA（Xena Open-Source Automation）开源自动化测试

信雅纳网络测试的二次开发集成：XOA（Xena Open-Source Automation）开源自动化测试

目录 XOA是什么 XOA CLI XOA Python API ​XOA Python Test Suite/测试套件 XOA Converter Source Code XOA是什么 XOA&#xff08;Xena Open-Source Automation&#xff09;是一个开源的测试自动化框架&#xff0c;追求“高效、易用、灵活”的跨操作系统的开发框架。能…
阅读更多...
开启Safari手势支持

开启Safari手势支持

在使用Safari 的时候&#xff0c;大家有没有觉得不支持手势使用起来不是很方便&#xff0c; 触摸板只支持少量简单的手势&#xff0c;如缩放&#xff0c;滚动等。如果使用鼠标的用户&#xff0c;则完全无法使用手势。经过折腾研究&#xff0c;使用CirMenu应用可以完美解决这个要…
阅读更多...
SpringCloud Stream 消息驱动

SpringCloud Stream 消息驱动

一、前言 接下来是开展一系列的 SpringCloud 的学习之旅&#xff0c;从传统的模块之间调用&#xff0c;一步步的升级为 SpringCloud 模块之间的调用&#xff0c;此篇文章为第九篇&#xff0c;即介绍 Stream 消息驱动。 二、消息驱动概念 2.1 消息驱动是什么 官方定义 Spring …
阅读更多...
k8s helm 删除 tiller

k8s helm 删除 tiller

kuberneter 上面装了 helm 想卸载还并不是那么简单, 参考 stackoverflow 回复 kubectl get -n kube-system secrets,sa,clusterrolebinding -o name|grep tiller|xargs kubectl -n kube-system delete kubectl get all -n kube-system -l apphelm -o name|xargs kubectl dele…
阅读更多...
【数据结构】串的模式匹配（KMP+朴素模式匹配）

【数据结构】串的模式匹配（KMP+朴素模式匹配）

2.串的模式匹配 什么是字符串的模式匹配&#xff1f; 在主串中找到与模式串相同的子串&#xff0c;并返回其所在位置。 模式串&#xff1a;要匹配的一串。注&#xff1a;子串是主串的一部分&#xff0c;一定在主串中存在&#xff0c;但模式串不一定在主串中找得到。 2.1 朴素模…
阅读更多...
软件无线电系列——带通信号采样定理

软件无线电系列——带通信号采样定理

本节目录 一、带通信号采样定理 1、带通信号采样定理的定义 2、带通信号采样定理的证明本节内容 一、带通信号采样定理 1、带通信号采样定理的定义 Nyquist采样定理是对频谱分布在(0,fH)上的基带信号的采样分析的&#xff0c;如果信号的频谱分布在某一限定的频带(fL,fH)上&…
阅读更多...
Docker使用(四)Docker常见问题分析和解决收集整理

Docker使用(四)Docker常见问题分析和解决收集整理

Docker使用(四)Docker常见问题分析和解决收集整理 五、常见问题 1、 启动异常 【描述】&#xff1a; 【分析】&#xff1a;[rootlocalhost ~]# systemctl status docker 【解决】&#xff1a; &#xff08;1&#xff09;卸载后重新安装&#xff0c;不能解决这个问题。 …
阅读更多...
腾讯与字节跳动联合创立萨罗斯网络科技公司 深度整合游戏项目

腾讯与字节跳动联合创立萨罗斯网络科技公司 深度整合游戏项目

易采游戏网3月15日消息&#xff1a;抖音集团已将其游戏部门的资产转交给腾讯公司管理&#xff0c;而该部门的员工亦将整体迁移至腾讯新成立的子公司。此举在业界引起了广泛的激烈探讨与深度关注。 据透露&#xff0c;由深圳引力工作室主导的S1手游项目和由江南独力工作室研发的…
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：List）

鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：List）

列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据&#xff0c;例如图片和文本。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。该组件内容区小于一屏时&#xff0c;默认没有回弹效果。…
阅读更多...
uniapp uview 头像裁剪组件的问题

uniapp uview 头像裁剪组件的问题

当切换页面频繁进出头像裁剪组件u-avatar-cropper.vue 获取同一个设备信息时会出现两种不同的高度具体如下 导致 头像裁剪页面高度出现问题&#xff0c;下方按钮被canvas组件遮盖了 解决方法 在进入这个页面前的一个页面做如下代码操作 直接将设备信息提前获取&#xff0c;保…
阅读更多...
【论文翻译】UP-DETR—Unsupervised Pre-training for Detection Transformers

【论文翻译】UP-DETR—Unsupervised Pre-training for Detection Transformers

0.论文摘要 摘要——通过Transformer model编码器——解码器架构&#xff0c;用于目标检测的检测Transformer model&#xff08;DETR&#xff09;达到了与Faster R-CNN相比具有竞争力的性能。然而&#xff0c;使用scratch transformers训练&#xff0c;DETR需要大规模的训练数…
阅读更多...
android seekbar thumb 上添加进度值并居中

android seekbar thumb 上添加进度值并居中

环境&#xff1a;android studio 、java 项目需要在进度条的滑块上显示进度值并居中&#xff0c; UI设计图&#xff1a; 代码实现效果图&#xff1a; 浅色模式&#xff1a; 深色模式&#xff1a; 由于一开始没有自定义seekbar&#xff0c; 使用源码Seekar&#xff0c; 滑块要…
阅读更多...
【四 （4）数据可视化之 Ploty Express常用图表及代码实现 】

【四 （4）数据可视化之 Ploty Express常用图表及代码实现 】

目录 文章导航一、介绍二、安装Plotly Express三、导入Plotly Express四、占比类图表1、饼图2、环形图3、堆叠条形图4、百分比堆叠条形图 五、比较排序类1、条形图2、漏斗图3、面积漏斗图 六、趋势类图表1、折线图2、多图例折线图3、分列折线图4、面积图5、多图例面积图 七、频…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站