做易拉宝的网站,网站开发团队成员介绍,免费空间搭建免费小说网站,玉环市建设工程检测中心网站一、本节项目预备知识
1、组件生命周期
1.1、什么是生命周期
生命周期(Life Cycle)是指一个对象从创建--运行--销毁的整个阶段#xff0c;强调的是一个时间段
我们可以把每个uniapp应用运行的过程#xff0c;也概括为生命周期 小程序的启动#xff0c;表示生命周…一、本节项目预备知识
1、组件生命周期
1.1、什么是生命周期
生命周期(Life Cycle)是指一个对象从创建--运行--销毁的整个阶段强调的是一个时间段
我们可以把每个uniapp应用运行的过程也概括为生命周期 小程序的启动表示生命周期的开发 小程序的关闭表示生命周期的结束
1.2、生命周期的分类
在uniapp中生命周期分为两类分别是 应用生命周期 特指uniapp应用从启动-运行-销毁的过程。 页面生命周期 特指uniapp中每个页面从加载-渲染-销毁的过程
其中页面的生命周期范围较小应用程序的生命周期范围较大
1.3、什么是生命周期函数
生命周期函数是由uniapp框架提供的内置函数会伴随着生命周期自动按次序执行。
生命周期函数的作用允许程序员在特定的时间点执行某些特定的操作例如页面刚加载的时候可以在onLoad生命周期函数中初始化页面的数据。
注意生命周期强调的是时间段生命周期函数强调的是时间点。
1.4、应用生命周期函数
uniapp的应用生命周期函数需要在App.vue中声明
函数名说明onLaunch当uni-app 初始化完成时触发全局只触发一次onShow当 uni-app 启动或从后台进入前台显示onHide当 uni-app 从前台进入后台onError当 uni-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监听页面滚动参数为ObjectonNavigationBarButtonTap监听原生标题栏按钮点击事件参数为ObjectonBackPress监听页面返回返回 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-typeswitchTab跳转主页
/navigator
2导航到应用内页面
在使用navigator组件跳转到指定的普通页面时需要指定url属性和open-type属性 url表示要跳转的页面地址必须以/开头 open-type表示跳转的方式必须是navigate
navigator url/pages/list/index open-typenavigate跳转到info页面
/navigator
3后退导航
如果要后退到上一页或者多级页面则需要指定open-type属性和delta属性 open-type的值必须是naviateBack,表示要进行后退导航 delta的值必须是数字表示要后退的层次
navigator delta1 open-typenavigateBack返回上一层
/navigator
重定向页面:redirect跳转到指定页面当前页面就会销毁无法返回只能首页按钮
2.4、编程式导航
1) 导航到 tabBar 页面
调用uni.switchTab(Object object)方法可以跳转到tabBar页面其中Object参数对象的属性如下
属性类型是否必须说明urlstring类型需要跳转的tabBar页面的路径路径后不能带参数successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数(调用成功、失败都会执行)
案例代码
//页面结构
button typeprimary bindtapgoCategroy跳转到分类页面/button
//通过编程式导航跳转到分类页面
goCategroy(){uni.switchTab({url: /pages/category/category,})}
2) 导航到应用内页面
调用uni.navigateTo(Object object)方法可以跳转到应用内的页面其中Object参数对象的属性列表如下
属性类型是否必须说明urlstring类型需要跳转的应用内页面的路径路径后不能带参数successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数(调用成功、失败都会执行)
//页面结构
button typeprimary bindtapgoProductList跳转商品列表页面/button
//通过编程式导航跳转到商品列表页面goProductList(){uni.navigateTo({url: /pages/product/productlist,})}
3) 后退导航
调用uni.navigateBack(Object object)方法可以返回上一页或者多级页面其中Object参数对象可选的属性列表如下
属性类型是否必须说明deltanumber否返回的页面数如果delta大于现有页面数则返回到首页successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数(调
//页面结构
button bindtapgotoBack后退/button
//通过编程式导航gotoBack(){uni.navigateBack();}
3、导航传参
3.1、声明式导航传参
navigator组件的url属性用来指定将要跳转的页面的路径。同时路径的后面还可以携带参数 参数与路径之间使用?分隔 参数键与参数值使用相连 不同参数用分隔
代码如下所示
navigator url/pages/product/productlist?namegilesage38 open-typenavigate跳转到购物页面/navigator
3.2、编程式导航传参
调用uni.navigateTo(Object object)方法跳转页面时也可以携带参数代码如下
goProductList(){uni.navigateTo({url: /pages/product/productlist?nameGilesage38,})}
3.3、接收导航参数
通过声明式导航传参或者编程式导航传参所携带的参数可以直接在onLoad事件中直接获取到
onLoad: function (options) {}
二、商品列表
1、点击三级分类跳转到商品列表
view classcate-lv3-item v-for(subitem,subIndex) in item.children :keysubIndexclickgoGoodsList(subitem.cat_id)image :srcsubitem.cat_icon classitem3_img/imagetext{{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.cidoptions.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 classgoods-listview classgoods-item v-for(item,index) in goodsList :keyindexview classgoods-item-leftimage :srcitem.goods_small_logo||defaultPic modewidthFix classgoods-pic/image/viewview classgoods-item-right!-- 商品标题 --view classgoods-name{{item.goods_name}}/viewview classgoods-info-box!-- 商品价格 --view classgoods-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}} classgoods-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.pagenum1//重新获取列表数据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.pagenum1//重新获取列表数据this.getProductList()
}
判断加载是否完毕
onReachBottom() {if(this.queryObj.pagenum*this.queryObj.pagesizethis.total){uni.showToast({title:加载完毕})}if(this.isloading) return;this.queryObj.pagenum1this.getProductList()
},
5、下拉刷新
首先在在page.json配置文件中开启下来刷新功能
{path : pages/products/productList,style : {navigationBarTitleText: ,enablePullDownRefresh: true}}
下拉刷新
onPullDownRefresh() {this.queryObj.pagenum1this.getProductList()uni.stopPullDownRefresh()
}
