解决微信小程序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实现控制内容的向上向下滚动效果
Jun 26 Javascript
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 Javascript
Angular CLI发布路径的配置项浅析
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专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
js中数组Array的一些常用方法总结
2013/08/12 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
利用Python命令行传递实例化对象的方法
2016/11/02 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
工程力学硕士生的自我评价范文
2013/11/16 职场文书
酒店执行总经理岗位职责
2013/12/15 职场文书
审计主管岗位职责
2014/01/31 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
信息技术课后反思
2014/04/27 职场文书
村居抓节水倡议书
2014/05/19 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
付款委托书范本
2014/10/05 职场文书
争先创优个人总结
2015/03/04 职场文书
超市督导岗位职责
2015/04/10 职场文书
Opencv实现二维直方图的计算及绘制
2021/07/21 Python