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

实现方法如下:

外层需要设置:

overflow: scroll;white-space: nowrap;

  1. 内层需要设置:
  1. display: inline-block;
  1. <div class="noticeListBox">
  2. <div class="noticeList" v-for="(item,index) in 10">
  3.  
  4. </div>
  5. </div>
  1. .noticeListBox {
  2. width: 100%;
  3. box-sizing: border-box;
  4. overflow: scroll;
  5. white-space: nowrap;
  6. }
  7.  
  8. .noticeListBox::-webkit-scrollbar {
  9. display: none;
  10. }
  11.  
  12. .noticeList{
  13. display: inline-block;
  14. }
  1.  

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. C语言注释风格

    注释风格 一.前言 注释是源码程序中非常重要的一部分,一般情况下,源程序有效注释量必须在20%以上. 注释的原则是有助于对程序的阅读理解,所以注释语言必须准确.易懂.简洁,注释不宜太多也不能太少,注释 ...

  2. 【Rust】Rust的安装和配置

    -----------------------参考文档------------------------------------- https://www.rust-lang.org/tools/ins ...

  3. 破解Charles4.2.7版本

    软件下载地址:请点我 密码:sats dmg软件解密密码是:xclient.info 激活方法 1.将 Charles.app 拖至 应用程序 文件夹 2.将 keygen.jar 拖至 桌面 3.打 ...

  4. Luogu5611 Ynoi2013 D2T2/牛客挑战赛32F 最大子段和 分块、分治

    传送门 之前一直咕着的,因为一些特殊的原因把这道题更掉算了-- 有一个对值域莫队+线段树的做法,复杂度\(O(n\sqrt{n} \log n)\)然而牛客机子实在太慢了没有希望(Luogu上精细实现 ...

  5. 『炸弹 线段树优化建图 Tarjan』

    炸弹(SNOI2017) Description 在一条直线上有 N 个炸弹,每个炸弹的坐标是 Xi,爆炸半径是 Ri,当一个炸弹爆炸 时,如果另一个炸弹所在位置 Xj 满足: Xi−Ri≤Xj≤Xi ...

  6. spring接口文档注解:@ApiOperation

    @ApiOperation不是spring自带的注解是swagger里的 com.wordnik.swagger.annotations.ApiOperation; @ApiOperation和@Ap ...

  7. Scrapy框架中的xpath选择

    不同于我们普通爬虫获取xpath,scrapy获得xpath对象获取他的值语法 一.xpath对象获取值 xpath对象..extract() 二.Scrapy框架独有的xpath取值方式 利用hre ...

  8. Serverless

    一.介绍 是指依赖于第三方应用程序或服务来管理服务器端逻辑的应用程序. 此类应用程序是基于云的数据库(如Google Firebase)或身份验证服务. 无服务器也意味着开发为事件触发的代码,并且在无 ...

  9. mmap vs read

    先放个结论: 内存映射通常比随机访问更快,尤其访问的对象是分离的和不可预测的. 内存映射会持续占用pages, 直到完成访问. 这意味当长时间重度使用一个文件很久之前, 然后你关闭了它, 然后再重新打 ...

  10. 【转载】 C#中常见的泛型集合类有哪些

    在C#语言编程过程中,List集合类是最常见的泛型集合类,其实除了List集合,还有其他一些常用的泛型集合类,如字典类型Dictionary泛型集合类.先进先出的队列类型Queue泛型集合类.后进先出 ...