官方文档给的代码复制下来发现无法滚动,没反应,使用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横向滚动的更多相关文章

  1. 微信小程序 -- scroll view

    效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...

  2. 微信小程序 scroll-view 左右横向滑动没有效果(无法滑动)问题

    小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过),经调试发现: 1.scroll ...

  3. 微信小程序scroll标签的测试

    一:testscroll.wxml的代码如下.testview.js自动生成示例代码 //testscroll.wxml <view class="section__title&quo ...

  4. 关于微信小程序获取view的动态高度填坑

    wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width heig ...

  5. 【微信小程序】view顶部固定或底部固定 + scroll-view中的元素view也可以使用position:fixed;固定选中元素位置

    1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;&q ...

  6. 微信小程序将view动态填满全屏

    一.在app.js利用官方方法获取设备信息,将获取到的screenHeight.windowHeight度量单位统一由rpx换算为px 注:官方文档给出 [rpx换算px (屏幕宽度/750)  ][ ...

  7. 微信小程序 scroll-view隐藏横向滚动条

    ::-webkit-scrollbar { width: 0; height: 0; color: transparent; }

  8. 微信小程序弹出框滚动穿透问题

    1.在你的遮罩层最外层加 catchtouchmove="noneEnoughPeople" 里面是你的方法名2.noneEnoughPeople: function () { c ...

  9. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  10. 微信小程序--图片相关问题合辑

    图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.preview ...

随机推荐

  1. tensorflow和python操作中的笔记

    前一段时间做了一些项目,把一些笔记放在了txt中,现分享出来,自己也能够时长预习. 1) 读取文件时,将固定的文件地址,采用数组或者字符串的形式,提前表示出来,后期使用时候采用拼接操作 2) # 得到 ...

  2. 利用阿里云腾讯云正版KMS服务器端口转发

    注意:以下内容仅供实验,请勿用于任何非法用途我们知道,阿里云和腾讯云在内网部署了KMS服务器,而且是正版的,那么,有没有办法使用公网的计算机直接或间接连接到这些KMS服务器呢,受代理服务器和跳板机配置 ...

  3. Delphi下使用指针的简单总结(指针的赋值,数组和指针的转换,函数指针的使用)

    由于最近公司太忙,好久没有更新我的BLOG了.原来想着写写关于HOOK驱动的文章,可是最后想想好久已经没有做驱动的东西了,怕写出来有错误,于是作罢.开发游戏也有一段时间了,发现使用DELPHI来开发网 ...

  4. 把大象装进冰箱的N种方法

    作者:折剑头链接:https://www.zhihu.com/question/49214119/answer/115728034来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  5. 循环链表的实现与操作(C语言实现)

    循环链表是还有一种形式的链式存贮结构.它的特点是表中最后一个结点的指针域指向头结点,整个链表形成一个环. 循环链表的操作 1,循环链表的新操作 2, 获取当前游标指向的数据元素 3, 将游标重置指向链 ...

  6. ArcEngine几何变换中的策略模式

    使用策略模式可以减少分支语句,switch...Case,同时便于策略的扩展. 1. ITransform2D接口的Transform方法: [C#]public void Transform ( e ...

  7. springboot的相关信息

    Maven的配置:zzp_settings.xml <?xml version="1.0" encoding="UTF-8"?> <setti ...

  8. DNS服务器配置实践

    实验背景:在Linux系统上配置主要DNS服务器和辅助DNS服务器,所在域名为example.com,子网为192.168.X.0. 启动已安装LINUX系统,进行DNS服务器配置. 一.配置主要DN ...

  9. CentOS7 忘了root密码怎么办

    今天打开很久没开机的另2台虚拟机,发现不记得root密码了. 于是参考了google搜索到的第一个答案,https://www.unixmen.com/reset-root-password-cent ...

  10. 【运维技术】CentOS7上从零开始安装LAMP安装织梦DedeCMS教程

    前期准备数据 centos7 系统 安装 appache httpd # 更新httpd yum update httpd # 安装httpd yum install -y httpd # 启动服务 ...