Vue实现轮播图

Posted 2023-03-19

参考技术A 轻量化的vue移动UI组件库Vant的相关使用
引入命令： npm i vant -s
局部配置，这样更加高效，避免整个加载，造成冗余，这里以使用Button为例子：
npm i babel-plugin-import -D -D是--save-dev的简写

在使用之前，还需要在配置.babelrc文件中配置： ["import","libraryName":"vant","style":true] 这一句

在布局中测试,效果这里就不写了，可以参考Vant的官网：

rem font size of the root element 是相对长度单位，相对于跟元素（即html元素）font-size计算值的倍数

iPhone5 1rem==16px html默认的font-size==16px，不同的手机屏幕素质不同，需要动态获取屏幕的宽度，
动态设置根元素的字体大小，这里也就是html元素下字体的大小，从而控制rem的值。

在css中设置:

对于一些高清屏，需要调整这个缩放值，正常initial-scale=1.0,需要调小，但绝大多数情况是不用调整这个的
<meta name="viewport" content="width=device-width,initial-scale=1.0">

主要用到Vant的轮播组件Swipe,SwipeItem,还用到了Vue的双向绑定，以及v-for指令遍历图片数组内容
Vant引入：

定义数据：

布局内容：

这里写完后，查看效果发现轮播图没有居中，因为Swipe自带了边界，需要在css中进行清除 .swipe-area clear: both;
但这还没有完，如果出现图片过大，或者网络情况较慢的情况，我们需要避免用户等待过久，程序员就是这么贴心。Vant提供了懒加载 LazLoad，引入后我们只需更改前面写的这个 <img :src="banner.imageUrl" width="100%"/> 改成 <img v-lazy="banner.imageUrl" width="100%"/> 就可以。模拟测试可以更改chrome浏览器的network状态为slow3G,模拟3G网络下的情况。

npm install --save axios
使用的过程：

复习过程出现报错：
Unresolved function or method require()
解决办法：
file-->setting-->Languages&Frameworks-->javascript-->Libraries-->DownLoad 找到Requiries相关内容，download后问题解决。

用vue写一个轮播图效果

参考技术A

一、原理
在轮播图数组dataList中，定义一个变量currentIndex = 0表示第一张图片，默认渲染第一张图片即dataList[currentIndex]，然后获取每张图片的下标。点击切换图片时把当前图片的下标赋值给currentIndex即可实现图片切换显示。

二、定义变量

三、模板渲染

四、点击小圆点切换图片

在li标签里执行一个点击函数，把当前下标值传进来。点击时设置currentIndex的值为当前的下标值。

五、左右按钮切换图片

定义两个变量作为参数prevIndex和nextIndex，利用计算属性算出当前图片的上一张图片或者下一张图片的下标（加1和减1操作）。

六、定时器切换图片
定义一个定时器，每X秒执行一次nextIndex()函数即可。

鼠标经过清除定时器就不说了，使用clearInterval(this.timer)就可以了。

七、css样式