手机屏展示这样的效果,用swiper去实现,
<template> <view class="container"> <view class="mas-promo-swiper-scroll-wrapper" :style="{ transform:'translateX(' +swiperMarginLeft+'rpx)'}" //最主要的就是设置 previous-margin next-margin的值!并且设置父元素的平移距离,,并且在滑动到第一个或者最后一个时更改相对应的值! > <swiper class="swiper-wrapper" previousMargin="30rpx" nextMargin="30rpx" @change="changeSwiperItem" > <swiper-item v-for="(item, index) in list" :key="index" class="swiper-item" > <view class="mas-promo-swiper-item-image-wrapper"> <image :src="item.elememtIcon" /> </view> </swiper-item> </swiper> </view> </view> </template> <script lang="ts"> import { Vue, Component, Prop } from 'vue-property-decorator'; import * as util from '@/util/util.ts'; @Component export default class mySwiper extends Vue { private swiperMarginLeft: Number = -48; private interval: any = 5000; private allowClick: any = true; private currentIndex: Number = 0; private list: any = []; changeSwiperItem(e) { // TODO 滑动的同时动态修改margin-left会有抖动 var itemId = e.detail.current; var bannerList = this.list; this.currentIndex = itemId; if (itemId === 0) { this.swiperMarginLeft = -48; } else if (itemId === bannerList.length - 1) { this.swiperMarginLeft = 48; } else { this.swiperMarginLeft = 0; } } } </script> <style lang="less" scoped> .container { overflow: hidden; } .mas-promo-swiper-scroll-wrapper { transition: all 0.3s ease-out;//记得为父元素加个动画!这样在改变父元素的平移距离的时候就不会有跳动感觉了 } .swiper-wrapper { overflow: visible; } .swiper-item { display: flex; justify-content: center; align-items: center; } .mas-promo-swiper-item-image-wrapper image { display: block; 620rpx; height: 164rpx; border-radius: 16rpx; } </style>