vue-awesome-swiper踩坑:重新整理佈局錯亂,loop失效
vue-awesome-swiper使用傳送門,今天使用vue-awesome-swiper做一個數據信息滾動效果的時候,頁面載入完後,沒出現什麼問題,但是一重新整理當前頁面佈局就錯亂了,而且loop也失效了。
正確佈局如下:
一重新整理頁面:
網上查了下,發現是載入順序的問題,因為資料還沒有完全載入的時候就已經渲染swiper了。
解決的辦法是在初始化的配置選項裡面新增一下兩個屬性就可以了:
observer:true,//修改swiper自己或子元素時,自動初始化swiper
observeParents:true,//修改swiper的父元素時,自動初始化swiper
貼一下自己的程式碼:
html:
<swiper :options="swiperOption" ref="mySwiper" class="donate-list swiper-no-swiping"> <swiper-slide class="donate-item clear" v-for="(item,index) in scrollList" :key="index"> <p>{{index}}ID:{{item.id}}</p> <p>{{item.title}}</p> <p>{{item.seconds}}</p> </swiper-slide> </swiper>
js:
data(){ return { scrollList:[{seconds: "2017-03-10", title: "捐贈300", id: "11346279"},{seconds: "2018-01-21", title: "捐贈80", id: "11352761"}, {seconds: "2018-05-16", title: "捐贈100", id: "11354512"}], swiperOption:{ autoplay: { delay: 1000 }, direction: 'vertical', //設定滾動方向為垂直 slidesPerView: 3, //設定顯示個數為3 loop: true, observer:true,//修改swiper自己或子元素時,自動初始化swiper observeParents:true,//修改swiper的父元素時,自動初始化swiper }, } },
相關推薦
vue-awesome-swiper踩坑:重新整理佈局錯亂,loop失效
vue-awesome-swiper使用傳送門,今天使用vue-awesome-swiper做一個數據信息滾動效果的時候,頁面載入完後,沒出現什麼問題,但是一重新整理當前頁面佈局就錯亂了,而且loop也失效了。正確佈局如下:一重新整理頁面:網上查了下,發現是載入順序的問題,因
vue cli+axios踩坑記錄+攔截器使用,代理跨域proxy(更新)
1、首先axios不支援vue.use()方式宣告使用,看了所有近乎相同的axios文件都沒有提到這一點 建議方式 在main.js中如下宣告使用 import axios from 'axios'; Vue.prototype.$axios=axios; 那麼在其他vue元件中就可
vue cli+axios踩坑記錄+攔截器使用,代理跨域proxy
1、首先axios不支援vue.use()方式宣告使用,看了所有近乎相同的axios文件都沒有提到這一點 建議方式 2.小小的提一下vue cli腳手架前端調後端資料介面時候的本地代理跨域問題,如我在本地localhost訪問介面http://40.00.100.100:3002/是要跨域的,
Android踩坑:小數點變逗號,DecimalFormat格式化資料跟語言環境有關
在專案裡面需要將byte轉換成KB MB GB,並且保留兩位小數,用到了DecimalFormat來格式化資料,如下: DecimalFormat df = new DecimalFormat("0.00"); return df.format(value
Vue專案中vue-awesome-swiper輪播外掛使用例項:
源自開源專案:http://github.crmeb.net/u/blue 1,引入外掛 import { swiper, s
vue使用swiper的坑-刷新不動,loop屬性失效
style nbsp ora set 自己 pro dsl ble container 在網上查了很多問題,原因應該是加載順序的問題,數據還沒有完全加載的時候就已經渲染swiper了。 解決辦法,在swiper初始化的時候把以下兩個屬性加上。 observer:true,
vue-awesome-swiper實現輪播圖
install mys cti turn fff rip 引入 save data 1.首先通過npm安裝vue-awesome-swiper,我在項目中用的是2.6.7版本 npm install [email protected] –save 2.
Vue項目踩坑記~
found 成功 原因 提示 數據文件 support then ror tro 最近在寫一個Vue的項目~踩了很多坑,下面總結一下出現的問題 1.空白頁面,不提示報錯,但是什麽都沒有 main.js const app = new Vue({ router }).$
輪播圖組件及vue-awesome-swiper的引入
vue組件 -s -c pan target 錯誤 package size 初始 ?記在前面 你有多自律,就有多美好。 一、新建home.vue 1.上一篇為了方便展示,把頭部my-header組件放在了App.vue,現在我們刪掉App.vu
vue輪播圖插件vue-awesome-swiper的使用與組件化
css 對象類型 輪播 單獨 文件 ima some nbsp cnpm 不管是APP還是移動端網頁開發,輪播圖在大部分項目當中都是存在的,這時候如果用vue開發項目,選擇一款好的插件並且封裝好是很重要的 1. 推薦使用vue-awesome-swiper 安裝:cnpm
vue-awesome-swiper - 基於vue實現h5滑動翻頁效果
return wheel res 初始化 回調 param get export tick 說到h5的翻頁,很定第一時間想到的是swiper。但是我當時想到的卻是,vue裏邊怎麽用swiper?! 中國有句古話叫:天塌下來有個高的頂著。 在前端圈裏,總有前仆後繼的仁人誌
vue-awesome-swiper極速快三平臺出租 - 基於vue實現h5滑動翻頁效果
www. 準備 其中 use 代碼 dsl 有時 module 大神 中國極速快三平臺出租【大神源碼論壇】dsluntan.com 【布丁源碼論壇】budingbbs.com 企娥3393756370有句古話叫:天塌下來有個高的頂著。 在前端圈裏,總有前仆後繼的仁人誌士相
vue-awesome-swiper組件不能自動播放和導航器小圓點不顯示問題
tran ati val ping url div leon src back from:https://blog.csdn.net/osdfhv/article/details/79062427 <template> <div class="
記使用vue-awesome-swiper遇到的一些問題
rip rop scrollbar obj callback 做的 start script let 一、vue-awesome-swiper的使用 1、在項目中全局引用 import VueAwesomeSwiper from ‘vue-awesome-sw
Spring-boot整合Mybatis踩坑:不能找到@MapperScan標籤
開發工具:Ideal 使用場景:Demo 問題描述: Spring
vue整屏滾動切換vue-awesome-swiper
1、下載vue-awesome-swiper npm i --s vue-awesome-swiper 2、在main.js引入 import vueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(vueAwesomeSwiper);
Vue+Koa2移動電商實戰 (六)使用vue-awesome-swiper 制作商品推薦欄
code pan 滑動效果 border recommend comm -a from 一個 今天我們要制作的是商品推薦欄,也就是下面的這個,這個是有一個滑動效果的 首先還是來看我們的布局 HTML <!-- recommend goods area --
vue+framework7搭建踩坑的過程記載
1、需要顯示工具欄和選單欄時,不需要新增,預設值為yes,即顯示 <meta content="no" name="apple-mobile-web-app-capable"> 2、作用是控制狀態列顯示樣式 <meta name="apple-mobile-web-
常用---vue-cli中使用頁面切換庫vue-awesome-swiper以及動畫庫animate.css
vue-awesome-swiper以及animate.css使用 安裝下載:npm install --save vue-awesome-swiper animate.css 檔案入口main.
vue輪播圖外掛之vue-awesome-swiper
移動端輪播圖外掛,在使用iview圖形介面外掛中的carousel元件無法實現觸控滑動後,轉而使用vue-awesome-swiper外掛 1.npm安裝 npm i vue-awesome-swiper -S 我這裡安裝的是下面的這個版本 2.使用 全域性匯入: