swiper vue 切换到指定_在vue中使用swiper实现PC端横向内容左右滑动的效果

{ {item}}

{ {item}}

//引入swiper滑动组件

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'import'swiper/css/swiper.css'exportdefault{

components: {

Swiper,

SwiperSlide

},data() {return{

swiperStyle: {},

swiperOptions: {

slidesPerView:'auto',

freeMode:true, //随意拖动位置

mousewheel: true},

stepActive:6}

},

computed: {

swiper() {return this.$refs.mySwiper.$swiper;

}

},

watch: {

stepActive: {

handler(newVal,oldVal) {

console.log(this.stepActive);if(this.stepActive) {this.swiperStyle = "width:"+ 500*this.stepActive/16 + "rem"; //动态设置宽度