【uni-app】常用组件(自定义 navbar )和 API

小秀_heo

已于 2024-03-08 18:38:17 修改

阅读量649

点赞数 9

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

于 2024-02-25 17:45:39 首次发布

本文链接：https://blog.csdn.net/XiugongHao/article/details/136285059

版权

uni-app 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

常用组件

uni-app 为开发者提供了一系列基础组件，类似 HTML 里的基础标签元素，但 uni-app 的组件与 HTML 不同，而是与小程序相同，更适合手机端使用。

虽然不推荐使用 HTML 标签，但实际上如果开发者写了div等标签，在编译到非H5平台时也会被编译器转换为 view 标签，类似的还有 span 转 text、a 转navigator等，包括 css 里的元素选择器也会转，但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。

开发者可以通过组合这些基础组件进行快速开发，基于内置的基础组件，可以开发各种扩展组件，组件规范与vue组件相同。内置组件

view 视图容器。它类似于传统html中的div，用于包裹各种元素内容。如果使用nvue，则需注意，包裹文字应该使用组件。

swiper 滑块视图容器。一般用于左右滑动或上下滑动，比如banner轮播图。注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。

uni-app 支持在 template 模板中嵌套 <template/> 和 <block/>，用来进行条件渲染和列表渲染。 <template/> 和 <block/> 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。<block/>在不同的平台表现存在一定差异，推荐统一使用 <template/>。

其他常用组件见 uni-app 组件。

常用 API

uni-app的 js 代码，h5 端运行于浏览器中，非 h5 端 Android 平台运行在 v8 引擎中，iOS 平台运行在 iOS 自带的 jscore 引擎中。所以，uni-app的 jsAPI 由标准 ECMAScript 的 js API 和 uni 扩展 API 这两部分组成。

ECMAScript 由 Ecma 国际管理，是基础 js 语法。浏览器基于标准 js 扩充了window、document 等 js API；Node.js 基于标准 js 扩充了 fs 等模块；小程序也基于标准 js 扩展了各种 wx.xx、my.xx、swan.xx 的 API。

标准 ecmascript 的 API 非常多，比如：console、settimeout等等。

非 H5 端，虽然不支持 window、document、navigator 等浏览器的 js API，但也支持标准 ECMAScript。

开发者不要把浏览器里的 js 等价于标准 js。

所以 uni-app 的非 H5 端，一样支持标准 js，支持 if、for 等语法，支持字符串、数组、时间等变量及各种处理方法，仅仅是不支持浏览器专用对象。

实例：自定义 navbar

uni.getSystemInfoSync() 同步获取系统数据
rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App（vue2 不含 nvue）端和 H5（vue2）端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算，具体配置参考：rpx 计算配置。（简单理解为 1px = 2rpx）
navigationStyle 默认default展示默认样式。导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意
getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，数组中的元素为页面实例，第一个元素为首页，最后一个元素为当前页面。
uni.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
uni.switchTab(OBJECT) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.navigateBack(OBJECT) 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
uni.getMenuButtonBoundingClientRect() 在小程序平台，如果原生导航栏被隐藏，仍然在右上角会有一个悬浮按钮，微信下也被称为胶囊按钮。本API用于获取小程序下该菜单按钮的布局位置信息，方便开发者布局顶部内容时避开该按钮。
navigator 页面跳转。该组件类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在pages.json中注册。
onLoad比较适合的操作是：接受上页传递过来的参数对象，联网取数据，更新data。
onLoad((options)=>{ console.log(options, 'options') })
uni.getStorageSync(KEY) 从本地缓存（localStorage）中同步获取指定 key 对应的内容。
onShow和onHide 注意页面显示，是一个会重复触发的事件。a页面刚进入时，会触发a页面的onShow。当a跳转到b页面时，a会触发onHide，而b会触发onShow。但当b被关闭时，b会触发onUnload，此时a再次显示出现，会再次触发onShow。在tabbar页面（指 pages.json 里配置的tabbar），不同tab页面互相切换时，会触发各自的onShow和onHide。
uni.makePhoneCall(OBJECT) 拨打电话。

<template>
	<view class="nav">
		<view :style="'height:' + status + 'rpx;' + containerStyle"></view>
		<view v-if="isHome" class="headNav"
			:style="'height:' + navHeight + 'rpx;line-height:' + navHeight +'rpx;padding-left:20rpx;'">
			<text class="city">中部地区</text>
			<view style="flex: 1">
				<navigator url="../../pages/search/index" :style="
						'height:' +
						menu.height*2 +
						'rpx;line-height:' +
						menu.height*2 +
						'rpx;margin-top:' + 
						(menu.top*2 - status) +
						'rpx;margin-left:32rpx;margin-right:' +
						(menu.width*2 + 24) + 
						'rpx;background: #f4f4f4;border-radius:200rpx;text-align:center'
					">
					<text class="search-text">找医院</text>
				</navigator>
			</view>
		</view>
		<view v-else class="navbar" :style="'height:' + navHeight + 'rpx;' + containerStyle">
			<view class="back-icon" @click="backOrHome">
				<image v-if="pages > 1" src="../../static/resource/navbar/ic_back.png"></image>
				<image v-else src="../../static/resource/navbar/ic_home.png"></image>
			</view>
			<view class="nav-title" v-if="titleText">
				<view :style="'height:' + navHeight + 'rpx;line-height:'+ navHeight + 'rpx;' + textStyle">{{titleText}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onBeforeMount,
		ref,
		reactive
	} from 'vue';
	const props = defineProps({
		background: {
			type: String,
			default: 'rgba(255,255,255,1)'
		},
		color: {
			type: String,
			default: 'rgba(0,0,0,1)'
		},
		fontSize: {
			type: String,
			default: '32'
		},
		iconWidth: {
			type: String,
			default: '116'
		},
		iconHeight: {
			type: String,
			default: '38'
		},
		titleText: {
			type: String,
			default: ''
		},
		isHome: {
			type: Boolean,
			default: false
		}
	})
	const emit = defineEmits(['navBarAttached'])
	onBeforeMount(() => {
		setNavSize()
		setStyle()
		emit('navBarAttached', {
			detail: {
				statusHeight: status.value,
				navHeight: navHeight.value,
				navBarHeight: status.value + navHeight.value
			}
		})
	})
	// 状态栏高度
	const status = ref(0)
	// 内容高度
	const navHeight = ref(0)
	// 计算状态栏的高度
	const setNavSize = () => {
		const {
			system,
			statusBarHeight
		} = uni.getSystemInfoSync()
		// 设计稿宽度为375px，使用 rpx 需要以750px 为基准
		status.value = statusBarHeight * 2
		const isiOS = system.indexOf('iOS') > -1
		if (!isiOS) {
			navHeight.value = 96
		} else {
			navHeight.value = 88
		}
	}
	// 背景颜色
	const containerStyle = ref('')
	// 字体样式
	const textStyle = ref('')
	// 图标样式
	const iconStyle = ref('')
	// 样式设置
	const setStyle = () => {
		containerStyle.value = ['background:' + props.background].join(';')
		textStyle.value = ['color:' + props.color, 'font-size:' + props.fontSize + 'rpx'].join(';')
		iconStyle.value = ['height:' + props.iconHeight + 'rpx', 'width:' + props.iconWidth + 'rpx'].join(';')
	}
	// 页面栈的数量
	const pages = ref(getCurrentPages().length)
	const backOrHome = () => {
		if (pages.value > 1) {
			uni.navigateBack()
		} else {
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
	}
	// 获取胶囊的位置
	const menu = reactive(uni.getMenuButtonBoundingClientRect())
</script>
	
	<style>
		.nav {
			position: fixed;
			width: 100%;
			top: 0;
			left: 0;
			z-index: 2;
		}
	
		.back-icon {
			display: flex;
			align-items: center;
			width: 64rpx;
			height: 100%;
			margin-left: 20rpx;
		}
	
		.back-icon image {
			width: 64rpx;
			height: 64rpx;
		}
	
		.navbar {
			position: relative;
		}
	
		.nav-title {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%);
		}
	
		.headNav {
			display: flex;
		}
	
		.city {
			display: inline-block;
			position: relative;
			font-size: 30rpx;
			font-weight: bold;
			padding-left: 55rpx;
			background: url(data:image/png;base64,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) no-repeat left center;
			background-size: 40rpx;
		}
	
		.city:after {
			content: ' ';
			display: inline-block;
			height: 6px;
			width: 6px;
			border-width: 1px 1px 0 0;
			border-color: #353535;
			border-style: solid;
			-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
			transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
			position: relative;
			top: -2px;
			position: absolute;
			top: 50%;
			margin-top: -4px;
			right: -10px;
		}
	
		.search-text {
			display: inline-block;
			padding-left: 30rpx;
			color: #bbbbbb;
			font-size: 26rpx;
			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAPWSURBVHja1FpNSFRRFH4+Zikig4sQkUeEtAgrk4EMCXFCiwhjoN9FrdpIixYREbMIEYkWLUKCCGqjaTUkEbUYXYSMyWASLUJC4hExuJBw4TKkc/IMXYY592fevY/XgY+Bd//eN+ece35mmorFomdJAuZ56DmUbDb79zMV4aV9QAYwAOgFdAGaa+ZtA9YAq4AFwApgxwW5VAMEOgCjgAsa85uJJOIaPZsGTAIqNgn5BgR6AI8Ai5okOLkEKBGZHolJWicS0It/AgxbtIZTtOc5G2RURPaRFiYc+us9wEM6ywmR/YDXlrXAyWlAgc606uz47bwEHNDY4xdgjnxnA/CDnncC9gD6ASOAtGKfbsAsIAdYt0EkIFWrSOBVegfwjbl9vtLnM8AYXc/jdIPJyDwAXDe90VKMY8vMCePAZcCywWEhAUn3AaYUZvYB8MqETK2PpBWO/RNwFDDTYAzANUuAI4Dvknn3NUyRJRKQ6jlB2x8ElCM6dkiR/qTgT/Xkrsm1LBLpUJhUjkzDluBeZwG/JSbWbkokoLSDk4uATQfXLmrmimR8VFcrvvDJpR1lQ8c2lSUixKUzvgmRjGRO3nEqHtI1zkmvCZFBZnzTsl9wgqn+FjM2YEKkhxl/47owErQyF1UjAUXderLoxSfcWV06Du8LBRAXAOMS7qwWG2n8RoxEKnFUiHGI73Jxe4xE2m0Q2U4wkS1dIqEkVvTHSOS4JMaEuhpZYcZHbHU5NBocZyQpjLZpLTDjaUmMsSlYq7cyYyUTIiuSOeOOtRJIirkdSUJZlwgumJakCH2OyAS09yFm/IluiuQLuc6kZB7W2G0OiLQp6venjcQRjKzvJHMLlv2li/bkZMYks/BrMtC8ZG4nXQoZC+aE2fZ72pOTiShdFGy23ZLMx7r+I1VuQQSfwJ7vXo2bLGiUCH4DLwBvFWumyCyGNQ8LaG5B4ROizJL2tcikmCLnBqm9W7K2ah5b3r+WaUVIxzso7ai2TFsb0CCSOS+8lxERlHXaYFZBxqMXvEpwIVpkfEUdnVOYWVyiNDNVGo+awYbyzaST0SlmUJ3YUD5sWTsYJw4KZhOJjG5VhmQ+k3aOSdIZlWB79LG32wi/Dfji7TYAI5Mx/VU3JFQoeGIeJv483VKnKFqjVLxECWBYZ09PuFwaugCaEvSHgWrELxiciT3p5Ww2G6Ys2nxoab2JZp4DhnBtkrooVTKmPjM2Pz8fJI2ISCanOT8TuZfkmMyqAZnEEhHJqMysnHQiuj6Tx1sr6UREMkM1TRJ8dsKjnlzK+z+kGohrG4lh9Y9nfwQYAJts3SyOpWPCAAAAAElFTkSuQmCC) no-repeat left center;
			background-size: 23rpx;
		}
	</style>

data-*属性是HTML5中增加的元素全局属性，它能让我们在所有HTML元素上嵌入自定义数据属性的能力。并且可以通过js来获取，在Vue的template代码里边用data-变量名使用。

 <text data-title="name" @click="postParams">NAME</text>

data-*通过Js事件可以在dataset中拿到数据：

 postParams(e) {
     console.log(e.currentTarget.dataset.title);
 }

uni.$on(eventName,callback) 监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。

    uni.$on('userChange', data => {
        console.log(data)
    })
    //....
    uni.$emit('userChange', res)

uni.chooseAddress(OBJECT) 获取用户收货地址。调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址。（开启此功能需要在 manifest.json 中 mp-weixin 微信小程序相关配置中配置 requiredPrivateInfos Array 地理位置相关接口）

在这里插入图片描述

uni.showToast(OBJECT) 显示消息提示框。

小秀_heo

关注

9
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
【uni-app】常用组件(自定义 navbar )和 API

浏览器基于标准 js 扩充了window、document 等 js API；uni-app 为开发者提供了一系列基础组件，类似 HTML 里的基础标签元素，但 uni-app 的组件与 HTML 不同，而是与小程序相同，更适合手机端使用。所以 uni-app 的非 H5 端，一样支持标准 js，支持 if、for 等语法，支持字符串、数组、时间等变量及各种处理方法，仅仅是不支持浏览器专用对象。等，包括 css 里的元素选择器也会转，但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。
复制链接

扫一扫