uni-app优势、全局配置及滚动视图、轮播图常用属性

uni-app简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台
uni-app 核心：开发一次，多端覆盖
点击链接进入uni-app官网，亲自体验最全面跨平台效果！
uni-app官网
​uniapp.dcloud.net.cn/

uni-app的优势：

1. 开发效率高：使用uni-app开发应用程序，开发者只需要编写一份代码，就能生成多个平台的应用程序
2. 跨平台能力强：UniApp能够在多个平台运行，包括iOS、Android、H5、小程序等，使用uni-app开发的应用程序能够轻松地跨越各种平台的壁垒

uni-app全局配置

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

"tabBar": {
		"color": "#8a8a8a", // tab 上的文字默认颜色
		"selectedColor": "#ff0000", // tab 上的文字选中时的颜色
		"backgroundColor": "#ffffff", // tab 的背景色
		"borderStyle": "black", // tabbar 上边框的颜色，可选值 black/white，也支持其他颜色值
		"position": "bottom", // 可选值 bottom、top
		"fontSize": "10px", // 文字默认大小
		"iconWidth": "24px", // 图标默认宽度（高度等比例缩放）
		"spacing": "3px", // 图标和文字的间距
		"height": "50px", // tabBar 默认高度
		"list": [{
				"pagePath": "pages/index/index", // 页面路径
				"text": "首页", // 导航栏上的文本
				"iconPath": "static/shouye.png", // 导航栏上的图标
				"selectedIconPath": "static/shouye_1.png" // 选中时的图标
			},
			{
				"pagePath": "pages/cart/cart",
				"text": "购物车",
				"iconPath": "static/gouwuchekong.png",
				"selectedIconPath": "static/MBEfenggeduosetubiao-gouwuche.png"
			},
			{
				"pagePath": "pages/home/home",
				"text": "我的",
				"iconPath": "static/wode.png",
				"selectedIconPath": "static/yonghu.png"
			},
			{
				"pagePath": "pages/scroll/scroll",
				"text": "视图",
				"iconPath": "static/dingdan.png",
				"selectedIconPath": "static/MBEfenggeduosetubiao-gouwuche.png"
			}
		]
	}

提示：
tabBar中list是个数组只能最少存放两个，最多存放五个tab
当positon设置为top时则不会显示icon图标
position设置为top也就是顶部导航栏，目前仅支持微信小程序实现

窗口表现

globalStyle用于配置全局样式：
"globalStyle": {
  "navigationBarTextStyle": "white", // 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
  "navigationBarTitleText": "百战", // 导航栏标题文字内容
  "navigationBarBackgroundColor": "#ff0000", // 导航栏背景颜色（同状态栏背景色），如"#000000"
  "backgroundColor": "#ff0000", // 窗口的背景色
  "pageOrientation": "auto", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
  "rpxCalcMaxDeviceWidth": 960, // rpx 计算所支持的最大设备宽度，单位 px
  "rpxCalcIncludeWidth": 750 ,// rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx
  "enablePullDownRefresh":true, // 开启下拉刷新
  "backgroundTextStyle":"dark" ,// 下拉 loading 的样式，仅支持 dark / light
  "onReachBottomDistance":50 //页面上拉触底事件触发时距页面底部距离，单位只支持px
}
单页面的窗口表现：
"style": {
  "navigationBarTextStyle": "white", // 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
  "navigationBarTitleText": "百战", // 导航栏标题文字内容
  "navigationBarBackgroundColor": "#ff0000", // 导航栏背景颜色（同状态栏背景色），如"#000000"
  "backgroundColor": "#ff0000", // 窗口的背景色
  "pageOrientation": "auto", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
  "rpxCalcMaxDeviceWidth": 960, // rpx 计算所支持的最大设备宽度，单位 px
  "rpxCalcIncludeWidth": 750 ,// rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx
  "enablePullDownRefresh":true, // 开启下拉刷新
  "backgroundTextStyle":"dark" ,// 下拉 loading 的样式，仅支持 dark / light
  "onReachBottomDistance":50 //页面上拉触底事件触发时距页面底部距离，单位只支持px
}

单页面窗口表现的优先级要比全局样式的优先级要高 单页面窗口表现配置在pages->style

滚动视图

可滚动视图区域，用于区域滚动。

<template>
	<view>
		<h3>滚动视图</h3>
		<!-- 纵向滚动视图 -->
		<scroll-view class="scroll-Y" scroll-top="50" @scrolltoupper="upperHandler" scroll-y="true">
			<view style="background-color: aqua;" class="scroll-view">A</view>
			<view style="background-color: green;" class="scroll-view">B</view>
			<view style="background-color: darkcyan;" class="scroll-view">C</view>
		</scroll-view>
		<!-- 横向滚动视图 -->
		<scroll-view class="scroll-X" scroll-left="20" @scroll="scrollHandler"  @scrolltolower="lowerHandler" scroll-x="true" >
			<view style="background-color: aqua;" class="scroll-view-X">A</view>
			<view style="background-color: green;" class="scroll-view-X">B</view>
			<view style="background-color: darkcyan;" class="scroll-view-X">C</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	const name = ref("触发事件")
	const upperHandler = () => {
		console.log(name.value);
	}
	const lowerHandler = () =>{
		console.log("触底了");
	}
	const scrollHandler = (event) =>{
		console.log(event.detail);
	}
</script>

<style lang="scss">
	.scroll-Y {
		height: 300rpx;

		.scroll-view {
			height: 300rpx;
			text-align: center;
			line-height: 300rpx;
			font-size: 36px;
		}
	}
	.scroll-X{
		white-space: nowrap; // 不允许换行
		width: 100%;
		.scroll-view-X{
			display: inline-block; // 行内块级元素
			width: 100%;
			height: 300rpx;
			font-size: 36px;
			line-height: 300rpx;
			text-align: center;
		}
		
	}
</style>

属性说明

属性名	类型	默认值	说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
scroll-top	Number/String		设置竖向滚动条位置
scroll-left	Number/String		设置横向滚动条位置
@scrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
@scrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
@scroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

轮播图

<template>
	<view>
		<h3>个人中心</h3>
		<swiper 
		:indicator-dots="true" 
		indicator-color="#fff" 
		indicator-active-color="pink" 
		:autoplay="true" 
		:interval="3000" :duration="1000" circular
		@change="changeHandler">
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/city.jpg" mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/city.jpg" mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<image src="../../static/city.jpg" mode="widthFix"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	const changeHandler = (event) =>{
		console.log(event.detail);
	}
</script>

<style>
	image{
		width: 100%;
	}
</style>

属性说明

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
circular	Boolean	false	是否采用衔接滑动，即播放到末尾后重新回到开头
vertical	Boolean	false	滑动方向是否为纵向
@change	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current, source: source}