微信小程序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 ...
随机推荐
- Python开发【Tornado】:异步Web服务(二)
真正的 Tornado 异步非阻塞 前言: 其中 Tornado 的定义是 Web 框架和异步网络库,其中他具备有异步非阻塞能力,能解决他两个框架请求阻塞的问题,在需要并发能力时候就应该使用 Torn ...
- 广通软件荣获“2016年度ITSS优秀会员”称号
1月12日,为了表彰在IT服务标准研制和应用推广工作中所做出的贡献,中国电子工业标准化技术协会信息技术服务分会(以下称ITSS分会)在北京召开“2016年度ITSS优秀会员”专家评选活动,广通软件获得 ...
- HTTP返回码中301与302的区别(转)
add by zhj: 区别 1.使用效果不同 302跳转是暂时的跳转,搜索引擎会抓取新的内容而保留旧的网址.因为服务器返回302代码,搜索引擎认为新的网址只是暂时的. 301重定向是永久的重定向, ...
- (转)SSIS_数据流转换(Union All&合并联接&合并)
Union All : 与sql语言 Union All 一样,不用排序,上下合并多个表.Union All转换替代合并转换:输入输出无需排序,合并超过两个表 合并联接 : 有左连接.内连接.完全连接 ...
- PR曲线 ROC曲线的 计算及绘制
在linear model中,我们对各个特征线性组合,得到linear score,然后确定一个threshold,linear score < threshold 判为负类,linear sc ...
- SQL case when 多条件查询
基于列的逻辑表达式,其实就是CASE表达式.可以用在SELECT,UPDATE,DELETE,SET以及IN,WHERE,ORDER BY和HAVING子句之后.下面给个简单示例:
- 钉钉,连续获取Token一样么? Js_ticket重复获取一样么?
经过测试,是一样的: Token的过期时间是2个小时: 2个小时后在获取则发生变化: js_ticket: 重复获取的值不同的:
- Java的Servlet、Filter、Interceptor、Listener
写在前面: 使用Spring-Boot时,嵌入式Servlet容器可以通过扫描注解(@ServletComponentScan)的方式注册Servlet.Filter和Servlet规范的所有监听器( ...
- PHP多进程学习(三)__代码案例来了解父进程与子进程的执行顺序
pcntl_fork创建子进程成功的话,系统就有了2个进程,一个为父进程,一个为子进程,父进程和子进程都继续向下执行,子进程的id号为$pid(父进程会获取子进程的$pid也就是$pid不为0,而子进 ...
- 常用php操作redis命令整理(二)哈希类型
HSET将哈希表key中的域field的值设为value;如果field是哈希表中的一个新建域,并且值设置成功,返回1;如果哈希表中域field已经存在且旧值已被新值覆盖,返回0. <?php ...