关于微信小程序scroll-view横向滑动问题

看到网上很多关于小程序scroll-view之内不能使用弹性盒子的说法,还有一些样式感觉都不是很详尽,故写此篇

首先,在写scroll-view时,我们最好先给他一个父view,来专门控制scroll-view的宽高,以便于来各种定位和扩展,接着我们将要滑动的子元素·也包装进一个父view,让这个view宽度随子元素扩展,高度则不变,然后将这个view放入scroll-view中,就完成了,看以下代码

<view id='fa'>
  <scroll-view scroll-x>
      <view id='scroll_box'>
         <view class='single' wx:for="{{[1,1,1,1,1,1,1]}}" wx:key="tests">
            <image src='./failed.png'></image>
            <text>哈哈</text>
         </view>
      </view>
  </scroll-view>
</view>
#fa{
  width: 100%;
  height: 200rpx;
}
#fa scroll-view{
  width: 100%;
  height: 100%;
  /*下面的也可放到这white-space: nowrap;*/
}
#scroll_box{
  width: auto;
  height: 200rpx;
  overflow: auto;
  white-space: nowrap;/*父元素与其取其一*/
  display: inline-block;/*也可这样display:inline-flex*/
}
.single{
  width: 150rpx;
  height: 200rpx;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}
.single image{
  width: 150rpx;
  height: 150rpx;
}
.single text{
  font-size: 30rpx;
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值