公告列表
公告列表
收藏
回答

小程序屏幕旋转

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug swiper 微信iOS客户端 6.6.7 2.0

建议小程序支持横屏。 由于小程序不支持横屏，所以使用了 transform的 rotate将页面最外层的 view 组件 旋转了90度实现横屏效果。
再使用swiper时遇到左右滑动swiper时，子项上下滚动，设置上下滚动时，swiper子项左右滚动。


事实上页面还是竖屏，只是把页面内容旋转了而已。


手势↕️滑动，swiper↔️切换了。手势↔️滑动，swiper↕️切换了。



wechatide://minicode/NCwQovmU7XCR
回答关注问题邀请回答
收藏

5 个回答

  • 晨
    晨
    2018-06-28

    目前不支持横屏。直接设置swiper组件的滑动方向可以满足需求吗？

    2018-06-28
    有用
    回复 1
  • 蛙草
    蛙草
    2018-07-12

    求支持横屏！！小游戏支持了，小程序为啥做限制呢？业务严重需要啊。。

    2018-07-12
    有用 1
    回复 1
    • 🇦 🇷 🇴 🇺 🇸 🇪
      🇦 🇷 🇴 🇺 🇸 🇪
      2018-07-12

      对的，小游戏支持横屏，小程序还不支持横屏。昨天上海公开课，我还现场问了他们什么时候支持小程序横屏，他们回答得也是支支吾吾，估计还得等好久去了吧。

      2018-07-12
      赞
      回复
  • 🇦 🇷 🇴 🇺 🇸 🇪
    🇦 🇷 🇴 🇺 🇸 🇪
    2018-06-29

    自问自答环节，我已经实现了。

    我自定义了一个组件

    wxml

    <view class='container'>
      <swiper circular vertical>
        <swiper-item wx:for='{{swipers}}' wx:key='swiper{{index}}'>
          <view style='width:{{windowHeight}}px;height:{{windowWidth}}px;transform-origin:{{windowWidth/2}}px;transform:rotate(90deg)'>
            <slot name='swiper{{index}}'></slot>
          </view>
        </swiper-item>
      </swiper>
    </view>

    js

    Component({
      options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
      },
      /**
       * 组件的属性列表
       */
      properties: {
        swipers: {
          type: Array,
          value: [],
          observer: function(newVal, oldVal) {
            if (!Array.isArray(newVal)) {
              throw new TypeError('property swipers must be typeof array');
            }
          }
        }
      },
     
      /**
       * 组件的初始数据
       */
      data: {
        windowHeight: 0,
        windowWidth: 0
      },
     
      /**
       * 组件的方法列表
       */
      methods: {
     
      },
     
      attached() {
        var sys = wx.getSystemInfoSync();
        this.setData({
          windowHeight: sys.windowHeight,
          windowWidth: sys.windowWidth
        });
      }
    })

    wxss

    .container {
      width: 100vw;
      height: 100vh;
      position: relative;
    }
    swiper, swiper-item {
      width: 100%;
      height: 100%;
    }


    pages中使用如下

    wxml

    <hswiper swipers='{{imgs}}'>
      <image wx:for='{{imgs}}' wx:key='hswiper{{index}}' slot='swiper{{index}}' src='{{item.src}}' class='item'>
      </image>
    </hswiper>


    wxss

    .item {
      width: 100%;
      height: 100%;
    }


    2018-06-29
    有用 1
    回复
  • 栗栋梁
    栗栋梁
    2021-04-25

    楼主和楼上的兄弟，看这个https://developers.weixin.qq.com/miniprogram/dev/framework/view/resizable.html

    2021-04-25
    有用
    回复
  • DJANGO
    DJANGO
    2018-07-09

    呵呵，投机思想，反问：我用诺基亚换你的Iphone可以吗？官方的人怎会这样提问？

    2018-07-09
    有用
    回复
请 登录 后发表内容
相关问题
相关文档