tabbar配置
在pages.json中进行配置,与页面配置和全局配置是同级
1、当position为top时,不会显示icon
2、tabbar中的list是一个数组,只能配置最少2个,最多五个tab
"tabBar":{
// 导航栏背景色
"backgroundColor":"#808080",
// 导航栏字体颜色
"color":"#F1F1F1",
// 导航栏字体选中后的颜色
"selectedColor":"#F0AD4E",
"list":[
{
"text":"首页",
// 页面地址
"pagePath":"pages/index/index",
// 图标地址
"iconPath":"static/home.png",
// 选中后图标地址
"selectedIconPath":"static/home1.png"
},
{
"text":"信息",
"pagePath":"pages/message/message",
"iconPath":"static/message.png",
"selectedIconPath":"static/message1.png"
}
]
condition启动模式配置
启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如:小程序转发后,用户点击所打开的页面。
"condition":{
// 下面list的索引
"current":0,
"list":[
{
"name":"我的",
"path":"pages/my/my",
// 页面参数
"query":"id=3"
}
]
}
常用组件的基本使用
1、text组件
selectable属性:文本可选中
space:ensp 中文字符空格的一半大小
space:emsp 中文字符空格大小
space:nbsp 根据设置的字体大小,空格的大小也一样,一个字体的空格
2、view组件的基本用法
view相当于div
hover-class 按下去后的样式
hover-stop-propagation阻止冒泡
hover-start-time 按住后多久出现点击状态,值为数字类型,所以使用时前面需加上“ :”
hover-stay-time松开后点击状态保留多长时间,值为数字类型,所以使用时前面需加上“ :”
<template>
<view class="box"
:hover-start-time="2000"
:hover-stay-time="2000"
hover-class="active"
hover-stop-propagation>
我是一个盒子
<view class="box2"
hover-class="active1"
hover-stop-propagation>哈哈哈</view>
</view>
</template>
<style>
.box{
width: 200px;
height: 200px;
border: #007AFF 1px solid;
background-color: #007AFF;
}
.box2{
width: 100rpx;
height: 100rpx;
background-color: #DD524D;
}
.active{
background-color: #4CD964;
}
.active1{
background-color: #2C405A;
}
</style>
3、button组件的基本用法
size 设置按钮大小,有default、mini两个尺寸
type 设置按钮的样式类型,default为白色,warn为红色,primary在不同的客户端颜色不同,如果要统一颜色需要用default设置
plain 设置按钮的背景色为透明
disabled 设置按钮禁用
loading 按钮加载样式
4、image组件的基本用法
src 可以放本地或者网络图片的地址
mode 设置图片裁剪、缩放,默认值为scaleToFill
uni中的样式,使用scss和字体图标
rpx是响应式px,根据屏幕宽度自适应的动态单位
@import语句可以导入外联式样式,后面是相对路径,以“ ;”结束
支持基本的选择器,但是不支持*全局选择器
App.vue中的样式为全局样式,pages目录下的vue文件中定义的样式为局部样式,如果两者有相同的选择器,那么局部的样式会覆盖全局的样式
使用scss编译需要安装插件,在顶部的工具选项中选择插件安装