官网地址
参考此文章(点击我)
图片需要动态获取时
待数据加载成功且渲染完毕后,进行节点初始化。例:
axios。邮报》(“接口地址”,参数)。(反应=比;{
这一点。页面=response.data;//页面渲染数据的数组
美元。nextTick(()=比;{//渲染结束//mySwiper里面的属性按需配置,详情见官网
让mySwiper=new偷窃者(”。swiper-container”, {
initialSlide: 0,//默认播放(值为图片下标)
循环:假的,//不循环
速度:600//切换速度
paginationClickable:真的,//点击小点可以切换
});
});
});
之前
当有3组图片需要依次播放时(多组以此类推)
情景:第2组图片滑动最后一张时,需要加载第3组图片;第2组图片滑动第一张时,需要加载第1组图片。
方法:在初始化的时候,配置回调函数onTouchStart(开始滑动的X轴值)和>
美元。nextTick(()=比;{
让mySwiper=new偷窃者(”。swiper-container”, {
观察者:真的,//修改偷窃者自己或子元素时,自动初始化偷窃者
observeParents:真的,//修改偷窃者的父元素时,自动初始化偷窃者>
mySwiper。slideTo('要跳转的图片下标”,10,false)//10表示跳转速度;假代表是否触发回到函数
数据方法配置
出口默认{
名称:”,
数据(){
返回{
swiperOption: {//NotNextTick是一个组件的属性,如果NotNextTick被设置为true,该组件不会实例化通过NextTick偷窃者,这意味着你可以得到偷窃者对象第一次(如果你需要使用偷窃者对象做什么事情,那么这个属性必须是真实的)//notNextTick是一个组件自有属性,如果notNextTick设置为真的,组件则不会通过NextTick来实例化偷窃者,也就意味着你可以在第一时间获取到偷窃者对象,假如你需要刚加载遍使用获取偷窃者对象来做什么事,那么这个属性一定要是正确的
notNextTick:没错,//偷窃者配置所有的配置同偷窃者官方api配置
播放:3000//方向:“垂直”,
效果:“coverflow”,
grabCursor:没错,
setWrapperSize:没错,//autoHeight:没错,//paginationType:“子弹”,
分页:“.swiper-pagination”,
paginationClickable:没错,
prevButton:“.swiper-button-prev”,
nextButton:“.swiper-button-next”,//滚动条:“.swiper-scrollbar”,
mousewheelControl:没错,
observeParents:没错,//如果需要使用插件偷窃者,这样您可以在这里配置//如果自行设计了插件,那么插件的一些配置相关参数,也应该出现在这个对象中,如下调试器//调试器:没错,//偷窃者回调//偷窃者的各种回调函数也可以出现在这个对象中,和偷窃者官方一样//onTransitionStart(读卡器){//console.log(读卡器)//},//更多偷窃者配置和回调……//?
}
}
组件}:{
偷窃者,
swiperSlide
}，//你可以找到当前偷窃者这样的实例对象,而notNextTick属性值必须是真实的//如果你需要得到当前的偷窃者对象来做一些事情,你可以像下面这样定义一个方法属性来获取当前的偷窃者对象,同时notNextTick必须为真实的
计算:{
偷窃者(){
返回这个。refs.mySwiper.swiper美元
}
}，
安装(){//你可以使用当前偷窃者实例对象(偷窃者方法)//然后你就可以使用当前上下文内的偷窃者对象去做你想做的事了//控制台。日志(这是当前偷窃者实例对象,this.swiper)//this.swiper。假slideTo (1000)
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
