做一个小程序轮播图组件

学习目标：

这里说的轮播图不是小程序提供的swiper，是自己利用js和css设计一个轮播图，把他协调小程序的组件属性

例如：

• 首先在根目录下建立一个Components文件夹里面建一个lbt文件夹里面新建Component

---

重要知识点：

提示：这里可以利用微信官方文档里面的指南里面

自定义组件：

1. 组件样式
2. 组件生命周期
3. 调试自定义组件
4. https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/debug.html

---

重要字段：

/* 组件 custom-component.js */
Component({
  options: {
    addGlobalClass: true,
  }
})

组件样式进入当前页面

/* 组件 custom-component.js */
lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },

生命周期方法可以直接定义在 Component 构造器的第一级参数中，通过 attached: function() 把函数运行当前页面

---

重要代码块：

提示：这是轮播图组件的js文档

// Components/lbt/lbt.js
let timer=null;
Component({

  options: {
    addGlobalClass: true,
  },
 /**
   * 组件的属性列表
   */
  properties: {
    swiperList:Array,

  },
  
  lifetimes: {
    attached: function() {
      this.towerSwiper('swiperList');
      console.log("sarang")
      // 在组件实例进入页面节点树时执行
    },
    //detached: function() {
      // 在组件实例被从页面节点树移除时执行
   // },
  },
 

  data: {
    cardCur: 0,
    autoPlay: true, //是否自动滚动
    direction:'lefr',//默认滑动方向
    interval:3000,  //3秒
    currData:{},
      cardCur: 0,
      //swiperList: []
    },
    methods: {
      
      DotStyle(e) {
        this.setData({
          DotStyle: e.detail.value
        })
      },
      // cardSwiper
      cardSwiper(e) {
        this.setData({
          cardCur: e.detail.current
        })
      },
      // towerSwiper
      // 初始化towerSwiper
      towerSwiper(name) {
        let list = this.data[name];
        console.log('dddd',list)
        for (let i = 0; i < list.length; i++) {
          list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
          list[i].mLeft = i - parseInt(list.length / 2)
        }
        this.setData({
          swiperList: list,
          currData:list.find(i => i.zIndex == Math.max.apply(Math,list.map(i=>i.zIndex)))
        },()=>{
          this.handleSwiperauto()
        });
      },
      // towerSwiper触摸开始
      towerStart(e) {
        this.setData({
          towerStart: e.touches[0].pageX
        })
      },
      // towerSwiper计算方向
      towerMove(e) {
        this.setData({
          direction: e.touches[0].pageX - this.data.towerStart > 0 ? 'right' : 'left'
        })
      },
      // towerSwiper计算滚动
      towerEnd(e) {
        let direction = this.data.direction;
        let list = this.data.swiperList;
        let currData = list.find(i => i.zIndex == Math.max.apply(Math,list.map(i=>i.zIndex)))
        if (direction == 'right') {
          let mLeft = list[0].mLeft;
          let zIndex = list[0].zIndex;
          for (let i = 1; i < list.length; i++) {
            list[i - 1].mLeft = list[i].mLeft
            list[i - 1].zIndex = list[i].zIndex
          }
          list[list.length - 1].mLeft = mLeft;
          list[list.length - 1].zIndex = zIndex;
          currData = list.find(i => i.zIndex == Math.max.apply(Math,list.map(i=>i.zIndex)))
          //this.setData({
           // swiperList: list
         // })
        } else {
          let mLeft = list[list.length - 1].mLeft;
          let zIndex = list[list.length - 1].zIndex;
          for (let i = list.length - 1; i > 0; i--) {
            list[i].mLeft = list[i - 1].mLeft
            list[i].zIndex = list[i - 1].zIndex
          }
          list[0].mLeft = mLeft;
          list[0].zIndex = zIndex;
          currData = list.find(i => i.zIndex == Math.max.apply(Math,list.map(i=>i.zIndex)))
          //this.setData({
          //  swiperList: list
         // })
        }
        this.setData({
           swiperList: list,
           currData,
          });
          if(!e) return;
          this.handleSwiperauto()
    
      },
      //自动轮播图
      handleSwiperauto(){
        if(!this.data.autoPlay)return;
        this.destoryTimer();
        timer=setInterval(()=>{
          this.towerEnd();
        },this.data.interval);
      },
      //监听页面卸载
      onUnload(){
        this.destoryTimer()
      },
      onHide(){
        this.destoryTimer()
      },
      destoryTimer(){
    //卸载定时器
     timer && clearInterval(timer);
     timer = null;
      }
   
  }
})

提示：这是轮播图组件的wxml文档

<!--Components/lbt/lbt.wxml-->
<view class="tower-swiper" bindtouchmove="towerMove" bindtouchstart="towerStart" bindtouchend="towerEnd">
  <view class="tower-item {{item.zIndex==1?'none':''}}" wx:for="{{swiperList}}" wx:key style="--index:{{item.zIndex}};--left:{{item.mLeft}}">
    <view class="swiper-item">
      <image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
      <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video>
    </view>
  </view>
</view>

提示：这是轮播图组件的wxss文档

/* Components/lbt/lbt.wxss */
.tower-swiper .tower-item {
  transform: scale(calc(0.5 + var(--index) / 10));
  margin-left: calc(var(--left) * 100rpx - 150rpx);
  z-index: var(--index);
}

提示：在调用的页面json文档里面编写调用代码

{
  "usingComponents": {
    "izdax":"../../Components/izdax/izdax",
    "lbt":"../../Components/lbt/lbt"
  }
}

提示：在调用的页面jwxml文档里面编写调用代码

<lbt swiperList="{{swiperList}}"></lbt>

提示：在调用的页面js文档里面编写调用代码

data: {
    swiperList: [{
      id: 0,
      type: 'image',
      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
    }],

也可以数据库列表里面的数据绑定。
例如：