小程序实现横向滑动导航菜单

目录

效果展示

实现方法

●方法一
方法一使用的是弹性盒模型，具体如下：
wxml代码:

<scroll-view scroll-x="true">
  <view class="scrollContainer">
    <view class="itemContainer" wx:for="{{10}}" wx:key="index">
    <image mode="widthFix" src="http://www.tucoo.com/card/cat/s/card0070s.jpg"></image>
    <view>第一种</view>
  </view>
  </view>
</scroll-view>

wxss代码:

/* 横向布局 */
.scrollContainer{
  display: flex;
  flex-direction: row;
  width: 100%;
}
/* 纵向布局，内部元素居中 */
.itemContainer{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 130rpx;
  padding: 0 30rpx;
  flex-shrink: 0;
}
/* 规定图片大小 */
.itemContainer image{
  width: 100%;
}

●方法二
方法二是使所有Item元素横向排列，并且不换行，具体如下：
wxml代码:

<scroll-view scroll-x="true">
  <view class="scrollContainerTwo">
    <view class="itemContainerTwo" wx:for="{{10}}" wx:key="index">
    <image mode="widthFix" src="http://www.tucoo.com/card/cat/s/card0081s.jpg"></image>
    <view class="title">第二种</view>
  </view>
  </view>
</scroll-view>

wxss代码:

/* 设置不换行 */
.scrollContainerTwo{
  white-space: nowrap;
  width: 100%;
}
/* 一行显示，文字居中 */
.itemContainerTwo{
  display: inline-block;
  width: 130rpx;
  padding: 0 30rpx;
  text-align: center;
}
/* 规定图片大小 */
.itemContainerTwo image{
  width: 100%;
}