ionic4中使用Swiper触屏滑动---心酸路
生活随笔
收集整理的這篇文章主要介紹了
ionic4中使用Swiper触屏滑动---心酸路
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
心酸歷程：
積分首頁的輪播圖，我想做得好一點，按照小谷給的原型圖，找到了很不多的實例。
但是實現的過程遇到了很多問題，同時也學到了很多！
2019-7-9：
- 找人弄源碼，想通過上次那樣，在網頁上找到類似實現源碼，不停的復制粘貼修改來完成。
- 但由于微信手機端的內容在網頁上查看不了，它會提示“請在微信手機端打開”
- 但中間明明看到加載出了頁面，所以就想取巧，卡在那個時間點，就能弄到源碼
- 后來通過調節網速來使網頁卡頓獲取內容，但是獲取的源碼內容不全，用不了
- 所以，就只能通過破解微信手機端插卡的方式來弄到源碼
- 在網上找發現了兩個辦法，第一辦法是通過抓包工具來破解，但是不好用，很多方法都失效了。
- 后來，發現微信有一個微信開發者工具，在PC端裝了這個軟件，這樣就能在pc端查看微信手機端能夠查看的內容
- 最后在微信手機端弄到了源碼，但是文件的結構不對，能跑起來，但非常難改成我要用的，就放棄了。
- 不停的讓別人幫忙也是浪費別人的時間，自己查了查，發現Swiper是專門做前端觸屏滑動的js庫
- 下午，休息了一下，求助csdn論壇，求助微信朋友圈，遇到個人就問人家會不會這個。瘋了有點
- 休息期間，讓大白幫我找找，因為他們項目組用到vue,前端基礎比較多，說不定知道
- 很神奇，可能是人不一樣，思路不一樣，查出來的內容也不一樣，大白一下就查到很多有價值的東西
- 找到了ios3D輪播圖，原來這個東西最開始是ios開發弄出來的，后來Android平臺和pc端學習。
- 晚上照著3D輪播路的思路找了很多方法實現，但都沒有弄出來。
- 對于一個沒怎么學過前端的人，要做得跟前端大牛一樣，光模仿就很吃力了。
2019-7-10：
- 吸取前一天的教訓，一直是在找別的方法實現3D輪播圖
- 可是最終這個東西是要用在ionic4，如果不能再ionic4上跑起來，就算能運行，項目上也用不到
- 我就再ionic4的范圍內找有沒有ionic4里面的組件實現這種3D輪播圖
- 后來發現卡片是ionic4中有3D效果的一個插件。
- 試了試card，但是card的3D效果還是很差，還是比較平面的感覺。并且它不能實現兩邊的那個效果。所以，放棄。
- 最終找到了兩個可以用的，但是它們都是Swiper實現的，而且源碼是整個的html代碼，里面有鏈接的，也有自己的CSS樣式和js代碼。
- 可是ionic4是繼承angular，是組件的形式，如何才能將這些代碼拆分，還能放到ionic4正常運行。
2019-7-12：
- 早上，因為ion-header、ion-toolbar 、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中使用Swiper觸屏滑動—技術實現
這個半成品，用不了，哎！
總結
以上是生活随笔為你收集整理的ionic4中使用Swiper触屏滑动---心酸路的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 毕业，新的开始，撸起袖子加油干！
- 下一篇： ionic4中使用Swiper触屏滑动-