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


Posted in Javascript onJanuary 16, 2019

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

1.效果图

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

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标签,可以自己直接写

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

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布局,不用子组件的话,则会被挤成一排

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

Javascript 相关文章推荐
(转载)JavaScript中匿名函数,函数直接量和闭包
May 08 Javascript
javascript的键盘控制事件说明
Apr 15 Javascript
javascript string字符串优化问题
Jul 31 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
js实现左右轮播图
Jan 09 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 #Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 #Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 #Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 #Javascript
Vue 样式绑定的实现方法
Jan 15 #Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 #Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 #Javascript
You might like
PHP中source #N问题的解决方法
2014/01/27 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
javascript动态创建链接的方法
2015/05/13 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
python  logging日志打印过程解析
2019/10/22 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
葬礼司仪主持词
2014/03/31 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
导游词300字
2015/02/13 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫