新网站秒收录技术,做网站为什么能挣钱,西安专业建设网站,wordpress外贸建站 视频教程目录 一、基本概述二、属性说明三、常用布局3.1 横向布局3.2 纵向布局3.3 更多布局3.3.1 纵向布局-自动宽度3.3.2 纵向布局-固定宽度3.3.3 横向布局-自动宽度3.3.4 横向布局-居中3.3.5 横向布局-居右3.3.6 横向布局-平均分布3.3.7 横向布局-两端对齐3.3.8 横向布局-自动填充3.3… 目录 一、基本概述二、属性说明三、常用布局3.1 横向布局3.2 纵向布局3.3 更多布局3.3.1 纵向布局-自动宽度3.3.2 纵向布局-固定宽度3.3.3 横向布局-自动宽度3.3.4 横向布局-居中3.3.5 横向布局-居右3.3.6 横向布局-平均分布3.3.7 横向布局-两端对齐3.3.8 横向布局-自动填充3.3.9 横向布局-换行展示3.3.10 横向布局-垂直分布 一、基本概述
view是一个视图容器本身不显示任何可视化元素。用途都是为了包裹其他真正显示的组件。它类似于传统html中的div用于包裹各种元素内容。
二、属性说明
属性名类型默认值说明hover-classStringnone指定按下去的样式类。当 hover-class“none” 时没有点击态效果hover-stop-propagationBooleanfalse指定是否阻止本节点的祖先节点出现点击态App、H5、支付宝小程序、百度小程序不支持支付宝小程序、百度小程序文档中都有此属性实测未支持hover-start-timeNumber50按住后多久出现点击态单位毫秒hover-stay-timeNumber400手指松开后点击态保留时间单位毫秒
实例代码
view classbox-container hover-classbox-container-hover hover-start-time100 hover-stay-time1000视图容器/view.box-container {width: 200px;height: 200px;background-color: orange;text-align: center;line-height: 200px;
}
.box-container-hover {background-color: blue;
}三、常用布局
Flex是Flexible Box的缩写意为“弹性布局”用来为盒状模型提供最大的灵活性。当设置display: flex后继续给view等容器组件设置flex-direction:row或column就可以在该容器内按行或列排布子组件。uni-app推荐使用flex布局。因为flex布局有利于跨更多平台尤其是采用原生渲染的平台。
3.1 横向布局 view classuni-flex uni-rowview classflex-item uni-bg-redA/viewview classflex-item uni-bg-greenB/viewview classflex-item uni-bg-blueC/view
/view.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.flex-item {width: 33.3%;height: 100px;text-align: center;line-height: 100px;
}
.uni-bg-red{background:#F76260; color:#FFF;
}
.uni-bg-green{background:#09BB07; color:#FFF;
}
.uni-bg-blue{background:#007AFF; color:#FFF;
}3.2 纵向布局 view classuni-flex uni-columnview classflex-item flex-item-V uni-bg-redA/viewview classflex-item flex-item-V uni-bg-greenB/viewview classflex-item flex-item-V uni-bg-blueC/view
/view.uni-flex {display: flex;
}
.uni-column {flex-direction: column;
}
.flex-item {width: 33.3%;height: 100px;text-align: center;line-height: 100px;
}
.uni-bg-red{background:#F76260; color:#FFF;
}
.uni-bg-green{background:#09BB07; color:#FFF;
}
.uni-bg-blue{background:#007AFF; color:#FFF;
}3.3 更多布局 3.3.1 纵向布局-自动宽度
view classtext纵向布局-自动宽度/view.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}3.3.2 纵向布局-固定宽度
view classtext stylewidth: 300rpx;纵向布局-固定宽度/view.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}3.3.3 横向布局-自动宽度
view classuni-flex uni-rowview classtext横向布局-自动宽度/viewview classtext横向布局-自动宽度/view
/view.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}3.3.4 横向布局-居中
view classuni-flex uni-row uni-centerview classtext横向布局-居中/viewview classtext横向布局-居中/view
/view.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.uni-center {-webkit-justify-content: center;justify-content: center;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}3.3.5 横向布局-居右
view classuni-flex uni-row uni-rightview classtext横向布局-居右/viewview classtext横向布局-居右/view
/view.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.uni-right {-webkit-justify-content: flex-end;justify-content: flex-end;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}3.3.6 横向布局-平均分布
view classuni-flex uni-rowview classtext uni-aver横向布局-平均分布/viewview classtext uni-aver横向布局-平均分布/view
/view.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.uni-aver {-webkit-flex: 1;flex: 1;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}3.3.7 横向布局-两端对齐
view classuni-flex uni-row .uni-betweenview classtext横向布局-两端对齐/viewview classtext横向布局-两端对齐/view
/view.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.uni-between {-webkit-justify-content: space-between;justify-content: space-between;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}3.3.8 横向布局-自动填充
view classuni-flex uni-rowview classtext stylewidth: 200rpx;固定宽度/viewview classtext uni-fill自动占满余量/view
/viewview classuni-flex uni-rowview classtext stylewidth: 200rpx;固定宽度/viewview classtext uni-fill自动占满/viewview classtext stylewidth: 200rpx;固定宽度/view
/view.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.uni-fill {-webkit-flex: 1;flex: 1;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}3.3.9 横向布局-换行展示
view classuni-flex uni-row uni-wrapview classtext stylewidth: 280rpx;一行显示不全,wrap折行/viewview classtext stylewidth: 280rpx;一行显示不全,wrap折行/viewview classtext stylewidth: 280rpx;一行显示不全,wrap折行/view
/view.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.uni-wrap {-webkit-flex-wrap: wrap;flex-wrap: wrap;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}3.3.10 横向布局-垂直分布
view classuni-flex uni-rowview classtext uni-flex uni-vertical uni-vertical-toptext垂直居顶/text/viewview classtext uni-flex uni-vertical uni-vertical-centertext垂直居中/text/viewview classtext uni-flex uni-vertical uni-vertical-endtext垂直居底/text/view
/view.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.uni-vertical {-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;
}
.uni-vertical-top {-webkit-align-items: flex-start;align-items: flex-start;
}
.uni-vertical-center {-webkit-align-items: center;align-items: center;
}
.uni-vertical-end {-webkit-align-items: flex-end;align-items: flex-end;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}
