微信小程序scroll-view横向显示及异常显示处理

在微信小程序开发过程中，我们会经常使用到scroll-view组件，有时我们要在scroll-view中水平显示列表，类似这样：

但是当我们设置了scroll-view的flex-direction:row等属性时，会发现没有用，列表依然垂直显示，像这样：

主要是因为display:flex等属性对于scroll-view来说是没有用的，此时我们只需要设置子试图的属性display: inline-block即可，不需要设置scroll-view的flex属性。

但是当我们设置完成后可能会出现一下情况：

会发现列表好像没有对齐，有两个子试图错位了，接下来我们可以通过设置子属性vertical-align:top来解决，最后会得到我们想要的效果。

方法/步骤

双击小程序开发者工具，打开小程序开发者工具，我们可以看到在启动界面，有很多我们之前开发过得小程序列表。

小程序横屏怎么做

我们选择其中的一个小程序进行测试，该小程序页面较多，内容较丰富，有利于我们演示横屏。

小程序横屏怎么做

首先看第一种情况，我们找到一个页面，打开该页面的json文件，可以看到，目前里面没有配置任何关于横屏的设置，界面也是竖的。

小程序横屏怎么做

然后我们在该json文件里，增加一句话【"pageOrientation": "landscape"】，这句话使得只要进入该页面，界面自动横屏，即不需要手机横过来也会强制横屏。

小程序横屏怎么做

然后我们看另一个横屏方法，打开全局变量app.json文件，在window里，目前没有看到关于横屏的设置。

小程序横屏怎么做

在window里面，加入一句话，【"pageOrientation": "auto"】，这句话加入之后，保存下文件，然后可以看到调试工具上方多了一个【旋转】按钮，如图所示，我们点击该按钮后，界面自动横过来了。

这里设置了全局变量，在手机横过来时，自动旋转所有的页面。然后我们刚才点击的【旋转】按钮，也是模拟手机的旋转功能，故界面横过来了。

如果觉得有用，记得点赞或投票！

小程序横屏怎么做

---