vue封裝swiper代碼實例解析
更新時間：2019年10月08日 14:12:31 作者：王明月
這篇文章主要介紹了vue封裝swiper代碼實例解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
這篇文章主要介紹了vue封裝swiper代碼實例解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
data(){
return{
list:[],
swiperOption:"",
xiding : "",
// 輪播高度
SwiperHeight:''
}
},
mounted(){
this.onload()
// 獲取輪播圖圖片的高度
setTimeout(()=> {
// 通過ref獲取輪播dom，獲取輪播的高度
console.log(this.$refs.mySwiper.$el.offsetHeight)
this.SwiperHeight = this.$refs.mySwiper.$el.offsetHeight
},2000)
// 監(jiān)聽滑動事件
window.onscroll = this.handleScroll
},
destroyed(){
window.onscroll = null; //清除滑動事件綁定
},
methods:{
handleScroll(){
// 獲取屏幕滑動的高度
console.log(document.documentElement.scrollTop)
// 滑動高度 > 輪播dom高度 吸頂
if(document.documentElement.scrollTop > this.SwiperHeight){
// 吸頂
this.xiding = true
}else{
// 取消吸
this.xiding = false
}
},
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了vue使用Echart線柱混合圖排坑記錄,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
這篇文章主要介紹了詳解基于vue的移動web app頁面緩存解決方案，非常具有實用價值，需要的朋友可以參考下2017-08-08
基于Vue實現(xiàn)關(guān)鍵詞實時搜索高亮顯示關(guān)鍵詞
這篇文章主要介紹了基于Vue實現(xiàn)關(guān)鍵詞實時搜索高亮顯示關(guān)鍵詞，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
下面小編就為大家?guī)硪黄獪\談sass在vue注意的地方。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)日歷功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了element-ui中使用upload組件獲取上傳文件信息方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue.js中一個很重要的知識點是組件通信,不管是業(yè)務(wù)類的開發(fā)還是組件庫開發(fā),都有各自的通訊方法,下面這篇文章主要給大家介紹了關(guān)于Vue3常用的通訊方式的相關(guān)資料,需要的朋友可以參考下2022-05-05
但隨著vue3版本的到來，對typescript的支持度越來越高，tsx語法也被大部分人越來越接收，所以很多項目都是搭配 Vue3 + TS 進行的，這篇文章主要介紹了一文掌握在Vue3中書寫TSX的方法,需要的朋友可以參考下2023-05-05
vue修改this.$confirm的文字樣式、自定義樣式代碼實例
this.$confirm是一個?Vue.js?中的彈窗組件,其樣式可以通過?CSS?進行自定義,下面這篇文章主要給大家介紹了關(guān)于vue修改this.$confirm的文字樣式、自定義樣式的相關(guān)資料,需要的朋友可以參考下2024-02-02
今天小編就為大家分享一篇使用electron將vue-cli項目打包成exe的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09