uniapp前端样式

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>
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

使用uView的组件，但是又想修改uView的样式，可以在自己的页面样式中

line1的scoped说明不影响其他页面，样式仅作用于此页面，父组件的样式也不会影响到子组件

<style lang="scss" scoped>   
	/deep/.u-line{
	bottom-width:20px;
	}
style>
1
2
3
4
5

假设uView中的组件中本来使用到的样式u-line的bottom-widht宽度为1px，但是我想在我自己写的某个页面使用20px的，又不想修改后影响下次使用，即下次在别的页面用到u-line时仍保持bottom-widht宽度为1px。这个时候就可以使用/deep/.u-line{}来修改为自己想要的样式。还不会影响到下次使用，貌似使用/deep/.u-line来修改的样式要放在style中的前面，放在末尾好像不生效。