Uniapp在底部导航栏设置点击事件

江万万

已于 2024-09-18 16:58:26 修改

阅读量1k

点赞数 4

CC 4.0 BY-SA版权

文章标签： uni-app javascript 前端

于 2024-09-12 11:14:59 首次发布

本文链接：https://blog.csdn.net/h110001/article/details/142169992

<template>
	<view class="content">
		<!-- 页面内容 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 页面数据
			};
		},
		onTabItemTap(item) {
			console.log('首页被点击了，index:', item.index, ', pagePath:', item.pagePath);
			// 执行刷新逻辑
			this.refreshData();
		},
		methods: {
			refreshData() {
				// 这里放置你的数据刷新逻辑
				// 例如重新获取数据
				console.log('刷新数据');
				// 假设有一个获取数据的方法 fetchData
				this.fetchData();
			},
			fetchData() {
				// 获取数据的逻辑
				// 这里可以使用 API 调用或其他数据获取方式
				console.log('获取数据');
				// 假设获取到的数据存储在 data 中的 someData 属性
				this.someData = '新数据';
			}
		},
		// 其他页面生命周期函数...
	};
</script>

<style>
	/* 页面样式 */
</style>

onTabItemTap是主要的，他是一个监听Tab导航栏，可以使用他来刷新页面等；比如刷新遮罩层

遮罩层（用来显示一些外部链接）：

<view class="newbox" @click="toggleModals(true)">
	<image class="newimgs" src="../img/chuangke.png" mode=""></image>
	<span style="font-size: 25rpx;">运营中心与分公司</span>
</view>
<!-- 遮罩层 -->
<view v-if="showModal" class="mask" @click="toggleModals(false)">
     <view class="modal-content" @click.stop>
<!-- 加载外部链接的内容 -->
     <web-view :src="urls" style="width: 80%; height: 85vh;margin: auto;"></web-view> 
     </view>
</view>

methods: {
			
			toggleModals(state) {
				this.showModals = state;
			},
}

在retrun里面定义 showModal: false 和 urls: "https://mqtt.hnlhtxgs.com/wap/clerk/home/login", 外部地址