uniapp微信小程序横竖屏切换样式适配

停留的章小鱼

已于 2023-06-20 14:32:19 修改

阅读量1w

点赞数 13

文章标签：微信小程序 uni-app 前端

于 2023-06-15 16:01:44 首次发布

本文链接：https://blog.youkuaiyun.com/2201_75870706/article/details/131228453

版权

本文介绍了如何使用CSS3的vmax和vmin属性来实现横竖屏的适配，以及在小程序中配置横竖屏切换的方法。通过vmin单位，可以确保元素尺寸在不同屏幕方向下保持一致。同时，提供了SCSS函数tovmin来方便转换rpx到vmin，并给出了实际的页面布局示例代码，包括表格和分页功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、首先明白要使用什么布局才能实现横竖屏适配？

1、rpx布局是不能直接实现的，写两套（横屏、竖屏）样式才可以达到想要的效果

2、使用：百分比、rem、vw\vh、vmin\vmax、px（px布局在不同设备上有差异）都可以一套样式实现横竖屏适配

二、本文重点说css3的两个属性vmax和vmin实现适配：

1、首先简单介绍下css3的两个属性vmax和vmin:

vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin

即：对于750rpx屏幕的宽度的手机，vmin不管横竖屏的情况下，100vmin都是手机屏幕的宽度

公式：x rpx=( x * 100 / 750)vmin 即：10rpx = (10*100/750)vmin

使用scss声明tovmin函数：

<style lang="scss" scoped>
	@function tovmin($rpx) {
		//$rpx为需要转换的字号
		@return #{$rpx * 100 / 750}vmin;
	}
</style>

三、实现横竖屏适配demo：

1、效果图：

竖屏：

横屏：

2、代码：

首先配置开启小程序自带的横竖屏切换属性：

（1）单个页面固定横屏：

{
	"path": "pages/pageTable/pageTable",
	"style": {
		"navigationBarTitleText": "表格",
        "mp-weixin": {
             "pageOrientation": "landscape"//横屏
        }
	}
} 
//pageOrientation - 有三个值:auto:自动；landscape：横屏；portrait ：竖屏

（2）全局设置所有页面开启，在pages.json文件全局样式中使用"pageOrientation": "auto"

"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"pageOrientation": "auto"//横屏配置 auto自动 / portrait竖屏 / landscape横屏
	},

页面代码：

！！！直接复制运行可测：

<template>
	<view>
		<view class="user-card">
			<view class="header">
				{{itemType!='1'?'康复项目查询':'家长签名'}}
			</view>
			<view class="row space-between titlre">
				<view>
					<text>住院号：</text>{{'2023001'}}
				</view>
				<view class="">
					<text>姓名：</text>{{'章小鱼'}}
				</view>
				<view class="">
					<text>性别：</text>男
				</view>
			</view>
		</view>
		<view class="uni-container">
			<uni-table ref="table" :loading="loading" border type="selection" emptyText="暂无更多数据"
				@selection-change="selectionChange">
				<view>
					<uni-tr>
						<uni-th width="150" align="center">日期</uni-th>
						<uni-th width="150" align="center">姓名</uni-th>
						<uni-th width="180" align="center">地址</uni-th>
						<uni-th width="204" align="center">设置</uni-th>
					</uni-tr>
				</view>
				<scroll-view scroll-y="true" :style="[Style]">
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td width="150" align="center">{{ item.date }}</uni-td>
						<uni-td width="150" align="center">
							<view class="name">{{ item.name }}</view>
						</uni-td>
						<uni-td width="180" align="center">{{ item.address }}</uni-td>
						<uni-td width="204" align="center">
							<view class="uni-group">
								<button class="uni-button" size="mini" type="primary">修改</button>
								<button class="uni-button" size="mini" type="warn">删除</button>
							</view>
						</uni-td>
					</uni-tr>
				</scroll-view>
			</uni-table>
			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent"
					:total="total" @change="change" /></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemType: '1',
				scrollview_height: '',
				searchVal: '',
				tableData: [],
				// 每页数据量
				pageSize: 8,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				tableList: [{
					"date": "2020-09-01",
					"name": "Dcloud1",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-02",
					"name": "Dcloud2",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-03",
					"name": "Dcloud3",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-04",
					"name": "Dcloud4",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-05",
					"name": "Dcloud5",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-06",
					"name": "Dcloud6",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-07",
					"name": "Dcloud7",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-08",
					"name": "Dcloud8",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-09",
					"name": "Dcloud9",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-10",
					"name": "Dcloud10",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-11",
					"name": "Dcloud11",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-12",
					"name": "Dcloud12",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-13",
					"name": "Dcloud13",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-14",
					"name": "Dcloud14",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-15",
					"name": "Dcloud15",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-16",
					"name": "Dcloud16",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-01",
					"name": "Dcloud17",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-02",
					"name": "Dcloud18",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-03",
					"name": "Dcloud19",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-04",
					"name": "Dcloud20",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-05",
					"name": "Dcloud21",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-06",
					"name": "Dcloud22",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-07",
					"name": "Dcloud23",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-08",
					"name": "Dcloud24",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-09",
					"name": "Dcloud25",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-10",
					"name": "Dcloud26",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-11",
					"name": "Dcloud27",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-12",
					"name": "Dcloud28",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-13",
					"name": "Dcloud29",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-14",
					"name": "Dcloud30",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-15",
					"name": "Dcloud31",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-16",
					"name": "Dcloud32",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-01",
					"name": "Dcloud33",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-02",
					"name": "Dcloud34",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-03",
					"name": "Dcloud35",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-04",
					"name": "Dcloud36",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-05",
					"name": "Dcloud37",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-06",
					"name": "Dcloud38",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-07",
					"name": "Dcloud39",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-08",
					"name": "Dcloud40",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-09",
					"name": "Dcloud41",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-10",
					"name": "Dcloud42",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-11",
					"name": "Dcloud43",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-12",
					"name": "Dcloud44",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-13",
					"name": "Dcloud45",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-14",
					"name": "Dcloud46",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-15",
					"name": "Dcloud47",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-16",
					"name": "Dcloud48",
					"address": "上海市普陀区金沙江路 1516 弄"
				}]
			}
		},
		computed: {
			Style() {
				let obj = {
					"height": `${this.scrollview_height}px`
				}
				return obj
			},
		},
		onReady() { //比onload快
			this.setHeight()
		},
		onLoad() {
			this.selectedIndexs = []
			this.getData(1)
		},
		mounted() {
			// 监听屏幕方向的变化
			uni.onWindowResize(this.handleOrientationChange);
		},
		methods: {
			// 处理屏幕方向的变化
			handleOrientationChange() {
				const {
					screenWidth,
					screenHeight
				} = uni.getSystemInfoSync();
				const isLandscape = screenWidth > screenHeight;
				if (isLandscape) {
					// 横屏
					this.setHeight(31)
				} else {
					// 竖屏
					this.setHeight(88)
				}
			},
			setHeight(height=88){
				// 计算 scroll-view 的高度
				let userCard = 0
				let card = 0
				let bodyH = uni.getSystemInfoSync().windowHeight
				let query = uni.createSelectorQuery().in(this);
				query.select('.user-card').boundingClientRect(rect => {
					userCard = rect.height;
					console.log(bodyH,userCard,rect);
					this.scrollview_height = (bodyH - userCard - height);
				}).exec();
			},
			// 多选
			selectionChange(e) {
				console.log(e.detail.index)
				this.selectedIndexs = e.detail.index
			},
			// 分页触发
			change(e) {
				this.$refs.table.clearSelection()
				this.selectedIndexs.length = 0
				this.getData(e.current)
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true
				this.pageCurrent = pageCurrent
				this.request({
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					value: value,
					success: res => {
						console.log('data', res);
						this.tableData = res.data
						this.total = res.total
						this.loading = false
					}
				})
			},
			// 伪request请求
			request(options) {
				const {
					pageSize,
					pageCurrent,
					success,
					value
				} = options
				let total = this.tableList.length
				let data = this.tableList.filter((item, index) => {
					const idx = index - (pageCurrent - 1) * pageSize
					return idx < pageSize && idx >= 0
				})
				if (value) {
					data = []
					this.tableList.forEach(item => {
						if (item.name.indexOf(value) !== -1) {
							data.push(item)
						}
					})
					total = data.length
				}

				setTimeout(() => {
					typeof success === 'function' &&
						success({
							data: data,
							total: total
						})
				}, 500)
			}
		}
	}
</script>
<style lang="scss">
	@function tovmin($rpx) {
		//$rpx为需要转换的字号
		@return #{$rpx * 100 / 750}vmin;
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.header {
		padding-top: tovmin(10);
		padding-left: tovmin(20);
		line-height: tovmin(60);
		font-size: tovmin(36);
		font-weight: 600;
		color: #2B2B2B;
		letter-spacing: tovmin(10);
	}

	.titlre {
		padding: tovmin(16) tovmin(22);
		text {
			font-size: tovmin(30);
			font-weight: 600;
		}
	}

	.u-td {
		height: auto;
	}

	.u-th {
		height: auto;
	}
    .row {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.center {
		align-items: center;
		justify-content: center;
	}

	.end {
		justify-content: flex-end;
	}

	.space-between {
		justify-content: space-between;
	}

	.space-around {
		justify-content: space-around;
	}

	.column {
		display: flex;
		flex-direction: column;
	}
</style>