zoukankan      html  css  js  c++  java
  • 纯css实现移动端横向滑动列表(可应用于ionic3移动app开发)

    前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题。

    这个问题不知道iscroll本身能不能解决,当时选择了换一种方式来做,只要css就能搞定了,主要是利用了display:-webkit-box来实现。

    <!DOCTYPE html>
    <html>
    <head>
        <title>横向滑动</title>
        <style type="text/css">
            .slide-box{
                margin-top: 200px;
                display: -webkit-box;
                overflow-x: scroll;
                -webkit-overflow-scrolling:touch;
            }
            .slide-item{
                 200px;
                height: 200px;
                border:1px solid #ccc;
                margin-right: 30px;
            }
        </style>
    </head>
    <body>
        <div class="slide-box">
            <div class="slide-item"></div>
            <div class="slide-item"></div>
            <div class="slide-item"></div>
            <div class="slide-item"></div>
            <div class="slide-item"></div>
        </div>
    </body>
    </html>
  • 相关阅读:
    Java 之Integer相等比较
    Java 之HashMap.values()方法误用
    Java 异常归纳总结
    MySQL之GROUP BY用法误解
    Java 类的成员初始化顺序
    十三、java_GUI
    十二、java_网络编程
    十一、java线程
    十、java_IO
    九、java容器
  • 原文地址:https://www.cnblogs.com/lsongyang/p/10667485.html
Copyright © 2011-2022 走看看