微信小程序scroll-view横向滚动
官方文档给的代码复制下来发现无法滚动,没反应,使用css设置浮动属性也无效

官方没有给出css代码,横向需要设置两个css属性才行:
white-space: nowrap; ----规定段落中的文本不进行换行
display: inline-block; ----应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性
.bc_green {background: green;width:100px; height: 100px;}
.bc_red {background: red;width:100px; height: 100px;}
.bc_blue {background: blue;width:100px; height: 100px;}
.scroll-view_H{
width: 100%;
white-space: nowrap;
}
.scroll-view-item_H{
width: 200px;
height: 100px;
display: inline-block;
}
现在我们只要横向滚动的代码出来在加上上面的css就可以横向滚动啦
<view class="section">
<view class="section__title">horizontal scroll</view>
<scroll-view class="scroll-view_H" scroll-x >
<view id="green" class="scroll-view-item_H bc_green"></view>
<view id="red" class="scroll-view-item_H bc_red"></view>
<view id="blue" class="scroll-view-item_H bc_blue"></view>
</scroll-view>
</view>
微信小程序scroll-view横向滚动的更多相关文章
- 微信小程序 -- scroll view
效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...
- 微信小程序 scroll-view 左右横向滑动没有效果(无法滑动)问题
小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过),经调试发现: 1.scroll ...
- 微信小程序scroll标签的测试
一:testscroll.wxml的代码如下.testview.js自动生成示例代码 //testscroll.wxml <view class="section__title&quo ...
- 关于微信小程序获取view的动态高度填坑
wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width heig ...
- 【微信小程序】view顶部固定或底部固定 + scroll-view中的元素view也可以使用position:fixed;固定选中元素位置
1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;&q ...
- 微信小程序将view动态填满全屏
一.在app.js利用官方方法获取设备信息,将获取到的screenHeight.windowHeight度量单位统一由rpx换算为px 注:官方文档给出 [rpx换算px (屏幕宽度/750) ][ ...
- 微信小程序 scroll-view隐藏横向滚动条
::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
- 微信小程序弹出框滚动穿透问题
1.在你的遮罩层最外层加 catchtouchmove="noneEnoughPeople" 里面是你的方法名2.noneEnoughPeople: function () { c ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 微信小程序--图片相关问题合辑
图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.preview ...
随机推荐
- NSString 属性为啥用copy 不用strong
copy不能修改,strong可以修改,防止字符串被意外修改.demo: ——————————————————code 你要的 demo—————————————————— @property (n ...
- curl命令踩的坑
使用curl命令执行get请求,带多个参数: curl localhost:/user/binding/query?userId=&wrapperId=&from=test [] [] ...
- 【Loadrunner】通过loadrunner录制时候有事件但是白页无法出来登录页怎么办?
loadrunner录制脚本时候有事件但是一直白页怎么办? 解决办法:依次进行下方1.2.方法操作,如果还不行再进行3的操作. 1.勾选下图IE浏览器的Internet选项中“启用第三方浏览器拓展*” ...
- ssh 配置文件讲解大全 ssh调试模式 sftp scp strace进行调试 特权分离
ssh 配置文件讲解大全 ssh调试模式 sftp scp strace进行调试 特权分离 http://blog.chinaunix.net/uid-16728139-id-3265394.h ...
- List的三个子类ArrayList,LinkedList,Vector区别
一:List的三个子类的特点 ArrayList: 底层数据结构是数组,查询快,增删慢. 线程不安全,效率高.Vector: 底层数据结构是数组,查询快,增删慢. 线程安全,效率低.Vector相对A ...
- 【开发者笔记】C#连接mysql问题记录
1.概述:C#在调用mysql.data.dll连接本地数据库时报错,连接远程Linux服务器上的mysql服务器正常 2.报错记录,当前连接字符串 <add key="dbStrin ...
- Mybatis一对一映射
一.Mybatis一对一映射 本例讲述使用mybatis开发过程中常见的一对一映射查询案例.只抽取关键代码和mapper文件中的关键sql和配置,详细的工程搭建和Mybatis详细的流程代码可参见&l ...
- Java多态 父类引用指向子类对象
Java多态的三个必要条件: 1. 继承 2. 子类重写父类方法 3. 父类引用指向子类对象 然后看一个例子 输出结果为: 给出结论:Father c = new Child() 在c的 ...
- 分布式存储之MogileFS分布式文件系统简单应用
一.分布式存储原理: 分布式存储系统,是将数据分散存储在多台独立的设备上.传统的网络存储系统采用集中的存储服务器存放所有数据,存储服务器成为系统性能的瓶颈,也是可靠性和安全性的焦点,不能满足大规模存储 ...
- Bootstrap table前端分页(ssm版)
说明bootstrap table可以前端分页,也可以后端sql用limit分页.前端分页下性能和意义都不大,故一般情况下不用这种,请看我的另一篇后端分页的博客源码下载地址:https://git.o ...