uniapp实现轮播swiper中间大两头小

简介: uniapp实现轮播swiper中间大两头小

html

<swiper class="swiper-block" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular='true' previous-margin='90rpx' next-margin='90rpx' current='0' @change="swiperChange">
        <swiper-item class="swiper-item" v-for="(item,index) in swiperImgUrls">
          <image :src="item" :class="['slide-image', currentIndex === index?'active':'']" mode="aspectFill"></image>
        </swiper-item>
</swiper>

js

  data() {
      return {
        swiperdata:[],
        swiperImgUrls: [
              'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2797486824,1669366989&fm=26&gp=0.jpg',
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606209804674&di=43e85524ef76a0511e2a6003ae1cd56a&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F41%2F37%2F01300000169980121904374291568.jpg',
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606209804674&di=01613472182e0cd4ac6eaaaf9ba18eea&imgtype=0&src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0829%2F372edfeb74c3119b666237bd4af92be5.jpg'
            ],
        currentIndex:0
      }
    },
  method:{
    swiperChange(event) {
        console.log(event)
        this.currentIndex = event.detail.current
      }
  }

css

    .swiper-block {
      height: 300rpx;
      width: 100%;
      }
      .swiper-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      overflow: unset;
      }
      .slide-image {
      height: 250rpx;
      width: 520rpx;
      border-radius: 9rpx;
      box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
      margin: 0rpx 30rpx;
      z-index: 1;
      }
      .active {
      transform: scale(1.14);
      transition: all 0.2s ease-in 0s;
      z-index: 20;
      }
相关文章
uniapp轮播带查看大图效果demo示例、带数字的轮播(整理)
uniapp轮播带查看大图效果demo示例、带数字的轮播(整理)
|
6月前
|
Web App开发 小程序 Android开发
Uniapp swiper 滚动图组件
Uniapp swiper 滚动图组件
70 0
|
前端开发 JavaScript
uniapp使用scroll-view与swiper组件实现tab滑动切换页面需要注意的问题
ab栏可以滑动,切换页面跟随tab栏同步滑动。这里需要注意的是使用swiper组件时,它会有一个默认的高度,你必须动态的获取数据列表的高度覆盖原来的默认高度。
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
127 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
62 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
82 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
112 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
113 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)

热门文章

最新文章