vue-awesome-swiper实现⽂字滚动1.1 引⼊ 全局引⼊，其他地⽅不需再引⼊。
import VueAwesomeSwiper from'vue-awesome-swiper'
import'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
1.2 使⽤
<div class="list">
<swiper :options="swiperOptions"class="swiper-no-swiping">
<swiper-slide v-for="(item, index) in awardAllList":key="item.id"class="item">
恭喜{{bile}} ；抽中 {{t}}
</swiper-slide>
</swiper>
</div>
data(){
return{
swiperOptions:{
autoplay:{
delay:1000
},
野战光缆direction:'vertical',
slidesPerView:5,
loop:true,
observer:true,
observeParents:true,
speed:1000,
mousewheel:false,
noSwiping:true
}
}
},
computed:{
swiperOptions(){
return{
autoplay:{
delay:1000
},
delta并联
机器人direction:'vertical',
slidesPerView:5,
loop:true,
observer:true,
speed:1000,
汽车阻尼板mousewheel:false,
十字滑台
noSwiping:true
}
}
},
1.3 样式
.list {
width:rem(588);
height:rem(260);
margin:rem(240) auto 0;
overflow: hidden;
.swiper-container {
玻璃钢拍门height:100%!important;
.item{
height:rem(40)!important; line-height:rem(40);
color: #f5f5f5;
font-size:rem(28);
margin-bottom:rem(12); letter-spacing:1px;
}
}
}
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议