新聞單條無縫間歇向上滾動（第一次分享）

var_name_mongo發表於2018-12-20

寫此文背景： 在通過goole/百度搜尋之後，實現此效果的示例確實很多，但是拿到自己專案中，就是太適用（可能滾著滾著滾偏了），因此琢磨了好久，寫了該元件，肯定也有各種問題，所以分享出來讓大家路過的順便提一嘴，我好改之...

/**
 * desc: 單條向上無縫滾動
 */
import Vue from "vue";

Vue.directive('newscroll', {

    bind(el, binding, vnode) {
        // 進行一次性初始化設定      
        console.log('bind')
    },

    inseted (el, binding, vnode) {
        console.log('inseted')
    },
    update(el, binding, vnode) {
        console.log('update')

        let sel = el,   //該滾動元素
            die_h= binding.value.oH;  // 固定死的高度

        let step = 0,    // 一小步的距離
            timer_b = null,   // 迴圈每個li
            timer_s = null;   //  一個li迴圈高度++

        if (binding.oldValue.oH != binding.value.oH) {

            console.log('只呼叫一次')
            if (timer_b) clearTimeout(timer_b)
            cycle()
        }

        
        function cycle () {
            if (timer_b) clearTimeout(timer_b)
            timer_b = setTimeout(function () {
                scroll()
            }, 2000)
        }
               

        function scroll () {
            cancelAnimationFrame(timer_s);
            timer_s = requestAnimationFrame(function fn () {
                
                if (Math.abs(step) >= die_h) {
                    cancelAnimationFrame(timer_s);
                    step = 0
                    sel.style.marginTop = 0
                    sel.appendChild(sel.firstChild)
                    cycle()
                } else {
                    step--
                    sel.style.marginTop = `${step}px`
                    timer_s = requestAnimationFrame(fn)
                }
            })
        }

    },

    componentUpdated () {
        console.log('元件更新完成')
    },

    unbind () {
        console.log('解綁')
    }
});
複製程式碼

使用方法：

  • 新建一個名為 v-newscroll.js的檔案
  • 把以上程式碼複製進去
  • 將該檔案放入到一個你認為合適的目錄下
  • 在你要使用該指令的元件中應用
<template>
    <div class="scroll-wrap" ref="wrap">
            <span class="scroll-title">新聞: </span>
            <ul v-newscroll="{ oH }" class="list">
                <li v-for="(item, index) in list" :key="index">{{item}}</li>
            </ul>
        </div>
</template>

<script>
export default {
    name: 'scroll2',
    data () {
        return {
            list: [
                "1—— javascript",
                "2—— html",
                "3—— vue"
            ],

            oH: 0,
        }
    },

    mounted () {
        this.oH = this.$refs.wrap.offsetHeight;
    },

    directives: {
        "v-newscroll": require('../_common/directives/v-newscroll.js')
    }
}
</script>

<style lang="scss">

ul, li {
    list-style: none;
}

.scroll-wrap {
    border: 1px solid red;
    height: 60px;
    overflow: hidden;
    display: flex;
    background: lightcoral;
    color: #fff;
    box-sizing: border-box;
}

.scroll-title {
    line-height: 60px;
    background: #000;
    padding: 0 20px;
}
.list {

    margin-left: 20px;

    li {
        line-height: 60px;
        height: 60px;
    }
}

</style>
複製程式碼

好了，嘗試一下吧！

我之所以分享出來，是想讓各位大大給指正一下，我可以優化或者採取大大們的方案完成這個指令的編寫，在此，先謝過啦~

初來乍到，不喜勿噴！

相關文章