由于小程序不支持横屏,而产品需求又必须是横屏操作。
然后我在 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%;' > < swiper circular vertical current='{{currentDesign}}' bindchange='handSwiperChange'> < swiper-item wx:for = '{{designList}}' wx:key = 'design{{item.designid}}' item-id = '{{item.designid}}' > < image src = '{{item.imageurl_big}}' > < view class = 'planname' >{{item.name}}</ view > </ image > </ swiper-item > </ swiper > </ view > |
整个页面旋转 90 度之后,swiper 手势上下滑动时,轮播变成了左右切换了。手势左右滑动时,轮播变成了上下切换了。
看看这个
https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=&docid=000e6abcb188f89fa3f614d9e51000
那个也是我发的贴。不过现在都已经解决了,还封装了支持横屏的容器组件和横屏的swiper组件。 😄
帮了我大忙
有人试过如何解决吗?没有我再过一段时间来问。 现提供示例代码:
点击打开代码 或复制倒入代码片段 wechatide://minicode/NCwQovmU7XCR
甚是销魂啊,不过,这是正常的啊,你把组件横过来显示了,滑动的左右还是左右,上下还是上下呀,没毛病