微信小程序横向滚动

wxml 页代码：

     

<view class="scrollBox">

      <scroll-view class="scroll" scroll-x>

      <view class="scrollItem">

        <view class="contentItem">全部</view>

        <view class="xiahuaxian"></view>

      </view>

      <view class="scrollItem">

        <view class="contentItem">全部</view>

        <view class="xiahuaxian"></view>

      </view>

      <view class="scrollItem">

        <view class="contentItem">全部</view>

        <view class="xiahuaxian"></view>

      </view>

      <view class="scrollItem">

        <view class="contentItem">全部</view>

        <view class="xiahuaxian"></view>

      </view>

      <view class="scrollItem">

        <view class="contentItem">全部</view>

        <view class="xiahuaxian"></view>

      </view>

      <view class="scrollItem">

        <view class="contentItem">全部</view>

        <view class="xiahuaxian"></view>

      </view>

      <view class="scrollItem">

        <view class="contentItem">全部</view>

        <view class="xiahuaxian"></view>

      </view>

      <view class="scrollItem">

        <view class="contentItem">全部</view>

        <view class="xiahuaxian"></view>

      </view>

      

      </scroll-view>

    </view>

 

css 页代码：

/* scrollBox  滚动 */

.scrollBox {

  height: 90rpx;

  width: 100%;

  background-color: #fff;

  padding-top: 5rpx;

  box-sizing: border-box;

}

.scroll{

  white-space: nowrap;

}

.scrollItem{

  display: inline-block;

  width: 105rpx;

  height: 60rpx;

  border: 1px solid #000;

}

.scroll .contentItem {

  font-size: 30rpx;

  color: #313131;

  width: 105rpx;

  height: 36rpx;

  line-height: 36rpx;

  text-align: center;

}

.scroll .xiahuaxian {

  width: 35rpx;

  height: 10rpx;

  background-color: #fd390f;

  margin: 10rpx 0 0 30rpx;

}

 

这应该是最快速只管的实现功能了。

望评论点赞