码迷,mamicode.com
首页 > 移动开发 > 详细

手机端--swiper一屏展示下个轮播的一半的效果

时间:2021-02-25 11:49:26      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:image   nta   pre   wrapper   transform   import   width   icon   ansi   

技术图片

 

手机屏展示这样的效果,用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;
  width: 620rpx;
  height: 164rpx;
  border-radius: 16rpx;
}
</style>

 

手机端--swiper一屏展示下个轮播的一半的效果

标签:image   nta   pre   wrapper   transform   import   width   icon   ansi   

原文地址:https://www.cnblogs.com/lvlvlv/p/14441805.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!