vue封裝swiper代碼實(shí)例解析
更新時(shí)間：2019年10月08日 14:12:31 作者：王明月
這篇文章主要介紹了vue封裝swiper代碼實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
這篇文章主要介紹了vue封裝swiper代碼實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
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)聽滑動(dòng)事件
window.onscroll = this.handleScroll
},
destroyed(){
window.onscroll = null; //清除滑動(dòng)事件綁定
},
methods:{
handleScroll(){
// 獲取屏幕滑動(dòng)的高度
console.log(document.documentElement.scrollTop)
// 滑動(dòng)高度 > 輪播dom高度 吸頂
if(document.documentElement.scrollTop > this.SwiperHeight){
// 吸頂
this.xiding = true
}else{
// 取消吸
this.xiding = false
}
},
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue項(xiàng)目依賴包安裝及配置過程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
Vue3優(yōu)雅的實(shí)現(xiàn)跨組件通信的常用方法總結(jié)
開發(fā)中經(jīng)常會(huì)遇到跨組件通信的場(chǎng)景,props?逐層傳遞的方法實(shí)在是太不優(yōu)雅了,所以今天總結(jié)下可以更加簡(jiǎn)單的跨組件通信的一些方法,文中通過代碼實(shí)例講解的非常詳細(xì),需要的朋友可以參考下2023-11-11
vue安裝node-sass和sass-loader報(bào)錯(cuò)問題的解決辦法
這篇文章主要給大家介紹了關(guān)于vue安裝node-sass和sass-loader報(bào)錯(cuò)問題的解決辦法,文中通過圖文以及示例代碼將解決的方法介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了Vue全局事件總線，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要介紹了vue中使用codemirror的實(shí)例教程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-11-11
今天小編就為大家分享一篇vue點(diǎn)擊自增和求和的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
解決vue動(dòng)態(tài)下拉菜單 有數(shù)據(jù)未反應(yīng)的問題
這篇文章主要介紹了解決vue動(dòng)態(tài)下拉菜單 有數(shù)據(jù)未反應(yīng)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue如何用this.$set改變數(shù)組里的某個(gè)值
這篇文章主要介紹了Vue用this.$set改變數(shù)組里的某個(gè)值,文中通過示例代碼介紹了vue中this.$set()的用法----更新數(shù)組和對(duì)象的值，需要的朋友可以參考下2022-12-12
Vue axios與Go Frame后端框架的Options請(qǐng)求跨域問題詳解
這篇文章主要介紹了Vue axios與Go Frame后端框架的Options請(qǐng)求跨域問題詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解
今天小編就為大家分享一篇Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08