在項目中有用到sticky的布局，可是由于兼容性問題，在安卓端沒有很好的兼容，所以為了徹底解決這個問題只能寫一個組件來解決這個麻煩的問題，這里為什么是組件而不是指令是因為，是有原因的，下面會講到。
position:sticky的兼容性以及作用
Caniuse上顯示sticky的兼容性如下：
Sticky的作用相當于relative和fixed的結(jié)合體，當修飾的目標節(jié)點再屏幕中時表現(xiàn)為relative，當要超出的時候是fixed的形式展現(xiàn)，因為這個特性，我們就可以來實現(xiàn)一個sticky的模擬效果。
sticky組件實現(xiàn)
template部分
<template> <div class="sticky" :style="getPosition"> <div class="sticky-warp"> <slot></slot> </div> </div></template>
代碼解讀：這里我使用了組件來實現(xiàn)，而不用指令來實現(xiàn)的原因是：指令雖然是無侵入性的，更方便使用，可是有一個弊端就是當修飾的節(jié)點fixed的時候會脫離文檔流，會改變滾動的條的高度，如果僅僅是配合原生滾動條來實現(xiàn)是沒問題的（當然這也會存在滾動過快的問題），可是由于是配合自定義滾動所以，采取這種折中的方式來實現(xiàn)。最外層是一個sticky層，判斷瀏覽器是否支持sticky，不支持就使用relative來代替，這樣也就不會改變?yōu)g覽器高度的情況了，然后動態(tài)改變stick-warp層的postion來實現(xiàn)效果。
css部分
<style scoped lang="less" rel="stylesheet/less"> .sticky { width: 100%; .sticky-warp { width: 100%; background: inherit; will-change: change; height: inherit; top: inherit; } }</style>代碼解讀：這里的warp層的背景色設(shè)置和sticky一致，這樣過渡不會太生硬，高度和top都根據(jù)用戶對外層sticky的自定義來實現(xiàn)，這樣這部分簡單用css就可以完成了。
JS部分
<script type="text/babel"> export default { data () { return {} }, computed: { getPosition(){ var position = this.cssSupport('position', 'sticky') ? 'sticky' : 'relative'; return 'position:' + position; } }, props: {}, beforeMount () { }, mounted(){ this.init(); }, deactivated(){ if(this.cssSupport('position', 'sticky')) { return; } /*復位*/ var elWarp = this.$el.querySelector('.sticky-warp'); elWarp.position = 'absolute'; }, methods: { init(){ if (this.cssSupport('position', 'sticky')) { return; } var el = this.$el, target = this.$el.parentNode, elWarp = this.$el.querySelector('.sticky-warp'), top = this.getNumberValue(document.defaultView.getComputedStyle(el).top); this.addScrollListen(target, (event)=> { if (el.getBoundingClientRect().top <= top) { elWarp.style.position = 'fixed'; } if (el.getBoundingClientRect().top >= 0 && elWarp.style.position != 'absolute') { elWarp.style.position = 'absolute'; } }) }, cssSupport: function (attr, value) { var element = document.createElement('div'); if (attr in element.style) { element.style[attr] = value; return element.style[attr] === value; } else { return false; } }, getNumberValue(pxValue){ var value = String(pxValue).match(/^/-?/+?[0-9]+/g); return value ? Number(value) : undefined; }, addScrollListen(target, cb){ target.addEventListener('y-scroll', (event)=> { cb && cb(event); }); } }, } </script>代碼解讀：這里面主要先用cssSupport來判斷一下瀏覽器的支持情況，然后通過多自定義滾動y-scroll事件的監(jiān)聽，監(jiān)聽top值的改變來實現(xiàn)sticky-warp層的fixed和absolute的轉(zhuǎn)換。大概原理的思路及實現(xiàn)過程就是上面這樣，對于自定義的滾動的github地址：https://github.com/yejiaming/scroll，sticky組件以及原生滾動下的指令參考的實現(xiàn)的github地址如下：https://github.com/yejiaming/sticky
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
