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触屏滑动--技术
这个demo只有HTML的内容,但我要在ionic4上使用,所以就把它修改后用在ionic上! 原文件 <!DOCTYPE html> <html lang="en&quo ...
手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览源码下载实现的代码. html代码: <div ...
JS 移动端触屏滑动
首页> 程序开发 > web前端 > JavaScript > 正文 JS案例之5--移动端触屏滑动 2014-08-15 0个评论收藏我要投稿移动端 ...
JS移动客户端--触屏滑动事件 banner图效果
JS移动客户端--触屏滑动事件移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...
自动轮播图html代码适应手机,JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)...
1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了, ...
QWebEngineView 实现网页触屏滑动
问题描述: 最近遇到一个很棘手的bug,最初做需求的时候没考虑到通用,认为前端不会经常改架构,就写死了只对某个标签设置scrollbar的值,导致后面前端html架构改了之后,找不到相应的标签,触屏滑 ...
QT实现滑动切换界面，ARM/Linux触屏滑动切换界面，切换Qwidget
QT实现滑动切换界面,触屏滑动切换界面实现思想实现过程完整代码实现思想项目中要用到ARM,要求手势滑动能够切屏,首先我们想到使用 QGestureEvent,但使用起来比较麻烦,并且个人了解 ...
python手机触屏代码_JS移动客户端--触屏滑动事件及js手机拖拽效果
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
移动客户端触屏滑动事件
手机移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...

ionic4中使用Swiper触屏滑动---心酸路

心酸历程：

2019-7-9：

2019-7-10：

2019-7-12：

ionic4中使用Swiper触屏滑动---心酸路相关推荐

最新文章

热门文章