小程序屏幕旋转
发布于 6 年前 作者 guming 1510 次浏览 来自 问答

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

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

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

4 回复

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

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

我自定义了一个组件

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%;
}

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

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

回到顶部