建议小程序支持横屏。
由于小程序不支持横屏,所以使用了 transform的 rotate将页面最外层的 view 组件 旋转了90度实现横屏效果。
再使用swiper时遇到左右滑动swiper时,子项上下滚动,设置上下滚动时,swiper子项左右滚动。
事实上页面还是竖屏,只是把页面内容旋转了而已。
手势↕️滑动,swiper↔️切换了。手势↔️滑动,swiper↕️切换了。
框架类型 | 问题类型 | API/组件名称 | 终端类型 | 操作系统 | 微信版本 | 基础库版本 |
---|---|---|---|---|---|---|
小程序 | Bug | swiper | 微信iOS客户端 | 6.6.7 | 2.0 |
5 个回答
目前不支持横屏。直接设置swiper组件的滑动方向可以满足需求吗?
满足不了
求支持横屏!!小游戏支持了,小程序为啥做限制呢?业务严重需要啊。。
对的,小游戏支持横屏,小程序还不支持横屏。昨天上海公开课,我还现场问了他们什么时候支持小程序横屏,他们回答得也是支支吾吾,估计还得等好久去了吧。
自问自答环节,我已经实现了。
我自定义了一个组件
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
:
100
vw;
height
:
100
vh;
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%
;
}
楼主和楼上的兄弟,看这个https://developers.weixin.qq.com/miniprogram/dev/framework/view/resizable.html
呵呵,投机思想,反问:我用诺基亚换你的Iphone可以吗?官方的人怎会这样提问?