您现在的位置是:网站首页> 编程资料编程资料

swiper在vue中的简单使用方法_vue.js_

2023-05-24 153人已围观

简介 swiper在vue中的简单使用方法_vue.js_

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

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

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

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

js部分

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

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