移动端一个swiper轮播图，因为是动态请求回来的数据，所以一开始用的vue.nextTick,但是发现一直有问题，单个swiper-slider的宽度，动态渲染的a标签宽度一直是120px，如图

就在vue.nextTick里加了个延时，一直延时到4s效果才能正常显示，但在网速慢的时候还是会出现上述问题，并且延时渲染导致页面效果也不好，再后来以为是页面上请求的图片太多了，导致页面渲染的很慢，把所有的图片都用懒加载处理了，轮播图问题依然不行，就各种查，各种试，后来发现了几个参数：

slidesPerView：slidersPerView的作用是控制单屏显示的slider的数量，如果设置成数字，比如5，那单屏就会显示5个slider
现在我们设置为auto，也就是让slider的宽度自适应，宽度由内容来撑开，而正常的单个slider的宽度就是由这个参数来确定的， 比如你的屏幕是375px的移动设备，当你吧slidesperView设置为5 时 那么单个slider的宽度就是75px，但是发现设置成auto以后，渲染正常，但是滑动的时候不对了，滑动的依然是一开始的120px，又查，发现了下面的参数：

实际上也是加上这三行就没问题了

paginationClickable: true,//点击分页器的指示点分页器会控制Swiper切换
observer:true,//修改swiper自己或子元素时，自动初始swiper
observeParents:true,//修改swiper的父元素时,自动初始swiper

完整代码如下：

if (res && res.data && res.data.list.length > 0) {
                    var list = res.data.list;
                    if (list.length > 0) {
                        app.carouselData = app.processArticles(list);
                        app.$nextTick(function () {
                            var mySwipe = new Swiper('.carousel', {
                                pagination: {
                                    el: '.swiper-btn',
                                    clickable: true,
                                },
                                slidesPerView: "auto",
                                paginationClickable: true,
                                observer: true,
                                observeParents: true,
                                autoplay: {
                                    delay: 8000,
                                }
                            });
                        })
                    }
                }

完美解决。