微信小程序之scroll-view的flex布局问题

最新推荐文章于 2024-02-13 18:07:31 发布

一只叮code的小蚊子

最新推荐文章于 2024-02-13 18:07:31 发布

阅读量5.4k

点赞数 1

分类专栏：微信小程序 JavaScript 文章标签：微信小程序的scroll-view scroll-view不能直接使用flex布局

本文链接：https://blog.csdn.net/zjw222/article/details/86492900

版权

本文探讨了在微信小程序中scroll-view组件与flex布局的兼容问题。通过实例展示了如何通过在scroll-view内添加容器并应用flex布局，以及使用display: inline-block的方式解决布局显示问题。总结指出，直接在scroll-view内使用flex布局会导致意料之外的排列效果，需采取变通方法确保正常滚动和布局。

摘要由CSDN通过智能技术生成

关于微信小程序的scroll-view组件，第一次写的时候是直接在scroll-view中用了一层容器包裹子元素，然后用了flex布局，并且是用了组件来实现的横向滚动，后面有提出改进，但是不记录下，就发现过了几天，就有点懵了

1.效果图

2.在scroll-view里加一层容器，使用flex布局实现

这里用flex布局实现的话，就要用组件的形式

wxss文件

.scrollView{
  padding: 0 20rpx;
  white-space: nowrap;
  box-sizing: border-box;
}
.item{
  display: inline-block;
  margin-right: 20rpx;
  width: calc(100% / 3);
  height: 100rpx;
  background: #ff00ff;
}

.scrollView1{
  display: flex;
  margin-top: 40rpx;
  padding: 0 20rpx;
  width: 100%;
  flex-wrap: nowrap;
  box-sizing: border-box;
}
.item1{
  margin-right: 20rpx;
  width: calc(100% / 3);
  height: 100rpx;
  background: #ff00ff;
}
.scrollView2{
  margin-top: 40rpx;
  padding: 0 2