微信小程序 底部导航和广告轮播图3D实现

底部导航   在app.json中

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath":"",
        "text": "首页"
      },
      {
        "pagePath": "pages/fang/fang",
        "iconPath":"",
        "text": "房源"
      }
    ]
  }

　　

3D轮播图

html

<swiper class="imageContainer" bindchange="handleChange" previous-margin="50rpx" next-margin="50rpx" circular autoplay indicator-dots="true" interval="100">
 <block wx:for="{{3}}" wx:key="{{index}}">
 <swiper-item class="item">
 <image class="itemImg {{currentIndex == index ? 'active': ''}}" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606133106358&di=b3f5b74638cc4c64b55c4daa63ea7cbf&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F55%2F22%2F20300000929429130630222900050.jpg"></image>
 </swiper-item>
 </block>
</swiper>

js

Page({

  data: {
  currentIndex: 0
  },

  onLoad: function (options) {

  },
  /* 这里实现控制中间凸显图片的样式 */
  handleChange: function(e) {
  this.setData({
  currentIndex: e.detail.current
  })
  },
 })

css

/* pages/fang/fang.wxss */
page{
  background: #f7f7f7f7;
 }
 .imageContainer{
  width: 100%;
  height: 500rpx;
  background: pink;
 }
 .item{
  height: 500rpx;
 }
 .itemImg{
  position: absolute;
  width: 100%;
  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;
 }