Uni-app页面组成

时间：2024-12-17 21:07:21

Uni-app

uni-app目录结构

在新建uni-app时默认包含如下的目录及文件：

  • components 用来存放uni-app组件的目录
  • pages 用来存放整个uni-app所有的页面 例如：
  • static 用来存放一些静态图片 例如：图片、图标、视频等。静态资源只能存放于此。
  • 是用来配置App全局样式，是页面的入口文件，可以调用应用的生命周期函数。
  • 是项目入口文件
  • 用来配置应用打包的东西，配置应用名称、appid、logo、版本等打包信息
  • 是用来设置整个项目页面的存放路径以及全局的外观，配置页面路由、导航条、选项卡等页面类信息
  • 是常用的样式变量

uni-app全局配置和页面配置

用来设置应用的状态栏、导航条、标题、窗口颜色等等其他

属性 描述
navigationBarBackgroundColor 导航栏背景颜色
navigationBarTextStyle 导航栏标题颜色 仅支持black/white
navigationBarTitleText 导航栏标题文字内容
backgroundColor 窗口的背景颜色
backgroundTextStyle 下拉loading的样式，仅支持 dark/light
enablePullDownRefresh 是否开启下拉刷新
onReachBottomDistance 页面上拉触底事件触发时距离页面底部的距离，单位只支持px

Tabber基本属性

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

属性

属性 描述
color tab上的文字默认颜色
selectedColor tab 上的文字选中时的颜色
backgroundColor tab 的背景色
list tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position 可选值 bottom、top

其中list是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序，数组中的每一项都是一个对象。

属性 说明
pagePath 页面路径，必须在 pages 中先定义
text tab 上按钮文字
iconPath 图片路径，不支持网络图片，不支持字体图标
selectedIconPath 选中时的图片路径

uni-app页面基本构成

<template>
	<view class="content">
		<image class="logo" src="/static/"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

注意：

  1. 所有组件与属性名都是小写，单词之间以连字符-连接。
  2. 根节点为 template，这个 template下只能且必须有一个根view组件。这是vue单文件组件规范。
视图容器
名称 描述
view 视图容器
scroll-view 可滚动视图区域
swiper 滑块视图容器，一般用于轮播图
cover-view 覆盖在原生组件上的文本视图
cover-image 覆盖在原生组件上的图片视图
基础内容
名称 描述
icon 图标
text 文本
rich-text 富文本
progress 进度条

除此之外还有很多组件，例如表单组件，导航栏，媒体组件等具体可参照uni-app基础组件

view组件

是一个块级元素

属性名 说明
hover-class 指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果
hover-stop-propagation 指定是否阻止本节点的祖先节点出现点击态
hover-start-time 按住后多久出现点击态，单位毫秒
hover-stay-time 手指松开后点击态保留时间，单位毫秒
button按钮组件的属性
属性名 说明
size 按钮的大小
type 按钮的样式类型
plain 按钮是否镂空，背景色透明
disabled 是否禁用
loading 名称前是否带 loading 图标
form-type 用于 组件，点击分别会触发 组件的 submit/reset 事件
hover-class 指定按钮按下去的样式类。当 hover-class=“none” 时，没有点击态效果

注意：
button-hover默认值为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
form-type 有效值

值 说明
submit 提交表单
reset 重置表单
uni-app中的样式
  • rpx就是响应式px，根据屏幕宽度自适应的动态单位。
  • 使用 @import语句可以导入外联样式表，后面需要跟外联样式表的相对路径
  • 基本常用的选择器class、id、element等等。
  • 在uni-app中不能使用*选择器。
  • 在中的样式为全局样式，作用于每一个页面。在pages目录下的vue文件中定义的样式为局部样式，只在对应的页面管用，会覆盖中相同的选择器。
  • 可以使用字体图标但是需要注意以下几点：
    - 字体文字小于40kb，将会自动转化为base64格式；
    - 字体文件大于40kb，需要自己转换，否则不生效；
    - 字体文件的应用路径应使用以-@开头的绝对路径
@font-face{
	font-family:testi-icon;
	src:url('~@/static/');
}
  • 1
  • 2
  • 3
  • 4
uni-app中的数据绑定

和之前学的vue一样，在data中定义数据即可

export default{
	data(){
		return{
			msg:'hello world'
		}
	}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

利用插值表达式渲染基本数据

<view>{{mag}}</view>
  • 1

还可以连接字符串：

<view>{{'你好'+'世界'}}</view>
  • 1

基本运算：

<view>{{1+2}}</view>
  • 1
v-bind和v-for的使用
v-bind动态绑定属性

在data定义一张图片，把这张图渲染到页面上：

export default{
	data(){
		return{
			img：'http://destiny/image/'
		}
	}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

利用v-bind进行渲染：

<image v-bind:src="img"></image>
  • 1

还可以缩写成：

<image :src="img"></image>
  • 1
v-for的使用

data中定义一个数组，最终将数组渲染到页面上

export default{
	data(){
		return{
			arr:{
			{name:'张三',age:18},
			{name:'张1',age:18},
			{name:'张6',age:18}
			}
		}
	}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

利用v-for进行循环:

<view v-for="(item,i) in arr" :key="i">名字：{{}}---年龄{{}}</view>
  • 1

相关文章