Vue.js 轮播图实现：从获取配置到渲染

// 发送请求获取配置列表 http.request('config/list', 'get', { page: 1, limit: 5 }, function(res) { // 如果列表不为空 if (res.data.list.length > 0) { // 定义一个空数组存放轮播图列表 let swiperList = []; // 遍历列表中的每一个元素 res.data.list.forEach(element => { // 如果元素的值不为空 if (element.value != null) { // 将元素的值添加到轮播图列表中 swiperList.push({ img: http.baseurl + element.value }); } }); // 将轮播图列表赋值给vue实例的swiperList属性 vue.swiperList = swiperList; // 在vue实例渲染完成后执行 vue.$nextTick(() => { // 渲染轮播图 carousel.render({ // 轮播图容器 elem: '#test1', // 宽度 width: '100%', // 高度 height: '500px', // 箭头样式 arrow: 'hover', // 动画效果 anim: 'fade', // 自动播放 autoplay: 'true', // 播放间隔 interval: '3000', // 指示器位置 indicator: 'inside' }); }) } })