解决微信小程序scroll-view组件无横向滚动的问题
更新时间：2020年02月04日 10:35:10 作者：flyyy菜鸟
这篇文章主要介绍了微信小程序scroll-view组件无横向滚动的解决方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
微信开放文档中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组件无横向滚动的问题，希望对大家有所帮助！
相关文章
为非IE浏览器添加mouseenter,mouseleave事件的实现代码
为非IE浏览器添加mouseenter,mouseleave事件的实现代码,学习js的朋友可以参考下。2011-06-06
这篇文章主要介绍了javascript实现网页背景烟花效果的方法,涉及javascript数学运算及页面元素动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
本文主要介绍了js判断是否是手机页面的方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
filemanage功能中用到的common.js...2007-04-04
详细聊聊TypeScript中any unknown never和void的区别
这篇文章主要给大家聊聊TypeScript 中 any、unknown、never 和 void 有什么区别，文中有详细的代码实例讲解，具有一定的参考价值,需要的朋友可以参考下2023-07-07
下面小编就为大家分享一篇js 两数组去除重复数值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了js for等循环 跳出多层循环，终止循环执行的方法,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了JavaScript 高性能数组去重的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
各大浏览器内置的开发工具，都提供了一个console对象。它主要有两个作用：显示网页代码运行时的错误信息。提供了一个命令行接口，用来与网页代码互动。下面我们就来详细研究下如何使用console进行性能测试。2015-04-04
打开一个小程序，我们会发现，一般构图排版都是图片banner - 快捷按钮 - 产品/文章列表等详细信息，底部导航一般是2~5个。这样的排版是比较美观的，那么为什么要这样设计，这些轮播图、快捷按钮等小程序组件都有什么用呢？接下来就带你详细了解下2022-12-12
最新评论