小程序day03

news2025/2/23 9:45:59

目标

页面导航

声明式导航

1.导航到tabBar页面

2.导航到非tabbar页面

3.后退导航 

编程式导航

1.导航到tabBar页面

 2.导航到非tabBar页面

 3.后退导航

导航传参

1.声明式导航传参

2.编程式导航传参

3.在onLoad中接收导航参数

页面事件

下拉刷新

 

 

这个可以获取完数据之后再停止效果. 

 上拉触底

 

上拉触底案例

 

可以看见的是得到新数据之后是将新数据和旧数据拼接在一起再渲染在页面上的.

 

生命周期

 

 

WXS脚本

 

 

 与js比较

 

案例-本地生活(列表页面)

实现效果

在app.json加上一个“pages/shoplist/shoplist”的路径创建新的页面。

 然后改造主页面的九宫格的每一个的view标签变成navigator标签，然后修改一下url并且传递两个参数。以下是实现效果图。

动态设置页面标题 

使用提供的api在固定的生命周期里面进行渲染. 

 在shoplist的生命周期函数里面，接收传过来的数据只能是onLoad()，所以要先在data里面复制一份，再在onReady里面使用。

获取并渲染商铺列表数据

获取数据

 在js文件里面定义这样一个函数，在onLoad里面调用，函数里要对data的数据进行合并更新。

  getShopList(){
    wx.showLoading({
      title: '数据加载中...',
    })
    wx.request({
      url: `https://applet-base-api-t.itheima.net/categories/${this.data.query.id}/shops`, 
      method: 'GET',
      data:{
        _page:this.data.page,
        _limit:this.data.pageSize
      },success:(res)=>{
        this.setData({
          shopList:[...this.data.shopList,...res.data],
          total:res.header['X-Total-Count']-0
        })
      },complete:()=>{
        wx.hideLoading()
      }
    })
  },

UI渲染

<view class="shop-item" wx:for="{{shopList}}" wx:key="id">
<view class="thumb">
<image src="{{item.images[0]}}" mode=""/>
</view>
<view class="info">
<text class="shop-title">{{item.name}}</text>
<text>电话:{{item.phone}}</text>
<text>地址:{{item.address}}</text>
<text>营业时间:{{item.businessHours}}</text>
</view>
</view>
/* pages/shoplist/shoplist.wxss */
.shop-item{
  display:flex;
  padding: 15rpx ;
  border: 1rpx solid #efefef;
  margin: 15rpx;
  border-radius: 8rpx; 
  box-shadow: 1rpx 1rpx 15rpx #ddd;
}
.thumb image{
  width: 250rpx;
  height: 250rpx;
  display: flex;
  margin-right: 15rpx;
}
.info{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 24rpx;
}
.shop-title{
  font-weight: bold;

}

效果如图

有边距,有布局，有圆角，有阴影,有加粗。

初步实现上拉加载效果

这里先是设置上拉触底的距离，然后页码值要在上拉加载后加1，然后再调用分页查询获取新数据.

然后是要用一个新字段实现节流效果。

// pages/shoplist/shoplist.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    query:{},
    shopList:[],
    page:1 ,
    pageSize:10,
    total:0,
    isLoading:false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      query:options
    })
    this.getShopList()
  }, 
  getShopList(){
    this.setData({
      isLoading:true
    })
    wx.showLoading({
      title: '数据加载中...',
    })
    wx.request({
      url: `https://applet-base-api-t.itheima.net/categories/${this.data.query.id}/shops`, 
      method: 'GET',
      data:{
        _page:this.data.page,
        _limit:this.data.pageSize
      },success:(res)=>{
        this.setData({
          shopList:[...this.data.shopList,...res.data],
          total:res.header['X-Total-Count']-0
        })
      },complete:()=>{
        wx.hideLoading()
        this.setData({
          isLoading:false
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {  
    wx.setNavigationBarTitle({
      title: this.data.query.title
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if(this.data.isLoading) return
    this.setData({
      page:this.data.page+1
    })
    this.getShopList()
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

判断数据是否加载完成

 按照上面加载数据的逻辑，一直上拉加载的话是会一直请求下一页的数据的。但是数据就那么多,也不可能一直加载. 再一直请求都是没有新数据。

没有消息时显示提示框提示没有新的消息。 

 如果判断数据加载完了就不再请求并弹窗提示

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if(this.data.page*this.data.pageSize>=this.data.total){
      //证明没有下一页数据
      return  wx.showToast({
        title: '数据加载完毕!',
        icon: 'none'
      })
    }
    if(this.data.isLoading) return
    this.setData({
      page:this.data.page+1
    })
    this.getShopList()
  },

开启下拉刷新

在配置文件里面进行开启，并配置背景色灰色和小圆点效果.

  "enablePullDownRefresh": true,
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "dark"

效果图如下 

在下拉刷新时需要对关键数据进行重置。

 /**
   * 页面相关事件处理函数--监听用户下拉动作
   */ 
  onPullDownRefresh() {
    //重置关键数据
    this.setData({
      page:1,
      shopList: [],
      total:0
    })
    //重新发起数据请求
    this.getShopList()
  },

  然后需要在请求数据之后关闭下拉刷新窗口,但是只应该在下拉刷新的数据请求时才进行关闭，上拉加载时就不需要。 

        wx.stopPullDownRefresh()

这里采用传递回调函数的方式，有传回调函数的就调用回调函数关闭下拉刷新窗口.

数据请求改成如下格式.

使用短路运算判断是否有回调函数

  getShopList(cb){
    this.setData({
      isLoading:true
    })
    wx.showLoading({
      title: '数据加载中...',
    })
    wx.request({
      url: `https://applet-base-api-t.itheima.net/categories/${this.data.query.id}/shops`, 
      method: 'GET',
      data:{
        _page:this.data.page,
        _limit:this.data.pageSize
      },success:(res)=>{
        this.setData({
          shopList:[...this.data.shopList,...res.data],
          total:res.header['X-Total-Count']-0
        })
      },complete:()=>{
        wx.hideLoading()
        this.setData({
          isLoading:false
        })
        // wx.stopPullDownRefresh()
         cb&cb()
      }
    })
  },

然后在下拉刷新监听函数里面调用时用一个箭头函数进行关闭.

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */ 
  onPullDownRefresh() {
    //重置关键数据
    this.setData({
      page:1,
      shopList: [],
      total:0
    })
    //重新发起数据请求
    this.getShopList(()=>{
      wx.stopPullDownRefresh()
    })
  },

使用wxs处理手机号

处理完之后会使用减号进行分割

<view class="shop-item" wx:for="{{shopList}}" wx:key="id">
<view class="thumb">
<image src="{{item.images[0]}}" mode=""/>
</view>
<view class="info">
<text class="shop-title">{{item.name}}</text>
<text>电话:{{tools.splitPhone( item.phone)}}</text>
<text>地址:{{item.address}}</text>
<text>营业时间:{{item.businessHours}}</text>
</view>
</view>
<wxs src="../../utils/tools.wxs" module="tools"/>

 新建一个wxs脚本，并在页面上进行调用

function splitPhone(str){
  if(str.length!==11) return str

  var arr=str.split('')
  arr.splice(3,0,'-')
  arr.splice(8,0,'-')
 return arr.join('')
}
module.exports={
  splitPhone:splitPhone
}

总结

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

06、如何将对象数组里 obj 的 key 值变成动态的(即：每一个对象对应的 key 值都不同)

06、如何将对象数组里 obj 的 key 值变成动态的(即：每一个对象对应的 key 值都不同)

1、数据情况&#xff1a; 其一、从后端拿到的数据为&#xff1a; let arr [1,3,6,10,11,23,24] 其二、目标数据为&#xff1a; [{vlan_1: 1, value: 1}, {vlan_3: 3, value: 1}, {vlan_6: 6, value: 1}, {vlan_10: 10, value: 1}, {vlan_11: 11, value: 1}, {vlan_23: 23, v…
阅读更多...
java--深刻认识面向对象

java--深刻认识面向对象

1.面向对象编程有啥好处 万物皆对象 汽车的数据&#xff0c;找汽车对象处理 手机的数据&#xff0c;找手机对象处理 学生的数据&#xff0c;找学生对象处理 符合人类思维习惯&#xff0c;编程更简单、更直观 2.程序中的对象到底是啥 对象本质上是一种特殊的数据结构(具体…
阅读更多...
基于深度学习的目标检测算法 计算机竞赛

基于深度学习的目标检测算法 计算机竞赛

文章目录 1 简介2 目标检测概念3 目标分类、定位、检测示例4 传统目标检测5 两类目标检测算法5.1 相关研究5.1.1 选择性搜索5.1.2 OverFeat 5.2 基于区域提名的方法5.2.1 R-CNN5.2.2 SPP-net5.2.3 Fast R-CNN 5.3 端到端的方法YOLOSSD 6 人体检测结果7 最后 1 简介 &#x1f5…
阅读更多...
安卓应用开发环境

安卓应用开发环境

安卓应用开发环境 安卓应用开发环境安卓Studio下载安装安卓Gradle下载安装 安装&#xff06;构建问题Android Studio无法下载SDKSSH变体simple不支持设置端口cvc-complex-type.2.4.aFailed to find Build Tools revison 30.0.2Android Studio无法找到CMakeCMake was unable to …
阅读更多...
lang_process() (一）

lang_process() (一）

一、lang_process() 从现在开始介绍 lang_process()函数&#xff0c;是GNU ld&#xff08;GNU链接器&#xff09;的一个核心函数&#xff0c;负责执行链接过程中的各个关键操作。lang_process(void) 函数涵盖了整个链接过程中的各个关键步骤&#xff0c;包括符号解析、重定位、…
阅读更多...
Spring Boot Actuator 漏洞利用

Spring Boot Actuator 漏洞利用

文章目录 前言敏感信息泄露env 泄露配置信息trace 泄露用户请求信息mappings 泄露路由信息heapdump泄露堆栈信息 前言 spring对应两个版本&#xff0c;分别是Spring Boot 2.x和Spring Boot 1.x&#xff0c;因此后面漏洞利用的payload也会有所不同 敏感信息泄露 env 泄露配置信…
阅读更多...
【使用Python编写游戏辅助工具】第二篇：键盘监听的应用

【使用Python编写游戏辅助工具】第二篇：键盘监听的应用

前言 这里是【使用Python编写游戏辅助工具】的第二篇&#xff1a;键盘监听的应用。本文主要介绍使用Python实现事件监听功能。 键盘监听是指通过编程的方式监控用户在键盘上的按键操作。 在这里键盘监听的主要用途是&#xff1a; 监听我们按下的按键&#xff0c;如果按下了指…
阅读更多...
@Tag和@Operation标签失效问题。SpringDoc 2.2.0（OpenApi 3）和Spring Boot 3.1.1集成

@Tag和@Operation标签失效问题。SpringDoc 2.2.0（OpenApi 3）和Spring Boot 3.1.1集成

问题 Tag和Operation标签失效 但是Schema标签有效 pom依赖 <!-- 接口文档--><!--引入openapi支持--><dependency><groupId>org.springdoc</groupId><artifactId>springdoc-openapi-starter-webmvc-ui</artifactId><vers…
阅读更多...
最长回文子串-LeetCode5 动态规划

最长回文子串-LeetCode5 动态规划

由于基础还不是很牢固 一时间只能想到暴力的解法: 取遍每个子串 总数量nn-1n-2…1 O(n^2) 判断每个子串是否属于回文串 O(n) 故总时间复杂度为O(n^3) class Solution { public:string longestPalindrome(string s) { int max0;string ret;for(int i0;i<s.size();i)for(int…
阅读更多...
基于SSM+Vue的宠物用品电子商务平台设计与实现

基于SSM+Vue的宠物用品电子商务平台设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…
阅读更多...
金山文档轻维表之删除所有行记录

金山文档轻维表之删除所有行记录

目前脚本文档里面的只有删除行记录功能&#xff0c;但是需要指定ID值&#xff0c;不能实现批量删除&#xff0c;很多人反馈但是官方无回应&#xff0c;挺奇怪的 但是批量删除的需求我很需要&#xff0c;最后研究了一下&#xff0c;还是挺容易实现的 测试&#xff1a; 附上脚本…
阅读更多...
年终总结一定用得上！这8款AI制作PPT软件不容错过。

年终总结一定用得上！这8款AI制作PPT软件不容错过。

PPT&#xff08;PowerPoint&#xff09;已成为日常商务办公、教育和营销环境中广泛使用的一种呈现工具。年终总结时&#xff0c;使用PPT能清晰、直观地展示一年的工作成果&#xff0c;从而让团队成员或上级领导更好地了解并评估工作表现。 在过去&#xff0c;创建精美和引人入…
阅读更多...
[PHP]帮管客CRM客户管理系统 v5.1.0

[PHP]帮管客CRM客户管理系统 v5.1.0

帮管客CRM客户管理系统基于先进的CRM营销理念设计&#xff0c;集客户档案、销售记录、业务往来于一身&#xff0c;以凝聚客户关系、提升资源价值为核心&#xff0c;将潜在客户变为现实客户、从而提升销售量、提高用户的满意度&#xff0c;并增加企业竞争力。帮管客CRM是适用于中…
阅读更多...
Redis4 渐进式遍历/自定义客户端/持久化

Redis4 渐进式遍历/自定义客户端/持久化

1.渐进式遍历 1.keys *一次性把所有的key都获取到.但是存在一个问题,一旦数据过多,redis就会被阻塞住,就无暇顾及其他的命令,这样的影响很大. 2.那么就出现了渐进式遍历,可以做到既能获取所有的key,又不会阻塞服务器.渐进式不是一个命令把所有的key获取到,而是没执行一次命令只…
阅读更多...
MySQL的3种索引合并优化⭐️or到底能不能用索引?

MySQL的3种索引合并优化⭐️or到底能不能用索引?

MySQL的3种索引合并优化⭐️or到底能不能用索引? 前言 前文我们讨论过MySQL优化回表的多种方式&#xff1a;索引条件下推ICP、多范围读取MRR、覆盖索引等 这篇文章我们来聊聊MySQL提供的另一种优化回表的手段&#xff1a;index merge 索引合并 在阅读本文前&#xff0c;你…
阅读更多...
windows + Mingw32-make 编译 PoDoFo库，openssl， libjpeg， Msys2工具的使用

windows + Mingw32-make 编译 PoDoFo库，openssl， libjpeg， Msys2工具的使用

参考&#xff1a; https://blog.csdn.net/sspdfn/article/details/104244306 https://blog.csdn.net/yaoyuanyylyy/article/details/17436303 https://blog.csdn.net/wxlfreewind/article/details/106492253 前期进行了各种摸索&#xff0c;由于Podofo依赖库比较多&#xff0c…
阅读更多...
Android系统Launcher启动流程学习（一）init启动部分

Android系统Launcher启动流程学习（一）init启动部分

init进程学习&#xff1a; 文件路径system/core/init/init.cpp 解析init.rc配置文件&#xff0c;首先开启ServiceManager和MediaServer等关键进程init进程fork启动Zygote服务进程处理子进程的终止(signal方式)提供属性服务的功能 int main(int argc, char** argv) {//注释一…
阅读更多...
Problem I. Magic Potion--2018ICPC南京

Problem I. Magic Potion--2018ICPC南京

解析&#xff1a; 对于英雄跑一边二分图匹配&#xff0c;记录res1 再跑一边二分图匹配&#xff0c;记录res2 答案即为res1min&#xff08;k&#xff0c;res2&#xff09; #include<bits/stdc.h> using namespace std; int n,m,k; int g[510][510],match[510],st[510]; b…
阅读更多...
【Python全栈_公开课学习记录】

【Python全栈_公开课学习记录】

一、初识python (一).Python起源 Python创始人为吉多范罗苏姆&#xff08;荷兰&#xff09;&#xff0c;Python崇尚优美、清晰、简明的编辑风格。Python语言结构清晰简单、数据库丰富、运行成熟稳定&#xff0c;科学计算统计分析领先。目前广泛应用于云计算、Web开发、科学运算…
阅读更多...
BlockingQueue解析

BlockingQueue解析

BlockingQueue其实就是阻塞队列&#xff0c;是基于阻塞机制实现的线程安全的队列。 BlockingQueue不同于普通的Queue的区别主要是&#xff1a; 通过在入队和出队时进行加锁&#xff0c;保证了队列线程安全支持阻塞的入队和出队方法&#xff1a;当队列满时&#xff0c;会阻塞入…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023