收藏
回答

swiper手势滑动和图片滚动

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

由于小程序不支持横屏,而产品需求又必须是横屏操作。


然后我在 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 手势上下滑动时,轮播变成了左右切换了。手势左右滑动时,轮播变成了上下切换了。

最后一次编辑于  2018-06-12  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

3 个回答

  • '
    '
    2018-07-27

    看看这个

    https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=&docid=000e6abcb188f89fa3f614d9e51000

    2018-07-27
    赞同 1
    回复 2
    • 生命過客
      生命過客
      2018-07-27

      那个也是我发的贴。不过现在都已经解决了,还封装了支持横屏的容器组件和横屏的swiper组件。 😄

      2018-07-27
      回复
    • '
      '
      2018-07-27

      帮了我大忙

      2018-07-27
      回复
  • 卢霄霄
    卢霄霄
    2018-06-12

    甚是销魂啊,不过,这是正常的啊,你把组件横过来显示了,滑动的左右还是左右,上下还是上下呀,没毛病

    2018-06-12
    赞同
    回复
  • 生命過客
    生命過客
    2018-06-28

    有人试过如何解决吗?没有我再过一段时间来问。 现提供示例代码:

    点击打开代码   或复制倒入代码片段  wechatide://minicode/NCwQovmU7XCR

    2018-06-28
    赞同
    回复