小程序中有横向滚动的swiper,H5中目前得手动实现。

实现方法如下:

外层需要设置:

overflow: scroll;white-space: nowrap;

内层需要设置:
display: inline-block; 
 <div class="noticeListBox">
<div class="noticeList" v-for="(item,index) in 10"> </div>
</div>
.noticeListBox {
width: 100%;
box-sizing: border-box;
overflow: scroll;
white-space: nowrap;
} .noticeListBox::-webkit-scrollbar {
display: none;
} .noticeList{
display: inline-block;
}

H5实现横向滚动的方法总结的更多相关文章

  1. 使 WPF 支持触摸板的横向滚动

    微软终于开始学苹果一样好好做触摸板了(就是键盘空格键下面那一大块).然而鉴于以前没有好好做,以至于 WPF 程序甚至都没有对触摸板的横向滚动提供支持(竖向滚动是直接使用了 MouseWheel,汗-- ...

  2. web开发 小方法1-禁止横向滚动

    最近学了学做了个公司的网站  总结了一些小方法 比如取消横向滚动条并禁止的横向滚动 这样就可以吧超出的切掉让网页更和谐 在body 标签 body{ text-align: center; overf ...

  3. swiper3d横向滚动多张炫酷切换banner

    最近有了个新需求,swiper3d横向滚动多张炫酷切换banner要和elementUI里边走马灯的卡片化card 类似,但是还需要h5手机触摸滚动啊啊啊啊,昨天折腾了半个早上总算完成,今天乖乖跑来m ...

  4. 【吉光片羽】js横向滚动与浮动导航

    1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...

  5. Android简易实战教程--第四十六话《RecyclerView竖向和横向滚动》

    Android5.X后,引入了RecyclerView,这个控件使用起来非常的方便,不但可以完成listView的效果,而且还可以实现ListView无法实现的效果.当然,在新能方便也做了大大的提高. ...

  6. 使用elementUI滚动条之横向滚动

    用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的. <el-scrollbar></el-scrollbar> 将会出现滚动 ...

  7. 解决iScroll横向滚动区域无法拉动页面的问题

    近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件.这个体验是实在是无法接受,特别是页面中有多个横向滚动区域 ...

  8. react-native 横向滚动的商品展示

    在app中会有这种页面 像这样商品是横向的,而且要滚动,思路是利用 ScrollView 横向的滚动 思路: (a): 横向滚动的整体作为一个组件  ShopCenter {/*** 横向滚动 *** ...

  9. Android TextView 横向滚动(跑马灯效果)

    Android TextView 中当文字比較多时希望它横向滚动显示,以下是一种亲測可行的方法. 效果图: 1.自己定义TextView,重写isFocused()方法返回true,让自己定义Text ...

随机推荐

  1. 【实战经验】--Xilinx--IPCore--FIFO

    2019.12.10补充 结论:先写进的数据在独处时位于高位,后写入的数据在低位,且排序单位为Byte,即先后写入0X01,0X02,读出后也为0x010x02,此外,在写入数据量达到读出数据位宽后5 ...

  2. java异常的嵌套和级联

    一.分开捕获或者嵌套使用 我们先看看下面这段代码: public class Cal { public int div(int a, int b) { int result = a / b; retu ...

  3. spring boot EnableAutoConfiguration exclude 无效

    本文链接:https://blog.csdn.net/ID19870510/article/details/79373386 首先讲一下SpringBootApplication注解源码定义为 @Ta ...

  4. 总结:WPF中ResourceDictionary资源文件的查找和遍历方法

    原文:总结:WPF中ResourceDictionary资源文件的查找和遍历方法 一.查找包含制定关键字的资源 ResourceDictionary GetThemeDictionary()     ...

  5. 2019 学而思java面试笔试题 (含面试题解析)

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.学而思等公司offer,岗位是Java后端开发,因为发展原因最终选择去了学而思,入职一年时间了,也成为了面试官 ...

  6. 基于OpenGL三维软件开发

    实验原理: OpenGL在MFC下编程原理---- Windows操作系统对OpenGL的支持 在Windows下用GDI作图必须通过设备上下文(DeviceContext简写DC)调用相应的函数:用 ...

  7. BUAA-OO-2019 第一单元总结

    第一次作业 第一次作业需要完成的任务为简单多项式导函数的求解. 思路 因为仅仅是简单多项式的求导,所以求导本身没有什么可说的,直接套用幂函数的求导公式就行了,主要的精力是花在了正则表达式上.这里推荐两 ...

  8. HTML5实现无刷新修改URL

    前言 今天在做一个vue的搜索功能,需要从搜索结果页面跳转到细节页面,然后点击返回还能返回到刚刚的结果页面,如果只用window.history.go(-1)当然会重新刷新搜索页面,当然是不行的. 我 ...

  9. Windows - CMD窗口UTF8编码乱码问题的解决!

    问题描述    用MS-DOC打开 UTF-8 的文件时, 显示乱码问题根源    CMD默认是Windows系统默认编码(GBK),    用GBK格式来解码UTF-8的文件当然会出现乱码.解决方案 ...

  10. SPRINGBOOT注解最全详解(

    #     SPRINGBOOT注解最全详解(整合超详细版本)          使用注解的优势:               1.采用纯java代码,不在需要配置繁杂的xml文件           ...