微信小程序 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="menu">  <scroll-view scroll-x="{{true}}">    <view class="menu-item">      <image class="menu-img" src="/images/menu.png" />      <view class="menu-tit">导航菜单</view>    </view>    <view class="menu-item">      <image class="menu-img" src="/images/menu.png" />      <view class="menu-tit">导航菜单</view>    </view>    <view class="menu-item">      <image class="menu-img" src="/images/menu.png" />      <view class="menu-tit">导航菜单</view>    </view>    <view class="menu-item">      <image class="menu-img" src="/images/menu.png" />      <view class="menu-tit">导航菜单</view>    </view>    <view class="menu-item">      <image class="menu-img" src="/images/menu.png" />      <view class="menu-tit">导航菜单</view>    </view>    <view class="menu-item">      <image class="menu-img" src="/images/menu.png" />      <view class="menu-tit">导航菜单</view>    </view>  </scroll-view></view>复制代码

wxss

.menu {  border-color: #f6f6f6;  border-style: solid;  border-width: 10px 0 10px 0;  padding: 15rpx 0;  width: 100%;  overflow: hidden;  white-space: nowrap;}
.menu .menu-item {  width: 25%;  text-align: center;  padding: 15rpx 0;  display: inline-block;}
.menu .menu-item .menu-img {  width: 80rpx;  height: 64rpx;}
.menu .menu-item .menu-tit {  font-size: 26rpx;  color: #444;}复制代码

转载于:https://juejin.im/post/5c220198e51d453c0955acb9