微信小程序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 ...
随机推荐
- 使用CXF做webservice整合现有项目的例子
从网上看了很多CXF的资料,大部分都是单独的作为一个webservice项目,对于在现有的spring项目上提供webservice服务的例子基本没有找到. 我做的这个例子是介绍怎么把cxf整合到现有 ...
- oracle goldengate安装
1.ftp工具上传ogg112101_fbo_ggs_Linux_x64_ora11g_64bit.zip分别到source和target服务器 [oracle@localhost mnt]$ ll ...
- Oracle等待事件之等待事件详解
一. 等待事件的相关知识:1.1 等待事件主要可以分为两类:即空闲(IDLE)等待事件和非空闲(NON-IDLE)等待事件.1). 空闲等待事件指ORACLE正等待某种工作,在诊断和优化数据库的时候, ...
- 广通软件荣获“2016年度ITSS优秀会员”称号
1月12日,为了表彰在IT服务标准研制和应用推广工作中所做出的贡献,中国电子工业标准化技术协会信息技术服务分会(以下称ITSS分会)在北京召开“2016年度ITSS优秀会员”专家评选活动,广通软件获得 ...
- Mybatis三剑客之mybatis-plugin
搜索mybatis plugin并安装. 如果没有的话,就按照如下: 1. 简介 mybatis plugin作为一款优秀的mybatis跳转插件,比起free mybatis plugin插 ...
- poj 2723 Get Luffy Out 2-SAT
两个钥匙a,b是一对,隐含矛盾a->!b.b->!a 一个门上的两个钥匙a,b,隐含矛盾!a->b,!b->a(看数据不大,我是直接枚举水的,要打开当前门,没选a的话就一定要选 ...
- Java8新特性(转载)
1.Lambda表达式 Lambda表达式(也称为闭包)是整个Java 8发行版中最受期待的在Java语言层面上的改变.使用 Lambda 表达式可以使代码变的更加简洁紧凑. Lambda允许把函数作 ...
- Spark UI (基于Yarn) 分析与定制
转载自:https://yq.aliyun.com/articles/60194 摘要: 这篇文章的主旨在于让你了解Spark UI体系,并且能够让你有能力对UI进行一些定制化增强.在分析过程中,你也 ...
- 关于使用ubuntu的那些事儿
最近把笔记本的系统由windows改成了ubuntu的最新版系统了,其实改变系统最主要的目的就是希望自己能够快速的学会使用linux系统. 所以这是一篇记录了关于一个ubuntu小白第一次使用ubun ...
- centos 相关
运行locate httpd.conf,提示-bash: locate: command not found错误.则需要安装mlocate软件包: yum install mlocate 搜索,提示l ...