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

关键属性:

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>

 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值