微信小程序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 ...
随机推荐
- Hibernate的状态,缓存和映射
Hibernate的状态,缓存和映射 1.对象的状态 1.1.对象状态的概念和分类 在使用Hibernate操作数据库的时候,我们先创建了JavaBean对象,然后使用session来保存或者更新到数 ...
- Linux的操作系统I2C驱动架构解说
Linux的操作系统I2C驱动架构解说 发布时间:2006.10.16 04:52 来源:赛迪网技术社区 作者:LoneStar 最近因为工作需要涉及到了I2C总线.虽然我过去用过I2c,但看了 Li ...
- Django - ORM - 进阶
一.多表操作 创建模型 实例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是 ...
- 转!!CMPP 网关错误码说明
http://www.163duanxin.com/msg/1753.htm CMPP错误码说明 与中国移动代码的对应关系. MI::zzzzSMSC返回状态报告的状态值为EXPIREDMJ:zz ...
- 【react 条件渲染】在render的html中使用 三元运算符 进行条件渲染
return ( {renderedPages.map(page => ( <Button key={page} onClick={() => onPageChange(page)} ...
- (2.5)DDL增强功能-触发器trigger
SQL Server:触发器详解 1. 概述 2. 触发器的分类 3. Inserted和Deleted表 4. 触发器的执行过程 5. 创建触发器 6. 修改触发器: 7. 删除触发器: 8. ...
- sql server学习路径地址
联机丛书2005:https://docs.microsoft.com/zh-cn/previous-versions/sql/sql-server-2005/ms130214(v=sql.90) 联 ...
- HTML---初识HTML
版权声明:本文为博主原创文章.不经博主同意注明链接就可以转载. https://blog.csdn.net/Senior_lee/article/details/33723573 H ...
- 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格
EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...
- 最长括号化长度 java
1:求最长括号, ()(()()( 例如,它的最长符合括号化的长度为4 package com.li.huawei; import java.util.Arrays; import java.util ...