view框垂直居中
例如,让下面的红框垂直居中,即不管页面变成多大的,红框部分都垂直居中
line2的style="height: 100vh;display: flex;align-items: center;"
100vh说明让最外面的框铺满整个平面;
align-items:center即让里面的元素垂直居中
line3的 position: absolute;width: 100%;top:0;
position:absolute;说明让此view_id2块浮起来,即不属于最外面的view_id1块,这样下面的view_id3块才能在view_id1块中居中,而不受view_id2高度的影响
line11的style="width:100%;"
保证view_id3的宽度不出界,始终在页面内部
<template>
<view id='1' style="height: 100vh;display: flex;align-items: center;">
<view id='2' style="position: absolute;width: 100%;top:0;">
<u-notice-bar :show-icon='true' :scrollable='true' color='blue'
:single='true' mode="horizontal" type="primary" speed="50"
:text='list'></u-notice-bar>
<button class="cu-btn round bg-white shadow myBack" @click="goToLogin">退出</button>
<text class="helloUser" >您好,李启天</text>
</view>
<view id='3' class="padding text-center" style="width:100%;">
<view class="padding-xl radius shadow shadow-lg bg-white margin-top nav-li1" @click="wanzheng" >
<view class="halfWidth" >
<image class="myIcon" :src='icon_wanzheng'></image>
</view>
<view >
<view :style="{'color':iconColor[0]}">
完整问诊
</view>
<view class="text-gray myGrayText" >
四诊检测+在线中医
</view>
</view>
</view>
<view class="line2">
<view class="padding-xl radius shadow shadow-lg bg-white margin-top nav-li" @click="sizhen">
<view >
<image class="myIcon" :src='icon_sizhen'></image>
</view>
<view >
<view :style="{'color':iconColor[1]}">
四诊检测
</view>
<view class="text-gray myGrayText">
望闻问切 检测报告
</view>
</view>
</view>
<view class="padding-xl radius shadow shadow-lg bg-white margin-top nav-li" @click="zaixian">
<view >
<image class="myIcon" :src='icon_zaixian'></image>
</view>
<view >
<view :style="{'color':iconColor[2]}">
在线中医
</view>
<view class="text-gray myGrayText" >
视频问诊 实时沟通
</view>
</view>
</view>
</view>
</view>
</view>
</template>
使用uView的组件,但是又想修改uView的样式,可以在自己的页面样式中
line1的scoped说明不影响其他页面,样式仅作用于此页面,父组件的样式也不会影响到子组件
<style lang="scss" scoped>
/deep/.u-line{
bottom-width:20px;
}
</style>
假设uView中的组件中本来使用到的样式u-line的bottom-widht宽度为1px,但是我想在我自己写的某个页面使用20px的,又不想修改后影响下次使用,即下次在别的页面用到u-line时仍保持bottom-widht宽度为1px。这个时候就可以使用/deep/.u-line{}来修改为自己想要的样式。还不会影响到下次使用,貌似使用/deep/.u-line来修改的样式要放在style中的前面,放在末尾好像不生效。