2019-01-30实现3D轮播和动态增删class类名

先看一下效果：

shadow.gif

swiper的相关属性

indicator-dots 是否显示小圆点，也可以自己重新设置小圆点
circular 是否衔接滑动，就是实现无限滚动
previous-margin 与上一张图片的间距
next-margin 与下一张图片的间距
autoplay 实现自动滚动

当前大图currentIndex只有一个值，让其等于所有item的index，当滚动到哪一个，就恰好可以选中哪一个

image.png

动态曾删类名

由于微信小程序开发不同于以往的普通web开发, 因此无法通过js获取wxml文件的dom结构, 因此从js上直接添加一个类名应该不可能了. 可是我们可以通过微信小程序数据绑定以及view标签的”data-“自定义属性去更改标签类名.

过数据绑定在3个标签上绑定相同的变量num, 当点击不同标签时, 在js逻辑层中通过event.target.dataset.n或者（e.target.dataset.n）来获取标签data-n值, 然后在wxml中通过三元运算符的匹配便可完成class名的增改

下面直接看代码：

wxml:

 
 


 


 
 






  气候
  温度
  天气

wxss:

/**index.wxss**/
/* carousel/index.wxss */
page{
 background: #dac8c8f7;
}
.imageContainer{
 width: 100%;
 height: 500rpx;
 background: #fff;
}
.item{
 height: 500rpx;
}
.itemImg{
 position: absolute;
 width: 96%;
 left: 50%;
 transform: translateX(-50%);
 height: 380rpx;
 border-radius: 15rpx;
 z-index: 5;
 opacity: 0.7;
 top: 13%;
}
.active{
 opacity: 1;
 z-index: 10;
 height: 430rpx;
 top: 7%;
 transition:all .2s ease-in 0s;
}


.li{
  display: flex;
  justify-content: space-around;
}
.cur{
  color: red;
  text-decoration:underline;
}

JS:

Page({

  data: {
    currentIndex: 0,
    num:1
  },

  onLoad: function (options) {

  },
  /* 这里实现控制中间凸显图片的样式 */
  handleChange: function (e) {
    this.setData({
//获取当前轮播显示的大图
      currentIndex: e.detail.current
    })
  },
  // 思路：先给每个元素加一个新属性，点谁就把谁的新属性赋值给data中的数据
  click:function(e){
    console.log(e.target.dataset.n)
    this.setData({
      num:e.target.dataset.n
    })
  }
})