详解微信小程序之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 相关文章推荐
统计jQuery中各字符串出现次数的工具
May 03 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
Node.js编码规范
Jul 14 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
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 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
让您的菜单不离网站
2006/10/03 Javascript
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
用js实现in_array的方法
2013/11/05 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
python threading模块操作多线程介绍
2015/04/08 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
业务主管岗位职责
2013/11/20 职场文书
单位介绍信范文
2014/01/18 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
2015年工商所工作总结
2015/05/21 职场文书