解决微信小程序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 相关文章推荐
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
chrome不支持form.submit的解决方案
Apr 28 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 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编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
Python中的各种装饰器详解
2015/04/11 Python
python邮件发送smtplib使用详解
2020/06/16 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
美国NBA官方商店:NBA Store
2019/04/12 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
环保倡议书怎么写
2014/05/16 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
python playwright 自动等待和断言详解
2021/11/27 Python
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android