实现轮播图滑到当前放大的效果(使用的是vantUI库)

时间：2021-02-26 19:24:35 阅读：31 评论：0 收藏：0 [点我收藏+]

技术分享图片

实现上图所示的轮播图的效果
html:

　　　　<van-swipe class="swiper-block" :loop="true" :width="160" @change="onChange">

　　　　　　<van-swipe-item class="swiper-item" :class="{‘active‘: index == activeIndex}" v-for="(item, index) in swiperList" :key="item.id">

　　　　　　</van-swipe-item>

　　　　</van-swipe>

　　</div>

JS：

　　export default {

　　　　data () {

　　　　　　return {

　　　　　　　　swiperList: [

　　　　　　　　　　{

　　　　　　　　　　　　id: ‘0‘,

　　　　　　　　　　　　title: ‘图一‘,

　　　　　　　　　　　　img: require(‘@/assets/img/bg_movement.png‘),

　　　　　　　　　　{

　　　　　　　　　　　　id: ‘1‘,

　　　　　　　　　　　　title: ‘图二‘,

　　　　　　　　　　　　img: require(‘@/assets/img/bg_sugar.png‘)

　　　　　　　　　　{

　　　　　　　　　　　　id: ‘2‘,

　　　　　　　　　　　　title: ‘图三‘,

　　　　　　　　　　　　img: require(‘@/assets/img/bg_diet.png‘)

　　　　　　　　　　{

　　　　　　　　　　　　id: ‘3‘,

　　　　　　　　　　　　title: ‘图四‘,

　　　　　　　　　　　　img: require(‘@/assets/img/bg_blood.png‘)

　　　　　　　　　　}

　　　　　　　　]

　　　　　　　　activeIndex: 0

　　　　　　}

　　　　methods: {

　　　　　　onChange (index) {

　　　　　　　　this.activeIndex = index

　　　　　　}

CSS:　--> 用的less　

　　.swiper-scale-wrap{

　　　　padding: .4rem .15rem;

　　　　box-sizing: border-box;

　　　　height: 300px;

　　　　.swiper-block{

　　　　　　height: 200px;

　　　　　　.swiper-item{

　　　　　　　　display: flex;

　　　　　　　　justify-content: center;

　　　　　　　　align-items: center;

　　　　　　　　img{

　　　　　　　　　　width: 120px;

　　　　　　　　　　height: 140px;

　　　　　　　　　　display: block;

　　　　　　　　}

　　　　　　.active{

　　　　　　　　transform: scale(1.4);

　　　　　　　　transition: all .2s ease-in 0s;

　　　　　　　　z-index: 20;

　　　　　　}

实现轮播图滑到当前放大的效果(使用的是vantUI库)

原文：https://www.cnblogs.com/qianxiaoniantianxin/p/14453430.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)