2020年2月17日

vue中swiper正常使用回调函数的方法(代码片段)


vue中swiper正常使用回调函数的方法(代码片段),起源于一个swiper和一个不着边的列表,两者需要做关联。在常规的切图里面绝对不算复杂,复杂在是在vue项目里面。附上代码源码,重要部分都加粗了。

vue swiper组件现在默认应该是4.x版本,从参数的区别上可以看出。


<swiper class="h-view" :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item,index) in bigPic" v-if="index<4 " :key="index">
<router-link :to="{path:'/Knowledge_detail', query:{contentId: item.contentId}}">
<div class="img">
<img :src="item.bigImgUrl ? item.bigImgUrl : 'imgs/img01.jpg'"/>
</div>
<div class="txt">
<h3><label><big>{{index+1}}</big>/{{bigPic.length<4 ? bigPic.length : 4}}</label>{{item.title ? item.title : '暂无标题'}}</h3>
</div>
</router-link>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>

 

第二段


<li @mouseover="sliderJump(index)" v-for="(item,index) in bigPic" v-if="index<4">
<router-link :to="{path:'/Knowledge_detail', query:{contentId: item.contentId}}">
<div class="time">
<big>{{new Date(item.publish_time).format("dd")}}</big>
<p>{{new Date(item.publish_time).format("yyyy-MM")}}</p>
</div>
<div class="info">
<h3>{{item.title}}</h3>
<div class="txt">
{{item.summary ? item.summary.substr(0,30) : '暂无描述'}}
</div>
</div>
</router-link>
</li>

JS代码


import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
export default {

name: 'about',
computed:{
swiper(){
return this.$refs.mySwiper.swiper;
}
},
methods:{
hideDownApp:function(){

},
sliderJump:function(index){
this.swiper.slideTo(index);
}
},
mounted:function(){


this.$axios.get('/api/getHomePageData',{
//username:"lgs",password:"123"
})
.then(response => {
//console.log(response);



})
.catch(function (error) {
console.log(error);
});

},
created:function(){
this.$root.showDownApp = true;
this.$root.navOn = 'Home'
},
data:function(){
return {



swiperOption: {
pagination: {
el: '.swiper-pagination',
clickable :true
},
paginationClickable: true,
autoplay : {
delay:3000
},
autoplayDisableOnInteraction: false,
loop: false,
coverflow: {
rotate: 30,
stretch: 10,
depth: 60,
modifier: 2,
slideShadows : true
}
},
}
}
}

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732

标签:,