scroll-view横向滑动（小程序）

最新推荐文章于 2024-05-26 09:15:42 发布

W_SSNY

最新推荐文章于 2024-05-26 09:15:42 发布

阅读量275

点赞数

本文链接：https://blog.csdn.net/W_SSNY/article/details/84301414

版权

wxml

<scroll-view scroll-x="true">
  <view class="uploadWrap">
    <view class='cont'>
      <view class='cont-list'>
        <view class='one'>111111111</view>
        <view class='two'>222222222</view>
        <view class='three'>333333333</view>
      </view>
    </view>
    <view class='cont'>
      <view class='cont-list'>
        <view class='one'>111111111</view>
        <view class='two'>222222222</view>
        <view class='three'>333333333</view>
      </view>
    </view>
    <view class='cont'>
      <view class='cont-list'>
        <view class='one'>111111111</view>
        <view class='two'>222222222</view>
        <view class='three'>333333333</view>
      </view>
    </view>
  </view>
</scroll-view>

wxss

page{
  background: #f1f1f1;
}
.uploadWrap{
  width: 92%;
  display: flex; 
  display: -webkit-box;
  padding: 3.75rem 4%;
}
.cont {
  width: 60%;
  padding-right: 15px;
}
.cont-list {
  width: 100%;
  margin-right: 0.5rem;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(222,222,222,0.8);
  overflow: hidden;
  background: #fff;
}
.cont-list view{
  padding-top:0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 0.75rem;
}

注：在cont中设cont-list是为了设完阴影后，最后一页的又边阴影不被截掉