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

发布时间：2024年01月14日

下拉刷新

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 参数说明

参数名类型必填说明
successFunction否接口调用成功的回调
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明

属性类型描述
errMsgString接口调用结果

uni.stopPullDownRefresh()

停止当前页面下拉刷新。

数据缓存

uni.setStorage(OBJECT)

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

OBJECT 参数说明

参数名类型必填说明
keyString是本地缓存中的指定的 key
dataAny是需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

代码示例

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 对应的内容，这是一个同步接口。

参数说明

参数名类型必填说明
keyString是本地缓存中的指定的 key
dataAny是需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
try {
	uni.setStorageSync('storage_key', 'hello');
} catch (e) {
	// error
}

uni.getStorage(OBJECT)

从本地缓存中异步获取指定 key 对应的内容。

OBJECT 参数说明

参数名类型必填说明
keyString是本地缓存中的指定的 key
successFunction是接口调用的回调函数，res = {data: key对应的内容}
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

代码示例

uni.getStorage({
	key: 'storage_key',
	success: function (res) {
		console.log(res.data);
	}
});

uni.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容。

参数说明

参数名类型必填说明
keyString是本地缓存中的指定的 key
try {
	const value = uni.getStorageSync('storage_key');
	if (value) {
		console.log(value);
	}
} catch (e) {
	// error
}

uni.getStorageInfo(OBJECT)

异步获取当前 storage 的相关信息。

OBJECT 参数说明

参数名类型必填说明
successFunction是接口调用的回调函数，详见返回参数说明
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明

参数名类型说明
keysArray＜String＞当前 storage 中所有的 key
currentSizeNumber当前占用的空间大小, 单位：kb
limitSizeNumber限制的空间大小, 单位：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 参数说明

参数名类型必填说明
keyString是本地缓存中的指定的 key
successFunction是接口调用的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

代码示例

uni.removeStorage({
	key: 'storage_key',
	success: function (res) {
		console.log('success');
	}
});

uni.removeStorageSync(KEY)

从本地缓存中同步移除指定 key。

参数说明

参数名类型必填说明
keyString是本地缓存中的指定的 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)

触发全局的自定义事件，附加参数都会传给监听器回调函数。

属性类型描述
eventNameString事件名
OBJECTObject触发事件携带的附加参数

代码示例

uni.$emit('update',{msg:'页面更新'})

uni.$on(eventName,callback)

监听全局的自定义事件，事件由uni.$emit触发，回调函数会接收事件触发函数的传入参数。

属性类型描述
eventNameString事件名
callbackFunction事件的回调函数

代码示例

uni.$on('update',function(data){
  console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})

uni.$once(eventName,callback)

监听全局的自定义事件，事件由uni.$emit触发，但仅触发一次，在第一次触发之后移除该监听器。

属性类型描述
eventNameString事件名
callbackFunction事件的回调函数

代码示例

uni.$once('update',function(data){
  console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})

uni.$off([eventName, callback])

移除全局自定义事件监听器。

属性类型描述
eventNameArray＜String＞事件名
callbackFunction事件的回调函数
  • 如果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四个事件完成。

文章来源:https://blog.csdn.net/qzmlyshao/article/details/135575511
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章