uni-app微信小程序横竖屏切换样式适配

停留的章小鱼

2024-04-25 帮助1人

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

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>

这篇好文章是转载于：学新通技术网

uni-app微信小程序横竖屏切换样式适配

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

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

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

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

三、实现横竖屏适配demo：

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐

uni-app微信小程序横竖屏切换样式适配

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

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

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

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

三、实现横竖屏适配demo：

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐

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