首页 > 其他分享 >uniapp

uniapp

时间:2024-11-01 21:11:18浏览次数:3  
标签:onLoad uniapp tab 跳转 uni 导航 页面

常用组件
1、view:相当于div
2、text:相当于span
3、scroll-view:滚动区域,超过该组件区域的可滑动
4、swiper:滑块视图容器,用于轮播
5、image:图片
6、button:按钮
7、input:输入框
8、switch:开关

路由跳转
navigate
url:跳转页面
open-type:跳转方式

生命周期
onLoad 页面加载,数据已加载
使用前先引入
import {onLoad} from "@dcloudio/uni-app"
onLoad值是路由传值

onReady 页面加载完成

onShow 进入页面
onHide 页面离开

onUnload 页面卸载 配合navigator跳转方式reLaunch使用

App生命周期 app生命周期优先
onLaunch 第一次进入应用
onShow 进入应用
onHide 离开应用

pages.json配置
navigationBarBackgroundColor:导航栏颜色
navigationBarTitleText:导航栏标题文字
navigationStyle:导航栏样式
enablePullDownRefresh:下拉刷新

tabBar 导航菜单
color:tab上的文字默认颜色
selectedColor:tab上的文字选中时的颜色
backgroundColor:tab背景色

List:
pagePath:跳转页面路径
iconPath:图片路径
selectedIconPath:选中时的图片路径

安装自动导入配置插件
npm install unplugin-auto-import

界面
下拉刷新
uni.pullDownRefresh()
uni.startPullDownRefresh()
uni.stopPullDownRefresh()

页面跳转
uni.navigateTo({url:""}) //不能跳转tabBar页面
使用uni.reLaunch()

uni.navigateBack() //关闭当前页面,返回上一页面或多级页面
uni.setStorage() //数据缓存
uni.getStorage()
uni.setStorageSync()
uni.getStorageSync()
uni.removeStorageSync()

网络请求
uni.request()

标签:onLoad,uniapp,tab,跳转,uni,导航,页面
From: https://www.cnblogs.com/ypzgmz/p/18518914

相关文章