前端项目实战小tip经验总结（持续更新）

发表于 | 更新于 | 分类于 ，

前端小demo和经验总结汇总

HTML标签

多用h5语义化标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
    <header>
        <nav> …… </nav>
    </header>
    <aside>
        <nav> …… </nav>
    </aside>
    <section> …… </section>
    <section> …… </section>
    <section> …… </section>
    <article>
        <header>……</header>
        <section>……</section>
        <section>……</section>
        <section>……</section>
        <footer>……</footer>
    </article>
    <footer>
        <address>……</address>
    </footer>
</body>

事件对象

onscroll滚动事件

滚动条事件window.onscroll

处理页面滚动事件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// vue环境下
handleScroll() {
    var _self = this
    var tur = true
    var appOffset = document.getElementsByClassName('app-main')

    // 条件判断+延迟执行阻止scroll事件多次执行
    function haha() {
        console.log('你滚动了页面，进入判断')
        _self.$nextTick(() => {
            _self.setIsLoginShow(true)
        })
        tur = true
    }

    var oldTop = document.documentElement.scrollTop || document.body.scrollTop

    window.onscroll = function() {
        var newTop = document.documentElement.scrollTop || document.body.scrollTop
        var OffTop = newTop - oldTop // 滚动的偏移量

        // 排除：1.当用户没有登录 2.登录框没有显示时 3.非处理页面
        if (!_self.isLogin && !_self.isLoginShow)  {
            if (_self.notHandlePath.indexOf(_self.$route.path) !== -1) {
                return
            } else {
                if (tur && OffTop > 50 || OffTop < -50) {
                    setTimeout(haha, 500);
                    tur = false
                } else {
                    return
                }
            }
        }
    }
},

方法封装

  • 可以给封装的方法的形参中添加一个回调函数，以达到多种不同情况的额外应用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function test(call) {
        //...函数方法
        if(call) call()
    }

    // 调用的不同情况
    // 普通调用
    test()

    // 额外情况调用
    test(() => {
        // 这里放额外需要在这个方法中另外调用的函数方法
    })

各类控件

导航类

Tab标签

Vue.js实现tab切换效果

table表格

待研究

搜索框

样式相关

切换主题

------------- 本文到此结束啦 感谢您的阅读 ♪(＾∀＾●)ﾉ -------------
0%