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 = swiperList; vue.$nextTick(() => { carousel.render({ elem: '#test1', width: '100%', height: '420px', arrow: 'hover', anim: 'default', autoplay: 'true', interval: '3000', indicator: 'inside' }); }) // vue.$nextTick(()=>{ // window.xznSlide(); // }); } }); // 分页列表 pageList(); // 搜索按钮 jquery('#btn-search').click(function(e) { pageList(); }); function pageList() { var param = { page: 1, limit: limit } if (jquery('#bumenmingcheng').val()) { param['bumenmingcheng'] = jquery('#bumenmingcheng').val() ? '%' + jquery('#bumenmingcheng').val() + '%' : ''; } if (jquery('#bumenleixing').val()) { param['bumenleixing'] = jquery('#bumenleixing').val() ? '%' + jquery('#bumenleixing').val() + '%' : ''; } // 获取列表数据 http.request('bumenxinxi/list', 'get', param, function(res) { vue.dataList = res.data.list // 分页 laypage.render({ elem: 'pager', count: res.data.total, limit: limit, groups: 5, layout: ["prev","page","next"], theme: '#0099CC', jump: function(obj, first) { param.page = obj.curr; //首次不执行 if (!first) { http.request('bumenxinxi/list', 'get', param, function(res) { vue.dataList = res.data.list })
时间: 2024-01-10 17:02:08 浏览: 160
这段代码是一个使用 layui 和 http 模块实现的分页列表功能。首先使用 http 模块向后端发送请求,获取一些配置信息,其中包括轮播图的图片地址。然后使用 vue 实例中的数据项 swiperList 接收处理后的轮播图数据,并且使用 layui 的 carousel 模块渲染轮播图。接着,使用 jquery 监听搜索按钮的点击事件,并且调用 pageList 函数获取列表数据。pageList 函数中,首先根据搜索条件构造查询参数,再使用 http 模块向后端发送请求,获取列表数据,最后使用 vue 实例中的数据项 dataList 接收处理后的列表数据,并且使用 layui 的 laypage 模块渲染分页器。在分页器的回调函数中,根据当前页码重新发送请求,获取对应页码的列表数据,并且更新 dataList 数据项。
阅读全文