swiper 在vue 中的使用(简单)

本次使用的是 swiper5,swiper 不同版本在使用 的过程会有一些差别

swiper 在vue 中的使用(简单)_第1张图片

 

说明:本次示例中 skuImageList 是图片列表,由父组件从服务器获取然后传给这个轮播子组件使用

服务器返回的数据结构如下,一个数组包含了几个对象,对象里有图片

swiper 在vue 中的使用(简单)_第2张图片

 

html 结构,根据自己的需要进行删减,本次只保留了前进后退按钮

js部分

说明:本次使用swiper5,因为是从服务器获取的数据,所以放在了 updata 生命周期中。

 本次设置了轮播显示的图片数量,以及轮播图片的高度。


                    
                    

你可能感兴趣的:(vue.js,前端,javascript)