Layui 轮播图组件使用示例 - 代码解析与对比

Layui 轮播图组件使用示例 - 代码解析与对比

第一段代码：

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 = 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 = swiperList;

	      vue.$nextTick(() => {
	        carousel.render({
	        	elem: '#test1',
	        	width: '100%',
	        	height: '500px',
	        	arrow: 'hover',
	        	anim: 'fade',
	        	autoplay: 'true',
	        	interval: '3000',
	        	indicator: 'inside'
	        });

	      })

	      // vue.$nextTick(()=>{ 
	      //   window.xznSlide(); 
	      // });
	    }
	  });
});

第二段代码：

layui.use(['layer', 'element', 'carousel', 'laypage', 'http', 'jquery', 'laydate'], function() {
	  var layer = layui.layer;
	  var element = layui.element;
	  var carousel = layui.carousel;
	  var laypage = layui.laypage;
	  var http = layui.http;
	  var jquery = layui.jquery;
	  var laydate = layui.laydate;

	  var limit = 8;
	  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 = swiperList;

	      vue.$nextTick(() => {
	        carousel.render({
	        	elem: '#test1',
	        	width: '100%',
	        	height: '500px',
	        	arrow: 'hover',
	        	anim: 'fade',
	        	autoplay: 'true',
	        	interval: '3000',
	        	indicator: 'inside'
	        });

	      })
	      // vue.$nextTick(()=>{ 
	      //   window.xznSlide(); 
	      // });
	    }
	  });
	  // 第二段代码的核心功能：分页和日期选择
	  // 使用 laypage 模块实现分页功能
	  // 使用 laydate 模块实现日期选择功能
});

代码联系：

• 两段代码都使用了 Layui 模块化开发框架，并且都使用了轮播图的组件。

代码区别：

• 第一段代码中还使用了 form 模块，而第二段代码中使用了 laypage 和 laydate 模块。

核心代码选择：

• 应该选择第二段代码，因为它还使用了分页和日期选择的功能，更加完善。