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

 更新时间:2019年01月16日 10:33:37   转载 作者:ZJW0215  
这篇文章主要介绍了详解微信小程序之scroll-view的flex布局问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

关于微信小程序的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文件

<!-- 要想使用flex布局实现横向滚动,就要在scroll-view里加一层容器包裹,并且使用子组件才会出现滚动效果 -->
<scroll-view scroll-x class="scrollView2">
 <view class="itemContainer">
  <block wx:for="{{4}}" wx:key="{{index}}">
   <view-item class="scrollItem" />
  </block>
 </view>
</scroll-view>

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

3.直接使用display:inline-blockwxml文件

<scroll-view scroll-x class="scrollView">
 <block wx:for="{{4}}" wx:key="{{index}}">
  <view class="item"></view>
 </block>
</scroll-view>

4.自己的理解

  • scroll-view不可以直接使用flex布局,使用flex布局会使得他不会按照预想的那样横向排列、滚动
  • 要使用flex布局则要麻烦一点
  • 如果直接使用flex布局,不用子组件的话,则会被挤成一排

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 原生JS实现$.param() 函数的方法

    原生JS实现$.param() 函数的方法

    这篇文章主要介绍了原生JS实现$.param() 函数的方法,由于遇到相关序列化的问题,但是vue项目中由于减少队jquery引用的限制,导致不能用$.param来序列化参数,下面小编给大家分享了实例代码,需要的朋友参考下吧
    2018-08-08
  • JavaScript30 一个月纯 JS 挑战中文指南(英文全集)

    JavaScript30 一个月纯 JS 挑战中文指南(英文全集)

    JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用
    2017-07-07
  • 通过隐藏iframe实现文件下载的js方法介绍

    通过隐藏iframe实现文件下载的js方法介绍

    本篇文章主要是对通过隐藏iframe实现文件下载的js方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • React复制到剪贴板的示例代码

    React复制到剪贴板的示例代码

    本篇文章主要介绍了React复制到剪贴板的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JS加载解析Markdown文档过程详解

    JS加载解析Markdown文档过程详解

    这篇文章主要介绍了JS加载解析Markdown文档过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • javascript实现百度地图鼠标滑动事件显示、隐藏

    javascript实现百度地图鼠标滑动事件显示、隐藏

    这篇文章主要介绍了javascript实现百度地图鼠标滑动事件显示、隐藏的思路和方法,十分的实用,这里推荐给小伙伴们,有需要的朋友可以参考下。
    2015-04-04
  • 微信小程序纯文本实现@功能

    微信小程序纯文本实现@功能

    这篇文章主要介绍了ZZ需求小程序纯文本实现@功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • 学习JavaScript设计模式之单例模式

    学习JavaScript设计模式之单例模式

    这篇文章主要为大家介绍了JavaScript设计模式中的单例模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 微信端口及协议分析(java、C版)

    微信端口及协议分析(java、C版)

    最近接了个项目,项目需求是:手机通过WIFI连接上网,而老板要求,员工使用手机只能上微信,而不能上其他网页和看在线视频。下面通过本文给大家分享微信端口及协议分析,感兴趣的朋友一起看看吧
    2016-11-11
  • 微信小程序公用参数与公用方法用法示例

    微信小程序公用参数与公用方法用法示例

    这篇文章主要介绍了微信小程序公用参数与公用方法用法,结合实例形式分析了微信小程序中公用参数与公用方法的简单定义与使用相关操作技巧,需要的朋友可以参考下
    2019-01-01

最新评论