1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：停留的章小鱼 分类：Toy博客 阅读(44) 违法举报

这篇具有很好参考价值的文章主要介绍了uniapp微信小程序横竖屏切换样式适配。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

 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、效果图：

竖屏：

微信小程序横竖屏切换,微信小程序,uni-app,前端
横屏：

 微信小程序横竖屏切换,微信小程序,uni-app,前端

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横屏
	},

页面代码：

！！！直接复制运行可测：文章来源地址https://www.toymoban.com/news/detail-595321.html

<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>

到了这里，关于uniapp微信小程序横竖屏切换样式适配的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • uni-app框架 微信小程序页面显示正常，但安卓页面样式显示异常

    uni-app框架 微信小程序页面显示正常，但安卓页面样式显示异常

    今天在继续复习uni-app项目时，使用模拟器运行时，突然发现封装的search组件样式无法正常显示，但是小程序页面又是正常的，打包后真机也是一样的结果。在uni-app的控制台报如下错误: [Vue warn]: Error in render: “TypeError: Cannot read property ‘children’ of undefined” TypeError: Cannot rea

    2024年04月11日
    浏览(69)

  • Uni-app实现左右滑动页面内容切换(兼容微信小程序)

    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档         前言         整体思路         一、HTML部分         二、Script部分         三、Style部分           （先声明哦我可不是偷懒，只是想学术借鉴一下）因为最近有在做左右滑动功能，

    2024年02月07日
    浏览(106)

  • placeholder样式自定义（uniapp 微信小程序、h5）

    一、使用uniapp开发 ①第一种方式：（写在行内） ②第二种方式： （给input加上placeholder-class属性，然后给该属性 设置一个类名，在style中设置样式。） 二、使用H5开发

    2024年02月09日
    浏览(40)

  • uniapp自定义全局loading组件（目前只适配微信小程序）

    1.首先在项目根目录创建vue.config.js文件代码如下; 2.main.js添加这段代码替换uniapp全局loading方法并且全局挂载组件 3.添加loading组件通过vuex控制组件loading状态

    2024年02月06日
    浏览(51)
  • uniapp实现微信小程序横屏适配问题demo效果（整理）

    uniapp实现微信小程序横屏适配问题demo效果（整理）

    使用VMIN进行布局 先了解css3的两个属性vmax和vmin 竖屏布局的时候，750rpx就是竖屏布局屏幕的宽度，vmin不管横竖屏的情况下，100vmin都是手机屏幕的宽度，所以rpx与vmin之间有一个换算的关系：x rpx=( x * 100 / 750)vmin。 也就是说： 75rpx转化为vmin就是 75 * 100/750=10vmin 所以我们将rpx转化

    2024年02月11日
    浏览(50)
  • uniapp自定义radio的样式，适用于微信小程序

    uniapp自定义radio的样式，适用于微信小程序

    uniapp内置组件是有官方定义的样式，下面如图所示。 但是注意一点： radio的默认颜色，在不同平台不一样。微信小程序是绿色的，抖音小程序为红色，其他平台是蓝色的。更改颜色使用color属性。 项目中需求的样式是不同于内置radio的 在这里打算自己写一个单选按钮，实现如

    2024年04月11日
    浏览(46)
  • uniapp做微信小程序，自定义checkbox和radio的样式

    uniapp做微信小程序，自定义checkbox和radio的样式

    用uniapp做个微信小程序，其中有用到自定义checkbox和radio的样式；代码记录如下： 自定义checkbox 在App.vue中写入样式： 在代码中引用： 自定义radio样式： 如果要全局改变radio的样式，需要将样式代码写在App.vue中，代码如下： 代码中引用： 如果不在全局改变radio样式，只在单个

    2024年02月15日
    浏览(40)

  • uniapp微信小程序切换到tabber页面没有自动刷新

    前言 通过uni.switchTab跳转到tabber页面比如个人中心页面，更新的数据没有刷新。导致页面的数据还是修改之前的 解决方法 在uni.switchTab()加入回调函数； uni.switchTab成功跳转后调用success，此时可以拿到跳转后页面的page对象，从而调用页面onLoad方法重载页面。 或者 两种方法只是

    2024年02月11日
    浏览(60)

  • uniapp小技巧之选择本地文件(注意这个方法只适配微信小程序和h5,app端未适配)

    注意注意一定注意app端不能用,想要app端选择上传文件去插件市场寻找,或私信我,我告诉你方法

    2024年02月12日
    浏览(44)

  • 解决 uniapp 修改uview样式，h5端生效，在微信小程序不生效。

    /deep/ 的兼容性不好，node-sass支持这个 /deep/ 。但是 node-sass 被 sass 和现代项目抛弃了。 如果项目里装了 sass 和 node-sass sass-loader会优先使用sass，sass只认识 ::v-deep 。 请根据自己的项目选择使用 ::v-deep 还是 /deep/ 。

    2024年02月03日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包