Two horizontal and vertical screen switching schemes for uniapp mobile terminal

Global configuration horizontal and vertical screens

1、 stay pages.json Add configuration in ：

"globalStyle": {
    
		"pageOrientation": "auto"
	}

This method can configure the horizontal and vertical screen switching of all pages （）

2、 open uniapp Of manifest.json file , Find the last column of the menu on the left “ Source view ”, Click in , Add the following code at the bottom

"orientation" : [
		// Vertical screen positive direction 
		"portrait-primary",
		// The vertical screen is in the opposite direction 
		"portrait-secondary",
		// Horizontal screen positive direction 
		"landscape-primary",
		// The horizontal screen is in the opposite direction 
		"landscape-secondary",
		// Natural direction 
		"default"
	]

Scheme 1 、 Page automatically switched between horizontal and vertical screens

explain ： This scheme is to specify a certain page According to the user's mobile phone / Vertical automatic switching , But you need to write two sets of styles , One set horizontally and one set vertically , stay data Define a value to judge horizontal and vertical , Match again uniapp Page lifecycle onResize Listen for changes in the window , Transverse time isLandScape The initial value is true, Vertical false, To the outermost layer view The class style of the root tag uses ternary judgment to dynamically bind ,isLandScape The value of is true Use horizontal screen style ,false Use vertical screen style .

---

1、 Let's take a look at the rendering first

2、 Pages that need automatic switching between horizontal and vertical screens are written

	//  After the page is loaded, give it to the natural direction , It can automatically switch according to the user's vertical and horizontal 
	onLoad() {
    
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('default');
			// #endif
		},
	//  Clear the positive direction of the horizontal screen when the page is closed 
	onUnload() {
    
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('portrait-primary');
			// #endif
		},

3、 Other pages that don't need horizontal screen for example :index.vue

Set the vertical screen in two lifecycles And clear when closing the page

	onLoad() {
    
			// #ifdef APP-PLUS
				 plus.screen.lockOrientation('portrait-primary'); 
			// #endif
		},
	onUnload() {
    
			// #ifdef APP-PLUS
				  plus.screen.lockOrientation('portrait-primary'); 
			// #endif
		},

In particular ：// #ifdef APP-PLUS And // #endif Is to let the code in app take effect , solve plus is not defined The error of

4、 Core logic code

①、 stay data The initial value to judge the horizontal and vertical screen switching

isLandScape: false //  Horizontal screen or not , The default is vertical 

②、 In the page lifecycle onResize Changes in the monitoring window in

		onResize() {
    
			let _this = this
			uni.getSystemInfo({
    
				success: function(res) {
    
					if (res.windowWidth > res.windowHeight) {
    
						//  Horizontal screen 
						_this.isLandScape = true
					} else {
    
						//  Vertical screen 
						_this.isLandScape = false
					}
				}
			})
		}

5、 Use CSS The preprocessing language writes two sets of styles ( cross / vertical ), I use it scss

//  Vertical screen  chart_portrait Is the parent wrapper ,tbcls Just my table style , You can write corresponding styles according to your specific needs  .chart_portrait {
    
		height: 36vh;
		font-size: 2vh;
		text-align: center; .tbcls {
    
			width: 97vw;
		}
	}

	//  Horizontal screen  .chart_lanscape {
    
		height: 82vh;
		font-size: 2vw;
		text-align: center; .tbcls {
    
			width: 98vw;
		}

	}

6、 Use ternary judgment data Medium isLandScape Is it false, If yes, vertical screen , Then use the vertical screen style , Otherwise, use horizontal screen style

<view :class="{
     'chart_portrait': !isLandScape, 'chart_lanscape': isLandScape}">
</view>

Option two Enter the specified page to fix the dead horizontal screen , Automatically switch to vertical screen

explain ： This scheme is relatively simple , Just enter and switch to horizontal screen , Come out and cut the vertical screen , But the root tag view The style needs to be modified , I am using vw/vh, It will automatically adapt to the height and width , You can also use percentages and rem, But don't use rpx, A pit

---

1、 Or look at the renderings first

2、js

  onLoad() {
    
    //  Enter the current page   Automatically switch to fixed horizontal screen 
    // #ifdef APP-PLUS
    plus.screen.lockOrientation("landscape-primary");
    // #endif
  },
  onUnload() {
    
    //  When exiting the current page   Automatically switch to vertical screen 
    // #ifdef APP-PLUS
    plus.screen.lockOrientation("portrait-primary");
    // #endif
  },

3、css

//  Horizontal screen  .chart_lanscape {
    
  height: 82vh;
  font-size: 2vw;
  text-align: center; //  This is my table class name   Make it as wide as the viewport 98% .tbcls {
    
    width: 98vw;
  }
}

The difference between the two schemes

• The same thing ： Is to specify a certain page , Both types of exit from the current page are automatically switched to the vertical screen mode

• Difference ：

  • The first one is ： According to the user's mobile phone / Vertical automatic switching , But you need to write two sets of styles , One set horizontally and one set vertically ,

    stay data Define a value to judge horizontal and vertical , Match again uniapp Page lifecycle onResize Listen for changes in the window , Transverse time isLandScape The initial value is true, Vertical false, To the outermost layer view The class style of the root tag uses ternary judgment to dynamically bind ,isLandScape The value of is true Use horizontal screen style ,false Use vertical screen style .

  • The second kind ： Fixed dead horizontal screen when entering , Just write a set of class styles .

Be careful

Need horizontal / Try to use the vertical screen switching page Percentage layout and px , rem, There is rpx pit

ending

I have posted the source code of these two renderings on the code cloud , Interested friends can read or clone it locally and debug it with real machine to feel the horizontal and vertical screen ( I don't know how to debug the real machine , Click me to enter the tutorial ). I hope this article can help you , Thank you for watching .

Links to articles :https://blog.csdn.net/weixin_50880237/article/details/109848509
gitee Source code ：https://gitee.com/lhs1303574731/uni-moblile-demo