微信小程序swiper --- scroll-view 应用

swiper

演示视图

wxml

<!-- 中部上游信息 -->
  <swiper class="swiper" autoplay circular previous-margin="20rpx" next-margin="60rpx">
    <swiper-item wx:for="{
     
     {upstreamList}}" wx:key="id">
      <view class="swiper_item" style="background: url(../../images/upstream_bg0.png) no-repeat center center;background-size: 100% 100%;">
        <view class="center_row">
          <van-icon name="wap-home" size="20px" style="margin-top: 25rpx;" />
          <text class="title">上游管理</text>
        </view>
        <view class="center_clo">
          <text class="title">贵州闽达钢铁有限公司</text>
          <text style="color: #ffffff;">关联时间：2023-04-20 10:35:40</text>
        </view>
      </view>
    </swiper-item>
  </swiper>

css

/* 中部上游信息 */
.swiper{
    
    
  z-index: 1;
  width: 100%;
  /* background-color: #FFFFFF; */
  height: 360rpx;
}
.swiper_item{
    
    
  border-radius: 20rpx;
  width: 650rpx;
  height: 300rpx;
}
.center_row{
    
    
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #ffffff;
  margin-left: 30rpx;
  margin-top: 50rpx;
}
.title{
    
    
  color: #ffffff;
  font-weight: bold;
  font-size: 36rpx;
  margin-top: 30rpx;
}
.center_clo{
    
    
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  color: #ffffff;
  margin-left: 30rpx;
  margin-top: 20rpx;
}

scroll

视图

wxml

<!-- 计划明细 -->
    <view class="scroll_box" wx:for="{
     
     {2}}">
      <scroll-view scroll-x >
        <view class="item_list">
          <text class="normal_plan">品名</text>
          <text class="normal">三级螺纹钢</text>
        </view>
        <view class="item_list">
          <text class="normal_plan">材质</text>
          <text class="normal">HRB400</text>
        </view>
        <view class="item_list">
          <text class="normal_plan">规格</text>
          <text class="normal">20*9</text>
        </view>
        <view class="item_list">
          <text class="normal_plan">数量</text> 
          <text class="normal">20件</text>
        </view>
        <view class="item_list">
          <text class="normal_plan">单价</text>
          <text class="normal">500元</text>
        </view>
        <view class="item_list">
          <text class="normal_plan">重量</text>
          <text class="normal">100吨</text>
        </view>
      </scroll-view>
    </view>

css

.scroll_box{
    
    
  width: 100%;
  height: 120rpx;
  overflow: hidden;
  background: #fff;
  white-space: nowrap;
  margin-top: 20rpx;
  }
  .scroll_box scroll-view{
    
    
    height: 100%;
    width: auto;
    overflow:hidden;
  }
  .item_list{
    
    
  width: 180rpx;
  height: 60rpx;
  margin-right: 10rpx;
  display: inline-block;
  /* background-color: #F5F5F5; */
  line-height: 60rpx;
  text-align: center;
  }