野生大熊猫

HTML仿支付宝/微信账单交互效果
这几天做账单列表,看见支付宝的账单的体验很舒服,于是自己想仿一个出来。但是过程中遇到了问题当时思前想后想用js来判...
扫描右侧二维码阅读全文
21
2019/07

HTML仿支付宝/微信账单交互效果

这几天做账单列表,看见支付宝的账单的体验很舒服,于是自己想仿一个出来。但是过程中遇到了问题当时思前想后想用js来判断容器的位置,让容器之间相互产生交互。无奈自己太年轻了。
导致很多兼容不断在修复,于是乎,到思否提问,答主也特别的干脆:

TIM截图20190721160147.png

于是我把代码改了一下,无需使用js既可实现。

支付宝账单图我就不截取了,附上成品。

b1b036b5798a1f76bbbd61eeea32548c.gif

就这种丝滑般的感觉。

标题那边就是显示日期

html代码

<div class="content">
        <div class="list" id="list_1">
            <h2>标题</h2>
            <ul>
                <li>这是列表</li>
                <li>这是列表</li>
                <li>这是列表</li>
                <li>这是列表</li>
                <li>这是列表</li>
                <li>这是列表</li>
                <li>这是列表</li>
                <li>这是列表</li>
                <li>这是列表</li>
                <li>这是列表</li>
                <li>这是列表</li>
                <li>这是列表</li>
                <li>这是列表</li>
                <li>这是列表</li>
                <li>这是列表</li>
                <li>这是列表</li>
                <li>这是列表</li>
                <li>这是列表</li>
                <li>这是列表</li>
                <li>这是列表</li>
                <li>这是列表</li>
                <li>这是列表</li>
            </ul>
        </div>
        <div class="list" id="list_1">
            <h2>标题2</h2>
            <ul>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>
                <li>这是列表2</li>

            </ul>
        </div>
    </div>**加粗文字**

css 代码

body{
    background: #eee;
}
.content{
    padding: 10px;
}
.content .list{
    background: #fff;
    /*margin-bottom: 10px;*/
    position: relative;
}
.content .list h2{
    text-align: center;
    padding: 10px 0;
    position: sticky;
    top: 0;
    background: #f5f5f5;
    width: 100%;
    /*width: calc(100% - 20px);*/
}
.content .list ul{
    padding-top: 40px;
}
.content .list li{
    height: 20px;
    line-height: 20px;
    padding:10px;
    border-bottom: 1px solid #f5f5f5; 
}
Last modification:July 21st, 2019 at 04:05 pm
If you think my article is useful to you, please feel free to appreciate

One comment

  1. sdgr

    单号网 空包网 快递单号购买 快递代发就找www.danhw.com

Leave a Comment