Uniapp笔记(三)uniapp语法2

一、本节项目预备知识

1、组件生命周期

1.1、什么是生命周期

生命周期(Life Cycle)是指一个对象从创建-->运行-->销毁的整个阶段,强调的是一个时间段

我们可以把每个uniapp应用运行的过程,也概括为生命周期

  • 小程序的启动,表示生命周期的开发

  • 小程序的关闭,表示生命周期的结束

1.2、生命周期的分类

在uniapp中,生命周期分为两类,分别是

  • 应用生命周期

    特指uniapp应用从启动->运行->销毁的过程。

  • 页面生命周期

    特指uniapp中,每个页面从加载->渲染->销毁的过程

其中,页面的生命周期范围较小,应用程序的生命周期范围较大

1.3、什么是生命周期函数

生命周期函数:是由uniapp框架提供的内置函数,会伴随着生命周期,自动按次序执行。

生命周期函数的作用:允许程序员在特定的时间点,执行某些特定的操作,例如:页面刚加载的时候,可以在onLoad生命周期函数中初始化页面的数据。

注意:生命周期强调的是时间段,生命周期函数强调的是时间点。

1.4、应用生命周期函数

uniapp的应用生命周期函数需要在App.vue中声明

函数名说明
onLaunchuni-app 初始化完成时触发(全局只触发一次)
onShowuni-app 启动,或从后台进入前台显示
onHideuni-app 从前台进入后台
onErroruni-app 报错时触发
onPageNotFound页面不存在监听函数
onThemeChange监听系统主题变化
export default {onLaunch: function() {console.log('App Launch')},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')}
}
1.6、页面声明周期函数
函数名说明
onLoad监听页面加载,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参)
onShow监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
onReady监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
onHide监听页面隐藏
onUnload监听页面卸载
onResize监听窗口尺寸变化
onPullDownRefresh监听用户下拉动作,一般用于下拉刷新,参考示例
onReachBottom页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项
onTabItemTap点击 tab 时触发,参数为Object,具体见下方注意事项
onShareAppMessage用户点击右上角分享
onPageScroll监听页面滚动,参数为Object
onNavigationBarButtonTap监听原生标题栏按钮点击事件,参数为Object
onBackPress监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:onBackPress 详解。支付宝小程序只有真机能触发,只能监听非navigateBack引起的返回,不可阻止默认行为。
onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件(pages.json 中的 searchInput 配置 disabled 为 true 时才会触发)
onShareTimeline监听用户点击右上角转发到朋友圈
onAddToFavorites监听用户点击右上角收藏

2、页面导航

2.1、什么是页面导航

页面导航就是页面之间的相互跳转

2.2、实现页面导航的方式
  • 声明式导航:navigator标签来进行跳转

  • 编程式导航:uniapp提供的跳转api来实现跳转

2.3、声明式导航
1)导航到tabBar页面

在使用<navigator>组件跳转到指定的tabBar页面时,需要指定url属性和open-type属性

  • url表示要跳转的页面地址,必须以/开头

  • open-type表示跳转的方式,必须是switchTab

<navigator url="/pages/home/index" open-type="switchTab">跳转主页
</navigator>
2)导航到应用内页面

在使用<navigator>组件跳转到指定的普通页面时,需要指定url属性和open-type属性

  • url表示要跳转的页面地址,必须以/开头

  • open-type表示跳转的方式,必须是navigate

<navigator url="/pages/list/index" open-type="navigate">跳转到info页面
</navigator>
3)后退导航

如果要后退到上一页或者多级页面,则需要指定open-type属性和delta属性

  • open-type的值必须是naviateBack,表示要进行后退导航

  • delta的值必须是数字,表示要后退的层次

<navigator delta="1" open-type="navigateBack">返回上一层
</navigator

重定向页面:redirect,跳转到指定页面,当前页面就会销毁,无法返回,只能首页按钮

2.4、编程式导航
1) 导航到 tabBar 页面

调用uni.switchTab(Object object)方法,可以跳转到tabBar页面,其中Object参数对象的属性如下

属性类型是否必须说明
urlstring类型需要跳转的tabBar页面的路径,路径后不能带参数
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

案例代码

//页面结构
<button type="primary" bindtap="goCategroy">跳转到分类页面</button>
//通过编程式导航,跳转到分类页面
goCategroy(){uni.switchTab({url: '/pages/category/category',})} 
2) 导航到应用内页面

调用uni.navigateTo(Object object)方法,可以跳转到应用内的页面,其中Object参数对象的属性列表如下:

属性类型是否必须说明
urlstring类型需要跳转的应用内页面的路径,路径后不能带参数
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)
//页面结构
<button type="primary" bindtap="goProductList">跳转商品列表页面</button>
//通过编程式导航,跳转到商品列表页面goProductList(){uni.navigateTo({url: '/pages/product/productlist',})}
3) 后退导航

调用uni.navigateBack(Object object)方法,可以返回上一页或者多级页面,其中Object参数对象可选的属性列表如下

属性类型是否必须说明
deltanumber返回的页面数,如果delta大于现有页面数,则返回到首页
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调
//页面结构
<button bindtap="gotoBack">后退</button>
//通过编程式导航gotoBack(){uni.navigateBack();}

3、导航传参

3.1、声明式导航传参

navigator组件的url属性用来指定将要跳转的页面的路径。同时,路径的后面还可以携带参数

  • 参数与路径之间使用?分隔

  • 参数键与参数值使用=相连

  • 不同参数用&分隔

代码如下所示

<navigator url="/pages/product/productlist?name=giles&age=38" open-type="navigate">跳转到购物页面</navigator>
3.2、编程式导航传参

调用uni.navigateTo(Object object)方法跳转页面时,也可以携带参数,代码如下

goProductList(){uni.navigateTo({url: '/pages/product/productlist?name=Giles&age=38',})}
3.3、接收导航参数

通过声明式导航传参或者编程式导航传参所携带的参数,可以直接在onLoad事件中直接获取到

onLoad: function (options) {}

二、商品列表

1、点击三级分类跳转到商品列表

<view class="cate-lv3-item" v-for="(subitem,subIndex) in item.children" :key="subIndex"@click="goGoodsList(subitem.cat_id)"><image :src="subitem.cat_icon" class="item3_img"></image><text>{{subitem.cat_name}}</text>
</view>

定义事件处理函数如下

goGoodsList(cid){uni.navigateTo({url:`/pages/products/productList?cid=${cid}`})
}

2、定义请求参数对象

我们要根据接口的要求,事先定义一个请求参数对象

data() {return {queryObj:{//查询的关键字query:'',//查询的分类idcid:'',//页面值pagenum:1,//每页显示多少条记录pagesize:10}}
}

将页面跳转时携带的参数,转存到queryObj对象中

onLoad(options) {this.queryObj.cid=options.cid
}

3、获取商品列表数据

在data中定义数据

data(){return{goodsList: [],total: 0,}
}

onLoad 生命周期函数中,调用 getGoodsList 方法获取商品列表数据:

onLoad(options) {this.queryObj.cid = options.cidthis.getProductList()
}

声明 getGoodsList 方法如下:

async getProductList() {let result = await this.$request({url: '/goods/search',data: this.queryObj})console.log(result.message.goods);this.goodsList = result.message.goodsthis.total = result.message.total
}

渲染列表结构

<view class="goods-list"><view class="goods-item" v-for="(item,index) in goodsList" :key="index"><view class="goods-item-left"><image :src="item.goods_small_logo||defaultPic" mode="widthFix" class="goods-pic"></image></view><view class="goods-item-right"><!-- 商品标题 --><view class="goods-name">{{item.goods_name}}</view><view class="goods-info-box"><!-- 商品价格 --><view class="goods-price">¥{{item.goods_price}}</view></view></view></view>
</view>

为了防止某些商品的图片不存在,需要在 data 中定义一个默认的图片

export default {data() {return{defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'}           }
}

并在页面渲染时按需使用:

<image src="{{item.goods_small_logo||defaultPic}}" class="goods-pic"></image>

样式

.goods-item {display: flex;padding-left: 10px 0px;border-bottom: 1px solid #f0f0f0;
}
.goods-item-left {margin-right: 5px;
}.goods-pic {width: 100px;height: 100px;display: block;
}
.goods-item-right {display: flex;flex-direction: column;justify-content: space-around;
}
.goods-name {font-size: 12px;
}
.goods-price {font-size: 16px;color: #cb603b;
}

4、上拉加载更多

onReachBottom 事件处理函数,用来监听页面的上拉触底行为

onReachBottom() {//让页码值自增1this.queryObj.pagenum+=1//重新获取列表数据this.getProductList()
},

改造 methods 中的 getProductList 函数,当列表数据请求成功之后,进行新旧数据的拼接处理:

async getProductList() {	let result = await this.$request({url: '/goods/search',data: this.queryObj})this.goodsList =[...this.goodsList,...result.message.goods]this.total = result.message.total
}

通过节流阀防止发起额外的请求

在 data 中定义 isloading 节流阀如下

data() {return {// 是否正在请求数据isloading: false}
}

修改 getProductList 方法,在请求数据前后,分别打开和关闭节流阀:

async getProductList() {//打开节流阀this.isloading = truelet result = await this.$request({url: '/goods/search',data: this.queryObj})//关闭节流阀this.isloading = falsethis.goodsList =[...this.goodsList,...result.message.goods]this.total = result.message.total
}

onReachBottom 触底事件处理函数中,根据节流阀的状态,来决定是否发起请求:

// 触底的事件
onReachBottom() {// 判断是否正在请求其它数据,如果是,则不发起额外的请求if (this.isloading) return//让页码值自增1this.queryObj.pagenum+=1//重新获取列表数据this.getProductList()
}

判断加载是否完毕

onReachBottom() {if(this.queryObj.pagenum*this.queryObj.pagesize>=this.total){uni.showToast({title:'加载完毕'})}if(this.isloading) return;this.queryObj.pagenum+=1this.getProductList()
},

5、下拉刷新

首先在在page.json配置文件中,开启下来刷新功能

{"path" : "pages/products/productList","style" :                                                                                    {"navigationBarTitleText": "","enablePullDownRefresh": true}}

下拉刷新

onPullDownRefresh() {this.queryObj.pagenum=1this.getProductList()uni.stopPullDownRefresh()
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2781. 最长合法子字符串的长度

2781. 最长合法子字符串的长度 C代码&#xff1a;滑动窗口、哈希表 typedef struct{char* str;UT_hash_handle hh; } HashTable;HashTable* head;void AddToHash(char* str) {HashTable* out (HashTable*)malloc(sizeof(HashTable));out->str str;HASH_ADD_STR(head, str…

ThinkPHP 文件上传 fileSystem 扩展的使用

ThinkPHP 文件上传 ThinkPHP 文件上传 扩展 filesystem一、安装 FileSystem 扩展二、认识 filesystem 配置文件 config/filesystem.php三、上传验证&#xff08;涉及到验证器的知识点&#xff09;四、文件上传demo ThinkPHP 文件上传 扩展 filesystem ThinkPHP 为我们 提供了 …

【前端】JQ实时显示当前日期、时间、星期

效果图 html <span id"time"></span> JS // 实时显示当前时间 $(document).ready(function () {function showTime() {var today new Date;var y today.getFullYear();var M today.getMonth() 1;var d today.getDate();var w today.getDay();va…

计算机行业前景展望

计算机行业的前景展望是非常广阔的。随着技术的快速发展和应用领域的不断拓展&#xff0c;计算机行业将继续扮演着重要的角色。以下是一些计算机行业前景的关键方面&#xff1a; 人工智能&#xff08;AI&#xff09;和机器学习&#xff08;ML&#xff09;&#xff1a;AI和ML技术…

WPF 数据验证

WPF提供了能与数据绑定系统紧密协作的验证功能。提供了两种方法用于捕获非法值&#xff1a; 1、可在数据对象中引发错误。 可以在设置属性时抛出异常&#xff0c;通常WPF会忽略所有在设置属性时抛出的异常&#xff0c;但可以进行配置&#xff0c;从而显示更有帮助的可视化指示…

Android 音频框架 基于android 12

文章目录 前言音频服务audioserver音频数据链路hal 提供什么样的作用 前言 Android 的音频是一个相当复杂的部分。从应用到框架、hal、kernel、最后到硬件&#xff0c;每个部分的知识点都相当的多。而android 这部分代码在版本之间改动很大、其中充斥着各种workaround的处理&a…

解释 Git 的基本概念和使用方式。

Git是一个版本控制工具&#xff0c;可以追踪文件的修改历史和不同版本&#xff0c;以便于团队合作和项目的管理。 下面是Git的一些基本概念和使用方式&#xff1a; 仓库&#xff08;Repository&#xff09;&#xff1a;Git中存储代码的地方&#xff0c;包含了代码的历史记录和…

《论文阅读18》JoKDNet

一、论文 研究领域&#xff1a;用于大尺度室外TLS点云配准的联合关键点检测和特征表达网络论文&#xff1a;JoKDNet: A joint keypoint detection and description network for large-scale outdoor TLS point clouds registration International Journal of Applied Earth Ob…

docker-compose安装node-exporter, prometheus, grafana

基础 exporter提供监控数据 prometheus拉取监控数据 grafana可视化监控数据 准备 全部操作在/root/mypromethus中执行 node_exporter docker-compose -f node-exporter.yaml up -d # web访问&#xff0c;查看node_exporter采集到的数据 http://192.168.1.102:9101/metrics…

Delphi 11.3 FMX 多设备平台中使用 TGrid 实现类似 TDBGrid 的效果

Delphi Firemonkey 中 TDBGrid 这个控件已经没有了。如何实现类似这个效果呢。其实可以用TGrid 来实现。以下用 11.3 来讲解。 查询里面用到的 connection 和 query 等控件那些一般的数据库用法&#xff0c;就不做过多描述了。请参考其他资料。 方法一.通过界面配置来实现 在…

Codeforces Round 888 (Div. 3)

Codeforces Round 888 (Div. 3) A. Escalator Conversations 思路&#xff1a;暴力枚举 我们可以发现要让他们能相同高度首先你们之间的差值必须是k的倍数并且这个倍数必须小于m并且不能存在相同高度 #include<bits/stdc.h> using namespace std; #define int long lo…

js vue 鼠标悬停

let hoverTimeOut nullitem.on("mouseover", async (e) > {if (hoverTimeOutnull) {hoverTimeOut setTimeout(() > {hoverTimeOut null;//业务逻辑messageBase(info.code, position);}, 1000); }});item.on("mouseout", (e) > {console.log(离开…

unity 物体至视图中心以及新对象创建位置

如果游戏对象不在视野中心或在视野之外&#xff0c; 一种方法是双击Hierarchy中的对象名称 另一种是选中后按F 新建物体时对象的位置不是在坐标原点&#xff0c;而是在当前屏幕的中心

将 Llama2 中文模型接入 FastGPT,再将 FastGPT 接入任意 GPT 套壳应用,真刺激!

FastGPT 是一个基于 LLM 大语言模型的知识库问答系统&#xff0c;提供开箱即用的数据处理、模型调用等能力。同时可以通过 Flow 可视化进行工作流编排&#xff0c;从而实现复杂的问答场景&#xff01; Llama2 是Facebook 母公司 Meta 发布的开源可商用大模型&#xff0c;国内的…

深度学习(前馈神经网络)知识点总结

用于个人知识点回顾&#xff0c;非详细教程 1.梯度下降 前向传播 特征输入—>线性函数—>激活函数—>输出 反向传播 根据损失函数反向传播&#xff0c;计算梯度更新参数 2.激活函数(activate function) 什么是激活函数&#xff1f; 在神经网络前向传播中&#x…

3D风速仪 Gill Instruments Limited_R3-50 R3-100 and R3A -100 Manual

R3测量超声波脉冲从上部换能器到相反的下部换能器所花费的时间&#xff0c;并将其与脉冲从下部换能器到上部换能器的时间进行比较。 同样&#xff0c;在其他上下换能器之间比较时间。 如图1所示&#xff0c;每对换能器之间沿轴的空气速度可以从每条轴上的飞行次数计算出来。 …

django的简易的图书管理系统jsp书店进销存源代码MySQL

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 django的简易的图书管理系统 系统有1权限&#xff1a…

【LeetCode-中等题】148. 排序链表

文章目录 题目方法一&#xff1a;集合排序&#xff08;核心是内部的排序&#xff09;方法二&#xff1a; 优先队列&#xff08;核心也是内部的排序&#xff09;方法三&#xff1a;归并排序&#xff08;带递归&#xff09; 从上往下方法四&#xff1a;归并排序&#xff08;省去递…

桌面网络存储迎来新浪潮!龙蜥社区联合龙芯首发优龙桌面网络存储一体机方案

2023 年 8 月 19 日&#xff0c;龙蜥社区合作伙伴单位南京龙众创芯电子科技有限公司(以下简称“龙众创芯“)与龙蜥社区理事单位龙芯中科(武汉)技术有限公司&#xff08;以下简称“龙芯”&#xff09;&#xff0c;联合可道云、上海七朵信息等多家生态伙伴&#xff0c;以及龙芯开…

IntelliJ Idea开发Vue遇到的几个问题

IntelliJ Idea开发Vue遇到的几个问题 确保 idea已安装插件【Vue.js】 问题1&#xff1a;ts方法错误 或 提示导入 import xxx.vue标红 解决办法&#xff1a;在 env.d.ts中添加以下代码(若无此文件&#xff0c;重新创建)&#xff1a; /* eslint-disable */ declare module *.…