[微信小程序-轮播图]轮播图组件:展示的图片放大,隐藏的缩小,动态轮播

一、组件效果图

点击展示>>组件效果图

二、组件源码

2.1 文件位置示意图

2.2 js

// components/swiperDIY/swiperDIY.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    imgUrls:Array,
    changeTime:Number,
  },

  /**
   * 组件的初始数据
   */
  data: {
    cur:0,//改变当前索引
  },

  /**
   * 组件的方法列表
   */
  methods: {
    swiperChange(e){
      const that = this;
      this.setData({
        cur:e.detail.current
      })
    },
  }
})

2.3 json

{
  "component": true,
  "usingComponents": {}
}

2.4 wxml

<swiper 
  autoplay="ture"
  interval="{{changeTime}}"
  circular="ture"
  previous-margin="100rpx"
  next-margin="100rpx"
  current="0"
  class="swiper-block"
  bindchange="swiperChange"
  >
  <block wx:for="{{imgUrls}}" wx:key="index"> 
    <swiper-item class="swiper-item">
      <image 
        mode="aspectFill"
        src="{{item}}"
        class="slide-image {{cur== index ? 'active' : 'common'}}"
      /> 
    </swiper-item>
  </block>
</swiper>

2.5 wxss

/* banner样式 */

.swiper-block{
  background:#fff;
  height:450rpx;
  width:100%;
}

.swiper-item{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: unset;
  width: 550rpx;
  height: 450rpx;
  padding: 70rpx 0rpx 20rpx;
  box-sizing:border-box;
}

.slide-image{
  height:250rpx;
  width: 450rpx;
  border-radius: 10rpx;
  margin:0rpx 50rpx;
  z-index: 1;
  box-shadow:10rpx 5rpx 40rpx rgba(0,0,0,0.5)
}

.active{
  transform: scale(1.3);
  transition: all .5s ease-in 0s;
  z-index: 20;
  opacity: 1;
}

.common{
  transform: scale(1);
  transition: all .5s ease-in 0s;
  z-index: 0;
  opacity: 0.7;
}

/* banner样式结束 */

三、如何使用

3.1 对应页面json引入组件

{
  "usingComponents": {
    "swiperDIY":"../../components/swiperDIY/swiperDIY"
  }
}

3.2 对应页面wxml中添加

<swiperDIY imgUrls="{{myImgs}}" changeTime="{{changeTime}}" />

changeTime是轮播间隔时间,也可以在组件中设置默认值;

3.3 js中的data添加数据:

data: {
    /*swiperDIY轮播图图片数据 */
    myImgs:[
      "图片地址",
      "图片地址",
      "图片地址",
      "图片地址"
    ],
},

四、演示小程序(待更新)

© 版权声明
THE END
喜欢就支持一下吧
点赞0
评论 抢沙发

请登录后发表评论