ionic4中使用Swiper觸屏滑動 心酸路

2021-09-25 05:24:44 字數 1625 閱讀 3739

積分首頁的輪播圖,我想做得好一點,按照小谷給的原型圖,找到了很不多的例項。

但是實現的過程遇到了很多問題,同時也學到了很多!

找人弄原始碼,想通過上次那樣,在網頁上找到類似實現原始碼,不停的複製貼上修改來完成。

但中間明明看到載入出了頁面,所以就想取巧,卡在那個時間點,就能弄到原始碼

後來通過調節網速來使網頁卡頓獲取內容,但是獲取的原始碼內容不全,用不了

在網上找發現了兩個辦法,第一辦法是通過抓包工具來破解,但是不好用,很多方法都失效了。

不停的讓別人幫忙也是浪費別人的時間,自己查了查,發現swiper是專門做前端觸屏滑動的js庫

休息期間,讓大白幫我找找,因為他們專案組用到vue,前端基礎比較多,說不定知道

很神奇,可能是人不一樣,思路不一樣,查出來的內容也不一樣,大白一下就查到很多有價值的東西

找到了ios3d輪播圖,原來這個東西最開始是ios開發弄出來的,後來android平台和pc端學習。

晚上照著3d輪播路的思路找了很多方法實現,但都沒有弄出來。

對於乙個沒怎麼學過前端的人,要做得跟前端大牛一樣,光模仿就很吃力了。

吸取前一天的教訓,一直是在找別的方法實現3d輪播圖

可是最終這個東西是要用在ionic4,如果不能再ionic4上跑起來,就算能執行,專案上也用不到

我就再ionic4的範圍內找有沒有ionic4裡面的元件實現這種3d輪播圖

後來發現卡片是ionic4中有3d效果的乙個外掛程式。

試了試card,但是card的3d效果還是很差,還是比較平面的感覺。並且它不能實現兩邊的那個效果。所以,放棄。

最終找到了兩個可以用的,但是它們都是swiper實現的,而且原始碼是整個的html**,裡面有鏈結的,也有自己的css樣式和js**。

可是ionic4是繼承angular,是元件的形式,如何才能將這些**拆分,還能放到ionic4正常執行。

早上,因為ion-header、ion-******* 、ion-title 和ion-content的背景顏色不生效,生氣,想摔電腦,砸滑鼠,哭完,繼續

10點半那會兒,一切開始步入正軌,整個頁面的樣式除錯出來。

又開始整 html 到ionic4的遷移,但一直到下午3點,我都沒有試成功,沒有教程,看著每個頁面下的4個檔案,放置著從html裡拆分出來的檔案。

我覺得是不是自己弄錯了,是不是根本不允許這樣做,可是在ionic上純用html的**都可以,為什麼這個混用就不行。

後來想看看之前專案組裡做輪播是怎樣,他們用的是原生的外掛程式,這個或許他知道。

結果問到了上乙個做輪播圖的人,她當時負責從ionic3上遷移**到ionic4上,所以知道點。

結果,發現問題是引入檔案,在html裡,會直接在頁面中link hef 這樣引入css檔案和js檔案,但是在ionic4中,這些內容,要放入腳手架angular.json中,並且建立index.d.js檔案對引用的第三方js庫中的內容進行宣告,在之前的修改上,完成這些,才可以能讓引入的第三方swiper生效

這個半成品,用不了,哎!

ionic4 星級評價

1.建立乙個ionic專案 ionic start 專案名稱2.安裝依賴 使用ctrl c退出當前安裝,然後cd到所建立的專案,安裝依賴 cd 剛剛建立的專案名稱 cnpm install 3.新建star rating元件 ionic g component home star rating4.安...

ionic4 復用規則

在專案中很多時候都怕需求的一變再變,但是有些時候有些需求的改變,也可以讓你變的更加優秀。因為你需要不斷的努力,才可以滿足使用者的需求。但是如果需求的變得過於頻繁,對於開發者將是一把利刃。判斷不同的資料,最後放進乙個陣列,實現資料的雙向繫結 public addaward any 獎勵規則for le...

ionic4 新建 報錯

npm install g cordova ionic 安裝依賴ionic g module module slide ionic g component module slide 參考 安裝依賴包 報錯1no matching version found for ionic native stat...