devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：Monodyee | 2024-02-27 12:16:06

赞

踩

uniapp竖屏和横屏适配

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

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

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

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

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

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

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

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

使用scss声明tovmin函数：

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

三、实现横竖屏适配demo：

1、效果图：

竖屏：


横屏：

 

2、代码：

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

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

  1. {
  2. 	"path": "pages/pageTable/pageTable",
  3. 	"style": {
  4. 		"navigationBarTitleText": "表格",
  5.         "mp-weixin": {
  6.              "pageOrientation": "landscape"//横屏
  7.         }
  8. 	}
  9. } 
  10. //pageOrientation - 有三个值:auto:自动；landscape：横屏；portrait ：竖屏

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

  1. "globalStyle": {
  2. 		"navigationBarTextStyle": "black",
  3. 		"navigationBarTitleText": "uni-app",
  4. 		"navigationBarBackgroundColor": "#F8F8F8",
  5. 		"backgroundColor": "#F8F8F8",
  6. 		"pageOrientation": "auto"//横屏配置 auto自动 / portrait竖屏 / landscape横屏
  7. 	},

页面代码：

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

  1. <template>
  2. 	<view>
  3. 		<view class="user-card">
  4. 			<view class="header">
  5. 				{{itemType!='1'?'康复项目查询':'家长签名'}}
  6. 			</view>
  7. 			<view class="row space-between titlre">
  8. 				<view>
  9. 					<text>住院号：</text>{{'2023001'}}
  10. 				</view>
  11. 				<view class="">
  12. 					<text>姓名：</text>{{'章小鱼'}}
  13. 				</view>
  14. 				<view class="">
  15. 					<text>性别：</text>男
  16. 				</view>
  17. 			</view>
  18. 		</view>
  19. 		<view class="uni-container">
  20. 			<uni-table ref="table" :loading="loading" border type="selection" emptyText="暂无更多数据"
  21. 				@selection-change="selectionChange">
  22. 				<view>
  23. 					<uni-tr>
  24. 						<uni-th width="150" align="center">日期</uni-th>
  25. 						<uni-th width="150" align="center">姓名</uni-th>
  26. 						<uni-th width="180" align="center">地址</uni-th>
  27. 						<uni-th width="204" align="center">设置</uni-th>
  28. 					</uni-tr>
  29. 				</view>
  30. 				<scroll-view scroll-y="true" :style="[Style]">
  31. 					<uni-tr v-for="(item, index) in tableData" :key="index">
  32. 						<uni-td width="150" align="center">{{ item.date }}</uni-td>
  33. 						<uni-td width="150" align="center">
  34. 							<view class="name">{{ item.name }}</view>
  35. 						</uni-td>
  36. 						<uni-td width="180" align="center">{{ item.address }}</uni-td>
  37. 						<uni-td width="204" align="center">
  38. 							<view class="uni-group">
  39. 								<button class="uni-button" size="mini" type="primary">修改</button>
  40. 								<button class="uni-button" size="mini" type="warn">删除</button>
  41. 							</view>
  42. 						</uni-td>
  43. 					</uni-tr>
  44. 				</scroll-view>
  45. 			</uni-table>
  46. 			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent"
  47. 					:total="total" @change="change" /></view>
  48. 		</view>
  49. 	</view>
  50. </template>
  51.  
  52. <script>
  53. 	export default {
  54. 		data() {
  55. 			return {
  56. 				itemType: '1',
  57. 				scrollview_height: '',
  58. 				searchVal: '',
  59. 				tableData: [],
  60. 				// 每页数据量
  61. 				pageSize: 8,
  62. 				// 当前页
  63. 				pageCurrent: 1,
  64. 				// 数据总量
  65. 				total: 0,
  66. 				loading: false,
  67. 				tableList: [{
  68. 					"date": "2020-09-01",
  69. 					"name": "Dcloud1",
  70. 					"address": "上海市普陀区金沙江路 1518 弄"
  71. 				}, {
  72. 					"date": "2020-09-02",
  73. 					"name": "Dcloud2",
  74. 					"address": "上海市普陀区金沙江路 1517 弄"
  75. 				}, {
  76. 					"date": "2020-09-03",
  77. 					"name": "Dcloud3",
  78. 					"address": "上海市普陀区金沙江路 1519 弄"
  79. 				}, {
  80. 					"date": "2020-09-04",
  81. 					"name": "Dcloud4",
  82. 					"address": "上海市普陀区金沙江路 1516 弄"
  83. 				}, {
  84. 					"date": "2020-09-05",
  85. 					"name": "Dcloud5",
  86. 					"address": "上海市普陀区金沙江路 1518 弄"
  87. 				}, {
  88. 					"date": "2020-09-06",
  89. 					"name": "Dcloud6",
  90. 					"address": "上海市普陀区金沙江路 1517 弄"
  91. 				}, {
  92. 					"date": "2020-09-07",
  93. 					"name": "Dcloud7",
  94. 					"address": "上海市普陀区金沙江路 1519 弄"
  95. 				}, {
  96. 					"date": "2020-09-08",
  97. 					"name": "Dcloud8",
  98. 					"address": "上海市普陀区金沙江路 1516 弄"
  99. 				}, {
  100. 					"date": "2020-09-09",
  101. 					"name": "Dcloud9",
  102. 					"address": "上海市普陀区金沙江路 1518 弄"
  103. 				}, {
  104. 					"date": "2020-09-10",
  105. 					"name": "Dcloud10",
  106. 					"address": "上海市普陀区金沙江路 1517 弄"
  107. 				}, {
  108. 					"date": "2020-09-11",
  109. 					"name": "Dcloud11",
  110. 					"address": "上海市普陀区金沙江路 1519 弄"
  111. 				}, {
  112. 					"date": "2020-09-12",
  113. 					"name": "Dcloud12",
  114. 					"address": "上海市普陀区金沙江路 1516 弄"
  115. 				}, {
  116. 					"date": "2020-09-13",
  117. 					"name": "Dcloud13",
  118. 					"address": "上海市普陀区金沙江路 1518 弄"
  119. 				}, {
  120. 					"date": "2020-09-14",
  121. 					"name": "Dcloud14",
  122. 					"address": "上海市普陀区金沙江路 1517 弄"
  123. 				}, {
  124. 					"date": "2020-09-15",
  125. 					"name": "Dcloud15",
  126. 					"address": "上海市普陀区金沙江路 1519 弄"
  127. 				}, {
  128. 					"date": "2020-09-16",
  129. 					"name": "Dcloud16",
  130. 					"address": "上海市普陀区金沙江路 1516 弄"
  131. 				}, {
  132. 					"date": "2020-09-01",
  133. 					"name": "Dcloud17",
  134. 					"address": "上海市普陀区金沙江路 1518 弄"
  135. 				}, {
  136. 					"date": "2020-09-02",
  137. 					"name": "Dcloud18",
  138. 					"address": "上海市普陀区金沙江路 1517 弄"
  139. 				}, {
  140. 					"date": "2020-09-03",
  141. 					"name": "Dcloud19",
  142. 					"address": "上海市普陀区金沙江路 1519 弄"
  143. 				}, {
  144. 					"date": "2020-09-04",
  145. 					"name": "Dcloud20",
  146. 					"address": "上海市普陀区金沙江路 1516 弄"
  147. 				}, {
  148. 					"date": "2020-09-05",
  149. 					"name": "Dcloud21",
  150. 					"address": "上海市普陀区金沙江路 1518 弄"
  151. 				}, {
  152. 					"date": "2020-09-06",
  153. 					"name": "Dcloud22",
  154. 					"address": "上海市普陀区金沙江路 1517 弄"
  155. 				}, {
  156. 					"date": "2020-09-07",
  157. 					"name": "Dcloud23",
  158. 					"address": "上海市普陀区金沙江路 1519 弄"
  159. 				}, {
  160. 					"date": "2020-09-08",
  161. 					"name": "Dcloud24",
  162. 					"address": "上海市普陀区金沙江路 1516 弄"
  163. 				}, {
  164. 					"date": "2020-09-09",
  165. 					"name": "Dcloud25",
  166. 					"address": "上海市普陀区金沙江路 1518 弄"
  167. 				}, {
  168. 					"date": "2020-09-10",
  169. 					"name": "Dcloud26",
  170. 					"address": "上海市普陀区金沙江路 1517 弄"
  171. 				}, {
  172. 					"date": "2020-09-11",
  173. 					"name": "Dcloud27",
  174. 					"address": "上海市普陀区金沙江路 1519 弄"
  175. 				}, {
  176. 					"date": "2020-09-12",
  177. 					"name": "Dcloud28",
  178. 					"address": "上海市普陀区金沙江路 1516 弄"
  179. 				}, {
  180. 					"date": "2020-09-13",
  181. 					"name": "Dcloud29",
  182. 					"address": "上海市普陀区金沙江路 1518 弄"
  183. 				}, {
  184. 					"date": "2020-09-14",
  185. 					"name": "Dcloud30",
  186. 					"address": "上海市普陀区金沙江路 1517 弄"
  187. 				}, {
  188. 					"date": "2020-09-15",
  189. 					"name": "Dcloud31",
  190. 					"address": "上海市普陀区金沙江路 1519 弄"
  191. 				}, {
  192. 					"date": "2020-09-16",
  193. 					"name": "Dcloud32",
  194. 					"address": "上海市普陀区金沙江路 1516 弄"
  195. 				}, {
  196. 					"date": "2020-09-01",
  197. 					"name": "Dcloud33",
  198. 					"address": "上海市普陀区金沙江路 1518 弄"
  199. 				}, {
  200. 					"date": "2020-09-02",
  201. 					"name": "Dcloud34",
  202. 					"address": "上海市普陀区金沙江路 1517 弄"
  203. 				}, {
  204. 					"date": "2020-09-03",
  205. 					"name": "Dcloud35",
  206. 					"address": "上海市普陀区金沙江路 1519 弄"
  207. 				}, {
  208. 					"date": "2020-09-04",
  209. 					"name": "Dcloud36",
  210. 					"address": "上海市普陀区金沙江路 1516 弄"
  211. 				}, {
  212. 					"date": "2020-09-05",
  213. 					"name": "Dcloud37",
  214. 					"address": "上海市普陀区金沙江路 1518 弄"
  215. 				}, {
  216. 					"date": "2020-09-06",
  217. 					"name": "Dcloud38",
  218. 					"address": "上海市普陀区金沙江路 1517 弄"
  219. 				}, {
  220. 					"date": "2020-09-07",
  221. 					"name": "Dcloud39",
  222. 					"address": "上海市普陀区金沙江路 1519 弄"
  223. 				}, {
  224. 					"date": "2020-09-08",
  225. 					"name": "Dcloud40",
  226. 					"address": "上海市普陀区金沙江路 1516 弄"
  227. 				}, {
  228. 					"date": "2020-09-09",
  229. 					"name": "Dcloud41",
  230. 					"address": "上海市普陀区金沙江路 1518 弄"
  231. 				}, {
  232. 					"date": "2020-09-10",
  233. 					"name": "Dcloud42",
  234. 					"address": "上海市普陀区金沙江路 1517 弄"
  235. 				}, {
  236. 					"date": "2020-09-11",
  237. 					"name": "Dcloud43",
  238. 					"address": "上海市普陀区金沙江路 1519 弄"
  239. 				}, {
  240. 					"date": "2020-09-12",
  241. 					"name": "Dcloud44",
  242. 					"address": "上海市普陀区金沙江路 1516 弄"
  243. 				}, {
  244. 					"date": "2020-09-13",
  245. 					"name": "Dcloud45",
  246. 					"address": "上海市普陀区金沙江路 1518 弄"
  247. 				}, {
  248. 					"date": "2020-09-14",
  249. 					"name": "Dcloud46",
  250. 					"address": "上海市普陀区金沙江路 1517 弄"
  251. 				}, {
  252. 					"date": "2020-09-15",
  253. 					"name": "Dcloud47",
  254. 					"address": "上海市普陀区金沙江路 1519 弄"
  255. 				}, {
  256. 					"date": "2020-09-16",
  257. 					"name": "Dcloud48",
  258. 					"address": "上海市普陀区金沙江路 1516 弄"
  259. 				}]
  260. 			}
  261. 		},
  262. 		computed: {
  263. 			Style() {
  264. 				let obj = {
  265. 					"height": `${this.scrollview_height}px`
  266. 				}
  267. 				return obj
  268. 			},
  269. 		},
  270. 		onReady() { //比onload快
  271. 			this.setHeight()
  272. 		},
  273. 		onLoad() {
  274. 			this.selectedIndexs = []
  275. 			this.getData(1)
  276. 		},
  277. 		mounted() {
  278. 			// 监听屏幕方向的变化
  279. 			uni.onWindowResize(this.handleOrientationChange);
  280. 		},
  281. 		methods: {
  282. 			// 处理屏幕方向的变化
  283. 			handleOrientationChange() {
  284. 				const {
  285. 					screenWidth,
  286. 					screenHeight
  287. 				} = uni.getSystemInfoSync();
  288. 				const isLandscape = screenWidth > screenHeight;
  289. 				if (isLandscape) {
  290. 					// 横屏
  291. 					this.setHeight(31)
  292. 				} else {
  293. 					// 竖屏
  294. 					this.setHeight(88)
  295. 				}
  296. 			},
  297. 			setHeight(height=88){
  298. 				// 计算 scroll-view 的高度
  299. 				let userCard = 0
  300. 				let card = 0
  301. 				let bodyH = uni.getSystemInfoSync().windowHeight
  302. 				let query = uni.createSelectorQuery().in(this);
  303. 				query.select('.user-card').boundingClientRect(rect => {
  304. 					userCard = rect.height;
  305. 					console.log(bodyH,userCard,rect);
  306. 					this.scrollview_height = (bodyH - userCard - height);
  307. 				}).exec();
  308. 			},
  309. 			// 多选
  310. 			selectionChange(e) {
  311. 				console.log(e.detail.index)
  312. 				this.selectedIndexs = e.detail.index
  313. 			},
  314. 			// 分页触发
  315. 			change(e) {
  316. 				this.$refs.table.clearSelection()
  317. 				this.selectedIndexs.length = 0
  318. 				this.getData(e.current)
  319. 			},
  320. 			// 获取数据
  321. 			getData(pageCurrent, value = '') {
  322. 				this.loading = true
  323. 				this.pageCurrent = pageCurrent
  324. 				this.request({
  325. 					pageSize: this.pageSize,
  326. 					pageCurrent: pageCurrent,
  327. 					value: value,
  328. 					success: res => {
  329. 						console.log('data', res);
  330. 						this.tableData = res.data
  331. 						this.total = res.total
  332. 						this.loading = false
  333. 					}
  334. 				})
  335. 			},
  336. 			// 伪request请求
  337. 			request(options) {
  338. 				const {
  339. 					pageSize,
  340. 					pageCurrent,
  341. 					success,
  342. 					value
  343. 				} = options
  344. 				let total = this.tableList.length
  345. 				let data = this.tableList.filter((item, index) => {
  346. 					const idx = index - (pageCurrent - 1) * pageSize
  347. 					return idx < pageSize && idx >= 0
  348. 				})
  349. 				if (value) {
  350. 					data = []
  351. 					this.tableList.forEach(item => {
  352. 						if (item.name.indexOf(value) !== -1) {
  353. 							data.push(item)
  354. 						}
  355. 					})
  356. 					total = data.length
  357. 				}
  358.  
  359. 				setTimeout(() => {
  360. 					typeof success === 'function' &&
  361. 						success({
  362. 							data: data,
  363. 							total: total
  364. 						})
  365. 				}, 500)
  366. 			}
  367. 		}
  368. 	}
  369. </script>
  370. <style lang="scss">
  371. 	@function tovmin($rpx) {
  372. 		//$rpx为需要转换的字号
  373. 		@return #{$rpx * 100 / 750}vmin;
  374. 	}
  375.  
  376. 	.uni-group {
  377. 		display: flex;
  378. 		align-items: center;
  379. 	}
  380.  
  381. 	.header {
  382. 		padding-top: tovmin(10);
  383. 		padding-left: tovmin(20);
  384. 		line-height: tovmin(60);
  385. 		font-size: tovmin(36);
  386. 		font-weight: 600;
  387. 		color: #2B2B2B;
  388. 		letter-spacing: tovmin(10);
  389. 	}
  390.  
  391. 	.titlre {
  392. 		padding: tovmin(16) tovmin(22);
  393. 		text {
  394. 			font-size: tovmin(30);
  395. 			font-weight: 600;
  396. 		}
  397. 	}
  398.  
  399. 	.u-td {
  400. 		height: auto;
  401. 	}
  402.  
  403. 	.u-th {
  404. 		height: auto;
  405. 	}
  406.     .row {
  407. 		display: flex;
  408. 		flex-direction: row;
  409. 		align-items: center;
  410. 	}
  411.  
  412. 	.center {
  413. 		align-items: center;
  414. 		justify-content: center;
  415. 	}
  416.  
  417. 	.end {
  418. 		justify-content: flex-end;
  419. 	}
  420.  
  421. 	.space-between {
  422. 		justify-content: space-between;
  423. 	}
  424.  
  425. 	.space-around {
  426. 		justify-content: space-around;
  427. 	}
  428.  
  429. 	.column {
  430. 		display: flex;
  431. 		flex-direction: column;
  432. 	}
  433. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/152869
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号