微信小程序scroll-view左右横向滑动没有效果(无法滑动)问题

责编:menVScode 2018-10-16 11:36 阅读(78)

小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分,官方文档介绍:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

在使用scroll-view过程种,发现scroll-view横向滑动没有了效果,编译后元素布局也不对,经过多方查资料:

    1. scroll-view 中的需要滑动的元素不能使用 float 浮动

    2. scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex 是没有作用的

    3. scroll-view 中的需要滑动的元素要使用 dislay:inline-block 进行元素的横向编排

    4. 包裹 scroll-view 的大盒子有明确的宽度和加上样式 overflow:hidden;white-space:nowrap

wxml代码

<view class="hotCon">
  <scroll-view scroll-x class="scroll">
    <view class="slide-image" wx:for="{{hot_products}}"  wx:key="{{index}}">
      <image src="{{item.imageurl}}" class="pic"/>
    </view>
  </scroll-view>
</view>

wxss代码

.hotCon{
  overflow:hidden;
  white-space:nowrap;
}
.hotCon .scroll{
  width: auto;
  height: 310rpx;
  overflow:hidden;
}
.hotCon .scroll .slide-image{
  display: inline-block;
  width: 750rpx;
  height: 310rpx;
}
.hotCon .scroll .pic{
  width: 100%;
  height: 100%;
}

效果

GIF

前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码