uniapp下拉刷新+数据缓存+自定义头部+事件监听注册

最新推荐文章于 2024-07-15 15:39:09 发布

可口可乐Vip

最新推荐文章于 2024-07-15 15:39:09 发布

阅读量1.2k

点赞数 21

分类专栏： uniapp 文章标签： uni-app

本文链接：https://blog.csdn.net/qzmlyshao/article/details/135575511

版权

uniapp 专栏收录该内容

17 篇文章 3 订阅

订阅专栏

下拉刷新

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 .$ on 、 uni. $o n c e 、 u n i .$ off 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等
使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni. $o n 注册监听， o n U n l o a d 里边 u n i .$ off 移除，或者一次性的事件，直接使用 uni.$once 监听
注意 uni. $o n 定义完成后才能接收到 u n i .$ 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四个事件完成。

可口可乐Vip

关注

21
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
0
评论
uniapp下拉刷新+数据缓存+自定义头部+事件监听注册

当设为custom或titleNView设为false时，原生导航栏不显示。"style": {"navigationBarTitleText": "首页",// 单个页面设置} */},"style": {"navigationBarTitleText": "新闻"],// 全局设置} */
复制链接

扫一扫