VUE 结合MUI 实现轮播图轮播效果

鼓捣了一上午，终于实现了vue结合mui 实现轮播效果。啥也不说了直接上代码吧。分别是mui实现的轮播效果图，以及mui+vue+ajax实现的轮播效果图。

MUI 实现轮播图轮播效果

mui写的实例，div代码块

js代码块

mui+vue+ajax 实现轮播图 实例

div代码块

此时，如果js代码 还用上面的

var gallery = mui('.mui-slider');
			gallery.slider({
			  interval:2000//自动轮播周期，若为0则不自动播放，默认为0；
			});

不再起作用，需要进行修改。 解决办法：

把那个轮播的操作写在vue的updated这个钩子函数里面

updated: function() {
     var sliderMuiObj = mui(".mui-slider");//滑动科目 
        sliderMuiObj.slider({
          interval: 2000  //如果你想自动3000ms滑动一下就写上这个。
         });
     },

具体代码实现：

我的ajax请求的数据格式是这样的：

{
	"success": true,
	"message": "success",
	"code": 200,
	"timestamp": 1539747857391,
	"result": {
		"productId": 150642571432838,
		"salePrice": 79,
		"productName": "坚果 3 绒布国旗保护套",
		"subTitle": "质感精良、完美贴合、周到防护",
		"limitNum": 100,
		"productImageBig": "https://resource.smartisan.com/resource/63ea40e5c64db1c6b1d480c48fe01272.jpg",
		"detail": "",
		"productImageSmall": ["https://resource.smartisan.com/resource/63ea40e5c64db1c6b1d480c48fe01272.jpg", "https://resource.smartisan.com/resource/4b8d00ab6ba508a977a475988e0fdb53.jpg", "https://resource.smartisan.com/resource/87ea3888491d172b7d7a0e78e4294b4b.jpg", "https://resource.smartisan.com/resource/8d30265188ddd1ba05e34f669c5dcf1c.jpg"]
	}
}

利用vue进行双向数据绑定，即可实现 轮播效果。
源码下载mui+Vue实现轮播效果源码