微信&支付宝小程序使用scroll-view制作左右滑动信息展示

效果展示 

代码

<view class="box">
    <view class="my">
      <text class="title">我的缴费</text>
      <view class="gd">
        <text>更多</text>
        <image class="gdimg" mode="scaleToFill" src="/images/back_icon_03.png"/>
      </view>
    </view>
    <view class="myshow">
      <view class="scrollview">
        <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%">
          <view class="scroll-view-item_H items">
            <view class="top">
              <image mode="scaleToFill" src="/images/index/icon_01.png"/>
              <text>电费</text>
            </view>
            <view class="bottom">
              <text>嘉定金鼎香樟园3栋1单元101</text>
            </view>
          </view>
          <view class="scroll-view-item_H items">
            <view class="top">
              <image mode="scaleToFill" src="/images/index/icon_02.png"/>
              <text>水费</text>
            </view>
            <view class="bottom">
              <text>嘉定金鼎香樟园3栋1单元101</text>
            </view>
          </view>
          <view class="scroll-view-item_H items">
            <view class="top">
              <image mode="scaleToFill" src="/images/index/icon_03.png"/>
              <text>燃气费</text>
            </view>
            <view class="bottom">
              <text>嘉定金鼎香樟园3栋1单元101</text>
            </view>
          </view>
          <view class="scroll-view-item_H items">
            <view class="top">
              <image mode="scaleToFill" src="/images/index/icon_05.png"/>
              <text>供暖费</text>
            </view>
            <view class="bottom">
              <text>嘉定金鼎香樟园3栋1单元101</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
</view>

/* 我的缴费滚动样式 */

.scroll-view_H {
  white-space: nowrap;
  display: flex;
}

.scroll-view_H .items {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200rpx;
  height: 180rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  box-sizing: border-box;
  padding: 10rpx;
  margin: 0 10rpx;
}
.scroll-view_H .top{
  margin: 15rpx 0;
}

.scroll-view_H .top image {
  width: 44rpx;
  height: 44rpx;
  vertical-align: middle;
}

.scroll-view_H .top text {
  font-size: 28rpx;
  color: #4A4A4A;
  padding-left: 6rpx;
}

.scroll-view_H .bottom text {
  font-size: 24rpx;
  text-align: center;
  color: #9B9B9B;
  line-height: 36rpx;
   /* 控制多行文本展示*/
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.scroll-view-item_H {
  flex-shrink: 0;
  flex-grow: 0;
  min-width: 200rpx;
  min-height: 180rpx;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

/* end */