由于小程序不支持横屏,而产品需求又必须是横屏操作。


然后我在 wxml 整个外层包了个 view ,并使用样式将其旋转了 90度。transform: rotate(90deg);


页面中使用了 swiper,然后手势滑动操作就出现和预期不一样的效果。如下所示。


手势  ⬅️ ➡️ 滑动的时候,图片是 ⬆️⬇️ 切换。


然后设置了 swiper 的vertical 属性后如下。


手势⬆️⬇️ 滑动的时候,图片是 ⬅️ ➡️ 切换。


wxml 页面代码如下

<view style='transform: rotate(90deg);width:{{windowHeight}}px;height:{{windowWidth}}px;transform-origin:{{windowWidth/2}}px 50%;'>
展开全部
收起
3回答
提交回答
  • 至过去的我

    2044人对此回答表示赞同

    我是未来的你,你现在是不是在年找寻小程序答案。你不要感觉诧异,给你来信原因,就是让你不在后悔。今天去学习如何推广小程序,相信......点击查看更多>
    发布于
  • Mieczyslaw

    18人对此回答表示赞同

    甚是销魂啊,不过,这是正常的啊,你把组件横过来显示了,滑动的左右还是左右,上下还是上下呀,没毛病

    展开
    18
    0回复
    发布于 5年前

    评论(0)

    收起评论

  • Roman抽

    16人对此回答表示赞同

    有人试过如何解决吗?没有我再过一段时间来问。现提供示例代码:

    展开
    16
    0回复
    发布于 5年前

    评论(0)

    收起评论

  • 胡歌是我哥

    11人对此回答表示赞同

    看看这个

    展开
    11
    2回复
    发布于 5年前

    评论(2)

    收起评论

    • 万发财 2019-01-16 14:38

      帮了我大忙

      回复
    • 荣光不复 2019-01-18 08:37

      那个也是我发的贴。不过现在都已经解决了,还封装了支持横屏的容器组件和横屏的swiper组件。????

      回复
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
咨询热线

13312967497

扫码添加业务即可随时咨询 还可领取小程序推广攻略

业务咨询: 13312967497
扫码咨询

扫码咨询套餐

回到顶部