微信小程序scroll-view横向滚动的布局

最新推荐文章于 2024-07-16 10:04:01 发布

carlZzzzzzz

最新推荐文章于 2024-07-16 10:04:01 发布

阅读量1.7k

点赞数

文章标签：微信小程序

本文链接：https://blog.csdn.net/Qyuewei/article/details/101681052

版权

关键属性：

white-space: nowrap;

box-sizing: border-box;

属性说明：

white-space:让滚动的view横向摆放，不换行

box-sizing: 让滚动处在父布局内

https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

demo：

.wxss

/*设置包裹*/
.out {
  background: #ddd;
  padding: 20px 10px;
  width: 100%;
  white-space: nowrap;
  box-sizing: border-box;
}

/*设置行内块*/

.out  .item {
  width: 100px;
  height: 80px;
  border: 1px solid red;
  background: white;
  display: inline-block;
  margin-right: 10px;
}

.wxml

<view class='out'>
  <scroll-view scroll-x scroll-into-view='item2'>
    <view id='item1' class='item'>
      <view class='inner'>1</view>
    </view>
    <view id='item2' class='item'>
      <view class='inner'>2</view>
    </view>
    <view class='item'>
      <view class='inner'>3</view>
    </view>
    <view class='item'>
      <view class='inner'>4</view>
    </view>
    <view class='item'>
      <view class='inner'>4</view>
    </view><view class='item'>
      <view class='inner'>4</view>
    </view>
  </scroll-view>
</view>