解决微信小程序scroll-view组件无横向滚动的问题


Posted in Javascript onFebruary 04, 2020

微信开放文档中scroll-view组件的部分代码如下

<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
     <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
     <view id="demo2" class="scroll-view-item_H demo-text-2"></view>
     <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
 </scroll-view>

要实现横向滚动,只需设置以下两个:

  • 父元素设置 white-space:nowrap; // 不换行
  • 子元素设置 display:inline-block;
.scroll-view_H {
 /*设置display:flex无效*/
 white-space: nowrap; 
}
.scroll-view-item_H {
 width: 200rpx;
 height:200rpx;
 background-color: #f00;
 display: inline-block;
}

总结

以上所述是小编给大家介绍的解决微信小程序scroll-view组件无横向滚动的问题,希望对大家有所帮助!

Javascript 相关文章推荐
node.js中的console用法总结
Dec 15 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 #Javascript
JavaScript单线程和任务队列原理解析
Feb 04 #Javascript
Vue中this.$nextTick的作用及用法
Feb 04 #Javascript
JS中this的4种绑定规则详解
Feb 04 #Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 #Javascript
Preload基础使用方法详解
Feb 03 #Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 #Javascript
You might like
PHP系统流量分析的程序
2006/10/09 PHP
FCKeditor的安装(PHP)
2007/01/13 PHP
一个数据采集类
2007/02/14 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
python每天定时运行某程序代码
2019/08/16 Python
Python列表解析操作实例总结
2020/02/26 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
为什么是 Python -m
2020/06/19 Python
事业单位个人应聘自荐信
2013/09/21 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
MySQL库表名大小写的选择
2021/06/05 MySQL