第一個坑:
vue中用swiper,swiper數據需動態渲染,那麼也會出現標題的情況,不能拖動
附代碼如下:
<div id="app">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in list"><img :src="item.url"/></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
new Vue({
el:'#app',
data: {
list:[],
img: [
{"url": "http://10.0.0.151:9080/files/SAPPO/ZY0002/20200526/202005261113055712.jpg"},
{"url": "http://10.0.0.151:9080/files/SAPPO/ZY0002/20200526/202005261113234130.jpg"},
{"url": "http://10.0.0.151:9080/files/SAPPO/ZY0002/20200526/202005261113354309.jpg"},
{"url": "http://10.0.0.151:9080/files/SAPPO/ZY0002/20200526/202005261113422081.jpg"}
],
},
mounted: function() {
this.init();
},
methods:{
init(){
setTimeout(()=>{
//模擬接口請求到的數據賦值
this.list = this.img;
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
}
});
},2000)
}
}
})
查看元素,如下圖
然後按照網上搜索的辦法,添加監聽父元素或者子元素改動,再重新實例化swiper
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
},
observer:true,//修改swiper自己或子元素時,自動初始化swiper
observeParents:true//修改swiper的父元素時,自動初始化swiper
});
基本上問題就已經解決了,但是~~~~我說的並不是這個坑
在實際的開發環境下,頁面還會有其他數據渲染,其實swiper本身沒有問題,就是其他代碼影響了它,報錯內容及元素審查節點如下
怎麼都找不到問題,我也一直以爲是引入了某個文件,影響了swiper;倒騰了一上午,自己寫示例排除錯誤。一個一個文件引入,結果都沒有問題;後來把html全部註釋,只留下swiper的內容,結果一切正常,淚奔~~~
然後一點點解開註釋,發現了問題
//我這樣寫,取serviceType數組第一個展示(數據正常的前提),影響了swiper報錯
<p>配送方式:<span>{{coupon.serviceType[0].serviceName}}</span></p>
//結果我改成這樣,swiper正常
<p>配送方式:<span v-for="(v,i) in coupon.serviceType">{{i==0?v.serviceName:''}}</span></p>
我有點無語,上面的寫法本來就沒錯;記錄下來,希望跟我遇到一樣情況的程序猿能看到,少踩點坑·····