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

nihao 发布于2019-08-23 14:43 / 1051人阅读

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

关于微信小程序的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 20rpx;
  width: 100%;
  box-sizing: border-box;
}
.itemContainer{
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
}
.scrollItem{
  margin-right: 20rpx;
}

.scrollView3{
  margin-top: 40rpx;
  padding: 0 20rpx;
  width: 100%;
  box-sizing: border-box;
}
.item3{
  margin-right: 20rpx;
  /* width: calc(100% / 3); */
  width: 240rpx;
  height: 100rpx;
  background: #aa22dd;
}

wxml文件

子组件里就一个view标签，可以自己直接写

3.直接使用display：inline-block

wxml文件

4.自己的理解

scroll-view不可以直接使用flex布局，使用flex布局会使得他不会按照预想的那样横向排列、滚动

要使用flex布局则要麻烦一点

如果直接使用flex布局，不用子组件的话，则会被挤成一排

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

往期好文推荐：

判断iOS和Android及PC端

纯css实现瀑布流（multi-column多列及flex布局）

实现单行及多行文字超出后加省略号

微信小程序之购物车和父子组件传值及calc的注意事项

云服务器 GPU云服务器微信小程序的功能微信小程序的开发免费的微信小程序微信小程序支持的js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101044.html

微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

摘要：此时正确姿势如下变成这样子不让它换行到这里，就基本如我所愿了，大概长这样二隐藏滚动条在网上搜了很多，都是说加上这段代码就可以隐藏滚动条或者有的人说这样子隐藏滚动条然而两种方法我都试过，的滚动条依然存在。。一、实践踩坑项目使用mpvue开发 1. scroll-view默认是不滚动的。。所以要先设置scroll-x=true或者scroll-y=true showImg(https...

wemall 2019-08-26 13:37 评论0 收藏0
微信小程序——商城篇

摘要：微信小程序之跳转在进入商品详情页以后，点击左下角的图标原应该跳转到首页，但是一直点也不跳，而且也不报错。放下效果图微信小程序购物车购物车页面逻辑的话，要按业务需求来。前言随着wepy和mpvue的出现及流行，开发小程序变的越来越便捷和强大，作为基佬社区的一份子，我们都需要把自己遇到的问题以及如何解决的方式相互分享，这样才能帮助到更多的朋（ji）友（lao）。如有写的不足的地方，请各...

k00baa 2019-08-26 12:01 评论0 收藏0
两行代码实现微信小程序联系人sidebar

摘要：七后记过程最近微信小程序很火爆，我也尝试着做个天气软件试试手，在做到城市列表的时难倒我了首先了解的属性，把一个值赋给这个属性，那么对应值的组件就会置顶在的顶部，举例如果赣州这个的是，那你把的值设置成，那一打开赣州就会出现在顶部。作者：Z帅来袭来自：授权地址转自：微信小程序联盟话不多说，先给你们看看核心数据和结构：一、数据： city的json array，letter的arra...

cnTomato 2019-08-21 15:06 评论0 收藏0
两行代码实现微信小程序联系人sidebar

摘要：七后记过程最近微信小程序很火爆，我也尝试着做个天气软件试试手，在做到城市列表的时难倒我了首先了解的属性，把一个值赋给这个属性，那么对应值的组件就会置顶在的顶部，举例如果赣州这个的是，那你把的值设置成，那一打开赣州就会出现在顶部。作者：Z帅来袭来自：授权地址转自：微信小程序联盟话不多说，先给你们看看核心数据和结构：一、数据： city的json array，letter的arra...

RayKr 2019-08-14 17:15 评论0 收藏0