微信小程序横向滚动功能的实现

使用标签

<scroll-view
    class="mml-nav-scroll"
    scroll-x="true">
    <view id="mml_nav1" class="mml-scroll-item active">热销</view>
    <view id="mml_nav2"  class="mml-scroll-item">现货</view>
    <view id="mml_nav3" class="mml-scroll-item">酒饮</view>
    <view id="mml_nav4" class="mml-scroll-item">美护</view>
    <view id="mml_nav5" class="mml-scroll-item">餐厨</view>
    <view id="mml_nav6" class="mml-scroll-item">出行</view>
    <view id="mml_nav7" class="mml-scroll-item">服装</view>
    <view id="mml_nav8" class="mml-scroll-item">数码</view>
  </scroll-view>

white-space: nowrap 必须设置不换行，否则不能滚动
.mml-scroll-item { width: 20%; height: 100%; line-height: 140rpx; display: inline-block; text-align: center; } 子元素必须设置固定的宽度，和设置内联

.mml-nav-scroll {
  width: 100%;
  white-space: nowrap;
  height: 140rpx;
}
.m