微信小程序:放大效果轮播图详解

最新推荐文章于 2024-08-21 17:47:57 发布

温暖会追上来的.

最新推荐文章于 2024-08-21 17:47:57 发布

阅读量2.9k

点赞数 1

分类专栏：微信小程序开发者工具

本文链接：https://blog.csdn.net/Strawberry_595/article/details/83388937

版权

微信小程序开发者工具专栏收录该内容

4 篇文章 0 订阅

订阅专栏

轮播图是每个应用APP基本上都会用到的<view>.也是初学小程序前端必须知道的东西;

WXML:

  <swiper class="swiper-block" previous-margin="90rpx" next-margin="90rpx" current="0" 
indicator-dots="true" autoplay="true" interval="2000" duration="500" 
bindchange="swiperChange">                            /*swiper是微信小程序的一个标签,一个轮播图专用的标签*/
    <block wx:for="{{Images}}" wx:index="{{index}}">  /*循环image数组里的图片*/
      <swiper-item class="swiper-item">
        <image mode="aspectFill" src="{{item.img_url}}" 
         class="slide-image {{swiperIndex == index ? 'active' : ''}}" />  
                                                    /*如果swiperTndex等于index时  显示active里的变化   不等时就是slide-image的样式,这个主要是设置了当前的图片的放大效果*/
      </swiper-item>
    </block>
  </swiper>

JS:

Page({
  data: {
    Images: [{
        img_url: "../../img/1.jpg"
      },
      {
        img_url: "../../img/2.jpg"
      },
      {
        img_url: "../../img/3.jpg"
      },
      {
        img_url: "../../img/4.jpg"
      },
      {
        img_url: "../../img/5.jpg"
      },
    ],
    swiperIndex: 0
  },
  swiperChange(e) {
    var that = this;
    that.setData({
      swiperIndex: e.detail.current,           /*定义当前数据的swiperIndex等于当前数据的current*/
    })
  },
  onLoad: function() {                       /*微信小程序一开始时就调用*/
    this.setData({             
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return util.formatTime(new Date(log))
      })
    })
  }
})

WXSS:

.swiper-block {
  height: 480rpx;
  width: 100%;
  background-color: #b36969;
}

.swiper-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: unset;
}

.slide-image {
  height: 420rpx;
  width: 520rpx;
  border-radius: 9rpx;
  box-shadow: 0px 0px 30rpx rgba(138, 69, 69, 1);
  margin: 0rpx 10rpx;
  z-index: 1;
}
.active {
  transform: scale(1.14);          /*当前放大效果为y轴扩大1.14倍*/
  transition: all 0.2s ease-in 0s;        /*放大的效果是0.2秒完成*/
  z-index: 20;
}