uniapp微信小程序 实现页面横向显示

uniapp yekong

uniapp微信小程序开发,要求页面可以横向显示。在网上查找了一番实现方法,记录下来。
uniapp微信小程序 实现页面横向显示

pages修改

通过设置pageOrientation实现横向显示
portrait 竖向 (默认)
landscape 横向
auto 自适应

{
	"path": "pages/home/enterprise/trend",
	"style": {
		"navigationBarTitleText": "商品销售趋势",
		"pageOrientation": "landscape",
		"navigationBarTextStyle": "black"
	}
},

js方式

js文件中使用 wx.setPageOrientation 进行屏幕方向设置

wx.setPageOrientation({ orientation: 'landscape' })

整个小程序

app.json中加入

"window":{
    "pageOrientation": "landscape"
},

其他问题

当使用横向后,如果页面中使用了rpx,会导致页面内的元素变大,需要重新调整页面才可以。

项目使用实例

uniapp 微信小程序 建材云 案例

喜欢