目录
1 组件
1.1 导航栏
1.1.1 原生导航栏
为原生导航栏增加左侧右侧按钮或文字,在 app-plus
中添加配置
"app-plus": {
"titleNView": {
"titleSize": "26rpx",
"titleColor": "#393939",
"autoBackButton": true,
"splitLine": "undefined",
"thtleHeight": "40rpx",
"buttons": [{ // 右侧操作按钮样式定义,是以数组形式定义,可定义多个
"color": "#393939",
"text": "欢迎您,",
"fontSize": "20rpx",
"float":"right"
"type":"back"// 按钮类型
}]
}
}
1.1.2 自定义导航栏
原生导航栏无法满足需求时,使用 uni_modules 扩展插件 uni-nav-bar 或者 自定义导航栏
- 使用前需隐藏原生导航栏
"navigationStyle":"custom"
- 组成部分
- 左:一般为回退按钮,可添加文字
- 中:标题
- 右:按钮,文字
- 自定义导航栏样式上要设置成:固定
position: fixed;
、置于顶层z-index: 9999;
、有背景颜色
1.2 弹窗
1.2.1 原生弹窗
// 点击事件后
uni.showModal({
title: "提示",
content: "确认要提交吗?",
showCancel: true, // 有无取消按钮
success: function (res) {
if (res.confirm) {
console.log("点击了确定");
} else {
console.log("点击了取消");
}
},
});
1.2.2 自定义弹窗
- 弹窗结构:
- 标题
- 内容
- 按钮
- 弹窗设置
v-show:"isShow"
- 点击按钮出现弹窗,再点击弹窗消失:设置点击事件使
this.isShow = !this.isShow
- 点击其他区域弹窗消失:
- 该区域与其他区域为兄弟:其他区域设置点击事件使
this.isShow = false
- 该区域与其他区域为父子:父区域设点击事件,该区域设唯一标识 id,有时可用输入框
@blur
事件
- 该区域与其他区域为兄弟:其他区域设置点击事件使
<input id="show"/> //给该元素设唯一标识 id
showSelector:function(e){
if(e.target.id != "show") {
this.isShowSelector = false;
}
},
1.3 input
<input class="input" placeholder="请输入" v-model="name" type="number"/>
type="number"
只能输入数字type="password"
密码
export default {
data() {
return {
name: "",
};
},
};
1.4 swiper 滑动视图
- swiper 位置要固定,高度宽度均要设置
- swiper-item 高度若太长无法显示,需在其中加滚动视图 scroll-view,位置在滑动视图中绝对,或者设最大高度
<swiper class="swiper" @change="xxx">
<swiper-item class="swiper-item"></swiper-item>
<swiper-item class="swiper-item"></swiper-item>
<swiper-item class="swiper-item"></swiper-item>
</swiper>
1.5 scroll-view 滚动视图
- 记得要加上
scroll-x
scroll-y
否则不起作用
<scroll-view class="scroll-view" scroll-x></scroll-view>
<scroll-view class="scroll-view" scroll-y></scroll-view>
解决报错,Ignored attempt to cancel a touchmove event with cancelable=false
三种方法解决[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false
1.6 picker 选择
- value 为数值,初始选择
- range 为选择列表
<picker @change="doPickerChange" :value="index" :range="selectList" range-key="name">
<view>{{ selectList[index].name }}</view>
</picker>
doPickerChange: function(e) {
this.index = e.detail.value
},
- 设初值为"请选择",不过没有置灰
<picker @change="doPickerChange" :value="index" :range="selectList" range-key="name">
<view>{{ getSelect() }}</view>
</picker>
getSelect() {
if (this.index === null) {
return "请选择";
}
return this.selectList[this.index].name
}
2 API
2.1 路由与页面跳转
<navigator url="/pages/xxx/xxx"></navigator>
跳转标签,但是这种写法,其包裹的所有内容在点击的时候都会有阴影,像外边距的部分也有阴影uni.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用 uni.navigateBack 可以返回到原页面。uni.redirectTo(OBJECT)
关闭当前页面,跳转到应用内的某个页面。uni.reLaunch(OBJECT)
关闭所有页面,打开到应用内的某个页面:点击退出登录、非登录跳转到登录界面uni.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。
<navigator url="/pages/xxx/xxx">
<button></button>
</navigator>
// 点击跳转 @click="goNext"
goNext() {
uni.navigateTo({
url: "/pages/xxx/xxx"
})
},
2.2 数据缓存
uni.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。uni.setStorageSync(KEY,DATA)
将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。uni.getStorage(OBJECT)
从本地缓存中异步获取指定 key 对应的内容。uni.getStorageSync(KEY)
从本地缓存中同步获取指定 key 对应的内容。uni.getStorageInfo(OBJECT)
异步获取当前 storage 的相关信息。uni.getStorageInfoSync()
同步获取当前 storage 的相关信息。uni.removeStorage(OBJECT)
从本地缓存中异步移除指定 key。uni.removeStorageSync(KEY)
从本地缓存中同步移除指定 key。uni.clearStorage()
清理本地数据缓存。uni.clearStorageSync()
同步清理本地数据缓存。
异步不会阻塞当前任务,同步缓存直到同步方法处理完才能继续往下执行。
key: setStorageSync 中设了这个 key, getStorageSync 就可取这个 key 的值
2.3 图片
- 图片按原长宽比例展示:
<image src="xxx/xxx" mode="aspectFill"></image>
2.3.1 点击添加图片
从本地相册选择图片或使用相机拍照。
// @click="clickAddImg", methods中
clickAddImg() {
uni.chooseImage({
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths));
}
})
}
2.3.2 点击预览图片
// @click="clickImg", methods中
clickImg() {
uni.previewImage({
urls: ["xxx.png"], //需要预览的图片http链接列表
current: '', // 当前显示图片的http链接,默认是第一个
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
},
2.4 网络状态
uni.getNetworkType(OBJECT)
获取网络类型
uni.getNetworkType({
success: function (res) {
if (res.networkType == "none") {
uni.showToast("无网络");
}
},
});
2.5 页面和窗体
uniapp 官网 页面和窗体
uni-app 退出登录时获取当前所在的页面
防止重复跳转该页面
let routes = getCurrentPages();
let curRoute = routes[routes.length - 1].route;
if (curRoute != "pages/xxx/xxx") {
uni.navigateTo({
url: "/pages/xxx/xxx",
});
}