下拉刷新
pages.json
设置对应页面enablePullDownRefresh
属性,激活下拉。
{
"path": "pages/pull_down/index",
"style": {
"navigationBarTitleText": "下拉测试",
"enablePullDownRefresh":true
}
}
代码示例
<template>
<view>
{{ text }}
</view>
</template>
<script>
// 仅做示例,实际开发中延时根据需求来使用。
export default {
data() {
return {
text: 'cafe-app'
}
},
onLoad: function(options) {
setTimeout(function() {
console.log('start pulldown');
}, 1000);
uni.startPullDownRefresh();
},
onPullDownRefresh() {
console.log('refresh');
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
}
}
</script>
onPullDownRefresh
在 js 中定义onPullDownRefresh
处理函数(和onLoad
等生命周期函数同级),监听该页面用户下拉刷新事件。
- 需要在
pages.json
里,找到的当前页面的pages
节点,并在style选项中开启enablePullDownRefresh
- 当处理完数据刷新后,
uni.stopPullDownRefresh
可以停止当前页面的下拉刷新
uni.startPullDownRefresh(OBJECT)
开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
OBJECT 参数说明
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
success | Function | 否 | 接口调用成功的回调 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
success 返回参数说明
属性 | 类型 | 描述 |
---|---|---|
errMsg | String | 接口调用结果 |
uni.stopPullDownRefresh()
停止当前页面下拉刷新。
数据缓存
uni.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。
OBJECT 参数说明
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
key | String | 是 | 本地缓存中的指定的 key |
data | Any | 是 | 需要存储的内容,只支持原生类型、及能够通过 JSON.stringify 序列化的对象 |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
代码示例
uni.setStorage({
key: 'storage_key',
data: 'hello',
success: function () {
console.log('success');
}
});
注意
uni-、uni_、dcloud-、dcloud_为前缀的key,为系统保留关键前缀。如uni_deviceId、uni_id_token,请开发者为key命名时避开这些前缀。
uni.setStorageSync(KEY,DATA)
将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。
参数说明
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
key | String | 是 | 本地缓存中的指定的 key |
data | Any | 是 | 需要存储的内容,只支持原生类型、及能够通过 JSON.stringify 序列化的对象 |
try {
uni.setStorageSync('storage_key', 'hello');
} catch (e) {
// error
}
uni.getStorage(OBJECT)
从本地缓存中异步获取指定 key 对应的内容。
OBJECT 参数说明
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
key | String | 是 | 本地缓存中的指定的 key |
success | Function | 是 | 接口调用的回调函数,res = {data: key对应的内容} |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
代码示例
uni.getStorage({
key: 'storage_key',
success: function (res) {
console.log(res.data);
}
});
uni.getStorageSync(KEY)
从本地缓存中同步获取指定 key 对应的内容。
参数说明
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
key | String | 是 | 本地缓存中的指定的 key |
try {
const value = uni.getStorageSync('storage_key');
if (value) {
console.log(value);
}
} catch (e) {
// error
}
uni.getStorageInfo(OBJECT)
异步获取当前 storage 的相关信息。
OBJECT 参数说明
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
success | Function | 是 | 接口调用的回调函数,详见返回参数说明 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
success 返回参数说明
参数名 | 类型 | 说明 |
---|---|---|
keys | Array<String> | 当前 storage 中所有的 key |
currentSize | Number | 当前占用的空间大小, 单位:kb |
limitSize | Number | 限制的空间大小, 单位:kb |
代码示例
uni.getStorageInfo({
success: function (res) {
console.log(res.keys);
console.log(res.currentSize);
console.log(res.limitSize);
}
});
uni.getStorageInfoSync()
同步获取当前 storage 的相关信息。
代码示例
try {
const res = uni.getStorageInfoSync();
console.log(res.keys);
console.log(res.currentSize);
console.log(res.limitSize);
} catch (e) {
// error
}
uni.removeStorage(OBJECT)
从本地缓存中异步移除指定 key。
OBJECT 参数说明
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
key | String | 是 | 本地缓存中的指定的 key |
success | Function | 是 | 接口调用的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
代码示例
uni.removeStorage({
key: 'storage_key',
success: function (res) {
console.log('success');
}
});
uni.removeStorageSync(KEY)
从本地缓存中同步移除指定 key。
参数说明
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
key | String | 是 | 本地缓存中的指定的 key |
代码示例
try {
uni.removeStorageSync('storage_key');
} catch (e) {
// error
}
清理本地数据缓存。
代码示例
uni.clearStorage();
同步清理本地数据缓存。
代码示例
try {
uni.clearStorageSync();
} catch (e) {
// error
}
自定义头部
pages-json-中设置去掉原生头部)pages.json 中设置去掉原生头部
当navigationStyle
设为custom
或titleNView
设为false
时,原生导航栏不显示。
{
"pages": [{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
// 单个页面设置
"navigationStyle": "custom"
/* "app-plus": {
"titleNView": false
} */
}
},
{
"path": "pages/index/list-news",
"style": {
"navigationBarTitleText": "新闻"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
// 全局设置
"navigationStyle": "custom"
/* "app-plus":{
"titleNView":false
} */
}
}
状态栏 占位div
非H5端,手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的原因,即全屏可写内容。uni-app
提供了状态栏高度的css变量--status-bar-height
,如果需要把状态栏的位置从前景部分让出来,可写一个占位div,高度设为css变量。
使用css方式进行控制
<template>
<view>
<view class="status_bar">
<!-- 这里是状态栏 -->
</view>
<view> 状态栏下的文字 </view>
</view>
</template>
<style>
.status_bar {
height: var(--status-bar-height);
width: 100%;
}
</style>
使用js方式进行控制
<template>
<view>
<view :style="'height:'+statusHeight+'px'">
<!-- 这里是状态栏 -->
</view>
<text> 状态栏下的文字 </text>
</view>
</template>
<script>
export default {
data() {
return {
statusHeight: 0
}
},
onLoad() {
this.statusHeight = plus.navigator.getStatusbarHeight();
}
}
</script>
事件监听注册
uniapp 提供了事件的监听注册以及触发,注册的事件都是 App 全局级别的,可以很方便的跨任意组件,页面,nvue,vue 等。
相关注册或触发函数
uni.$emit(eventName,OBJECT)
触发全局的自定义事件,附加参数都会传给监听器回调函数。
属性 | 类型 | 描述 |
---|---|---|
eventName | String | 事件名 |
OBJECT | Object | 触发事件携带的附加参数 |
代码示例
uni.$emit('update',{msg:'页面更新'})
uni.$on(eventName,callback)
监听全局的自定义事件,事件由uni.$emit
触发,回调函数会接收事件触发函数的传入参数。
属性 | 类型 | 描述 |
---|---|---|
eventName | String | 事件名 |
callback | Function | 事件的回调函数 |
代码示例
uni.$on('update',function(data){
console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
})
uni.$once(eventName,callback)
监听全局的自定义事件,事件由uni.$emit
触发,但仅触发一次,在第一次触发之后移除该监听器。
属性 | 类型 | 描述 |
---|---|---|
eventName | String | 事件名 |
callback | Function | 事件的回调函数 |
代码示例
uni.$once('update',function(data){
console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
})
uni.$off([eventName, callback])
移除全局自定义事件监听器。
属性 | 类型 | 描述 |
---|---|---|
eventName | Array<String> | 事件名 |
callback | Function | 事件的回调函数 |
- 如果uni.$off没有传入参数,则移除App级别的所有事件监听器;
- 如果只提供了事件名(eventName),则移除该事件名对应的所有监听器;
- 如果同时提供了事件与回调,则只移除这个事件回调的监听器;
- 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器;
代码示例
$emit
、$on
、$off
常用于跨页面、跨组件通讯,这里为了方便演示放在同一个页面
<template>
<view class="content">
<view class="data">
<text>{{val}}</text>
</view>
<button type="primary" @click="comunicationOff">结束监听</button>
</view>
</template>
<script>
export default {
data() {
return {
val: 0
}
},
onLoad() {
setInterval(() => {
uni.$emit('add', {
data: 2
})
}, 1000)
uni.$on('add', this.add)
},
methods: {
comunicationOff() {
uni.$off('add', this.add)
},
add(e) {
this.val += e.data
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.data {
text-align: center;
line-height: 40px;
margin-top: 40px;
}
button {
width: 200px;
margin: 20px 0;
}
</style>
- uni. e m i t 、 u n i . emit、 uni. emit、uni.on 、 uni. o n c e 、 u n i . once 、uni. once、uni.off 触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等
- 使用时,注意及时销毁事件监听,比如,页面 onLoad 里边 uni. o n 注 册 监 听 , o n U n l o a d 里 边 u n i . on 注册监听,onUnload 里边 uni. on注册监听,onUnload里边uni.off 移除,或者一次性的事件,直接使用 uni.$once 监听
- 注意 uni. o n 定 义 完 成 后 才 能 接 收 到 u n i . on 定义完成后才能接收到 uni. on定义完成后才能接收到uni.emit 传递的数据
场景案例
我们假设一个场景,进入app,是未登陆状态,需要在我的页面点击登陆,进入登陆页面进行登陆。登陆成功之后,返回到我的页面,实时显示登陆后的用户信息。
监听事件
在用户中心页面 监听事件。因为事件监听是全局的,所以使用uni.$on
,需要使用uni.$off
移除全局的事件监听,避免重复监听。
<template>
<view class="content">
<navigator url="/pages/login/index" hover-class="navigator-hover">
<button type="default">点我登录</button>
</navigator>
<view v-if="usnerInfo !== null">
<view>
用户token:{{usnerInfo.token}},用户昵称:{{usnerInfo.nickName}}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
usnerInfo: null
}
},
onLoad() {
// 监听事件
console.log('on login....');
uni.$on('login', (uinfo) => {
this.usnerInfo = uinfo;
})
},
onUnload() {
// 移除监听事件
console.log('off login....');
uni.$off('login');
},
methods: {
}
}
</script>
触发事件
进入登陆页面,触发事件。使用uni.$emit
触发事件后,对应的uni.$on
就会监听到事件触发,在回调中去执行相关的逻辑。
<template>
<view>
<button type="default" @click="login">登录</button>
</view>
</template>
<script>
export default {
data() {
return {};
},
methods: {
login() {
// 假设用户登录成功,此时调用emit方法触发监听事件,刷新用户登录信息
uni.$emit('login', {
token: 'user123456',
nickName: 'wk123',
});
}
}
}
</script>
基本上述场景均可以实现,本质上就是一个页面通知另一个面我发生了变化,你需要处理一下。绝大部分页面的通讯都可以使用uni.$emit
、uni.$on
、uni.$once
、uni.$off
四个事件完成。