解决微信小程序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 相关文章推荐
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
js实现图片360度旋转
Jan 22 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
JavaScript Array对象使用方法解析
Sep 24 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
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
php pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
PHP 一个随机字符串生成代码
2010/05/26 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
PHP与以太坊交互详解
2018/08/24 PHP
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
nodejs基础知识
2017/02/03 NodeJs
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
python列表与元组详解实例
2013/11/01 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
UGG英国官方网站:UGG UK
2018/02/08 全球购物
历史专业毕业生的自我鉴定
2013/11/15 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
2014年科室工作总结
2014/11/20 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
社会实践心得体会范文
2016/01/14 职场文书