uniapp/小程序 scroll-view 中设置flex布局无效问题

Jiang_JY

已于 2023-12-08 17:19:02 修改

阅读量3k

点赞数 7

分类专栏：前端微信小程序 uniapp 文章标签：前端 uniapp 微信小程序

于 2022-10-29 07:50:51 首次发布

本文链接：https://blog.csdn.net/jiangjunyuan168/article/details/127582296

版权

前端同时被 3 个专栏收录

117 篇文章 7 订阅

订阅专栏

uniapp

4 篇文章 0 订阅

订阅专栏

微信小程序

1 篇文章 0 订阅

订阅专栏

问题

使用 scroll-view 设置横向滑动时在 scroll-view 元素上设置flex布局，没有生效

<scroll-view scroll-x class='recommend-content'>
  <view> 点赞 </view>
  <view> 收藏 </view>
  <view> 关注 </view>
</scroll-view>
			
<style>
  .recommend-content{
    display: flex; /* flex布局无效 */
  }
</style>

解决方法

在 scroll-view 下再加一层 view 包着 scroll-view 的内部元素，并在新增的这层 view 中设置 flex 布局：

<scroll-view scroll-x class='recommend-content'>
  <view class='recommend-content-all'>
    <view> 点赞 </view>
    <view> 收藏 </view>
    <view> 关注 </view>
  </view>
</scroll-view>
			
<style>
  .recommend-content-all{
    display: flex;
  }
</style>