swiper手势滑动和图片滚动
由于小程序不支持横屏，而产品需求又必须是横屏操作。
然后我在 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 手势上下滑动时，轮播变成了左右切换了。手势左右滑动时，轮播变成了上下切换了。
强力驱动