使用Layui和Vue.js构建动态轮播图

// 引入所需模块 layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery'], function() { // 获取所需模块 var layer = layui.layer; var element = layui.element; var form = layui.form; var carousel = layui.carousel; var http = layui.http; var jquery = layui.jquery; // 给vue的baseurl赋值 vue.baseurl = http.baseurl; // 发送请求获取轮播图数据 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', // 指定轮播图容器的id width: '100%', // 设置轮播图宽度 height: '500px', // 设置轮播图高度 arrow: 'hover', // 鼠标悬停显示箭头 anim: 'fade', // 切换动画方式为淡入淡出 autoplay: 'true', // 自动播放 interval: '3000', // 自动切换时间间隔，单位毫秒 indicator: 'inside' // 指示器位置 }); }) } }); });