小程序倒计时轮播图、导航切换轮播

最近项目需要实现轮播图有倒计时圆点然后自动切换图片加导航点击切换轮播内容的需求，项目结束，在这里总结一下

先上效果图，让各位兄弟看看是不是也符合各自需要的那种需求，相互学习

我是把这写在一个组件里面的，页面直接引用就可以了

话不多说，直接看代码

wxml代码文件

<view class="warp">
  <!-- 不可滑动页 -->
  <view class="content">
    <view wx:if="{{navState==0}}" class="style-default">
      <!-- banner -->
      <swiper bindchange="monitorCurrent" 
              indicator-dots="{{indicatorDots}}"
              autoplay="{{autoplay}}" 
              interval="{{interval}}" 
              duration="{{duration}}"
              indicator-dots="{{false}}"
              indicator-color="#fff"
              indicator-active-color="#FF9906">
      <block wx:for="{{banners[0].list}}" wx:key="index" wx:for-item="item">
        <swiper-item>
          <image src="{{item}}" mode="widthFill" data-goodsid="{{item.id}}" catchtap="show"/>
        </swiper-item>
      </block>
    </swiper>
    <!-- 自定义轮播图进度点 -->
    <view class="dots">
      <block wx:for="{{banners[0].list}}" wx:for-index="index" wx:key="*this">
        <view class="{{current == index?'active':''}}"></view>
      </block>
    </view>
    </view>
    <view wx:elif="{{navState==1}}" class="style-default">
      <!-- banner -->
      <swiper bindchange="monitorCurrent" 
              indicator-dots="{{indicatorDots}}" 
              autoplay="{{autoplay}}" 
              interval="{{interval}}" 
              duration="{{duration}}"
              indicator-dots="{{false}}"
              indicator-color="#fff"
              indicator-active-color="#FF9906">
        <block wx:for="{{banners[1].list}}" wx:key="index" wx:for-item="item">
          <swiper-item>
            <image src="{{item}}" mode="widthFit" data-goodsid="{{item.id}}" catchtap="show"/>
          </swiper-item>
        </block>
      </swiper> 
      <!-- 自定义轮播图进度点 -->
      <view class="dots">
        <block wx:for="{{banners[1].list}}" wx:for-index="index" wx:key="*this">
          <view class="{{current == index?'active':''}}"></view>
        </block>
      </view>
    </view>
    <view wx:elif="{{navState==2}}" class="style-default">
      <!-- banner -->
      <swiper bindchange="monitorCurrent" 
              indicator-dots="{{indicatorDots}}" 
              autoplay="{{autoplay}}" 
              interval="{{interval}}" 
              duration="{{duration}}"
              indicator-dots="{{false}}"
              indicator-color="#fff"
              indicator-active-color="#FF9906">
        <block wx:for="{{banners[2].list}}" wx:key="index" wx:for-item="item">
          <swiper-item>
            <image src="{{item}}" mode="widthFit" data-goodsid="{{item.id}}" catchtap="show"/>
          </swiper-item>
        </block>
      </swiper> 
      <!-- 自定义轮播图进度点 -->
      <view class="dots">
        <block wx:for="{{banners[2].list}}" wx:for-index="index" wx:key="*this">
          <view class="{{current == index?'active':''}}"></view>
        </block>
      </view>
    </view>
    <view wx:else="{{navState==3}}" class="style-default">
      <!-- banner -->
      <swiper bindchange="monitorCurrent" 
              indicator-dots="{{indicatorDots}}" 
              autoplay="{{autoplay}}" 
              interval="{{interval}}" 
              duration="{{duration}}"
              indicator-dots="{{false}}"
              indicator-color="#fff"
              indicator-active-color="#FF9906">
        <block wx:for="{{banners[3].list}}" wx:key="index" wx:for-item="item">
          <swiper-item>
            <image src="{{item}}" mode="widthFit" data-goodsid="{{item.id}}" catchtap="show"/>
          </swiper-item>
        </block>
      </swiper> 
    </view>
  </view>
  <!-- 导航条 -->
  <view class="nav">
    <view bindtap="navSwitch" data-index="0" class="nav_list list_gb1 {{navState==0 ? 'nav-switch-style':''}}">
        <view>奥运</view>
        <!-- 自定义轮播图进度点 -->
        <view class="dots-parent {{navState==0 ? 'header_view_hide':'header_view_show'}}">
          <block wx:for="{{banners}}" wx:for-index="index" wx:key="*this">
            <view class="progress-line-bg">
              <view class="{{current==index?'progress-line':''}}" style="width:{{progressNum}}%;"></view>
            </view>
          </block>
        </view>
    </view>

    <view bindtap="navSwitch" data-index="1" class="nav_list list_gb2 {{navState==1 ? 'nav-switch-style':''}}">
        <view>篮球</view>
        <!-- 自定义轮播图进度点 -->
        <view class="dots-parent {{navState==1 ? 'header_view_hide':'header_view_show'}}">
          <block wx:for="{{banners}}" wx:for-index="index" wx:key="*this">
            <view class="progress-line-bg">
              <view class="{{current==index?'progress-line':''}}" style="width:{{progressNum}}%;"></view>
            </view>
          </block>
        </view>
    </view>
    <view bindtap="navSwitch" data-index="2" class="nav_list list_gb3 {{navState==2 ? 'nav-switch-style':''}}">
        <view>足球</view>
        <!-- 自定义轮播图进度点 -->
        <view class="dots-parent {{navState==2 ? 'header_view_hide':'header_view_show'}}">
          <block wx:for="{{banners}}" wx:for-index="index" wx:key="*this">
            <view class="progress-line-bg">
              <view class="{{current==index?'progress-line':''}}" style="width:{{progressNum}}%;"></view>
            </view>
          </block>
        </view>
    </view>
    <view bindtap="navSwitch" data-index="3" class="nav_list list_gb4 {{navState==3 ? 'nav-switch-style':''}}">
        <view>排球</view>
        <!-- 自定义轮播图进度点 -->
        <view class="dots-parent {{navState==3 ? 'header_view_hide':'header_view_show'}}">
          <block wx:for="{{banners}}" wx:for-index="index" wx:key="*this">
            <view class="progress-line-bg">
              <view class="{{current==index?'progress-line':''}}" style="width:{{progressNum}}%;"></view>
            </view>
          </block>
        </view>
    </view>
  </view>
</view>

wxss代码文件：

.warp{
  width: 100%;
  height: 320rpx;
  display: flex;
  position: absolute;
  top: 10rpx;
}
.content {
  padding-left: 30rpx;
  padding-right: 20rpx;
  width: 80%;
}
.style-default{
    width: 100%;
    height: 100%;
    background-color: #eee;
    border-radius: 6rpx;
}
/* 直接设置swiper属性 */
swiper {
  height: 100%;
  border-radius: 6rpx;
}
swiper-item image {
  width: 100%;
  height: 100%;
  border-radius: 6rpx;
}
.nav{
  width: 120rpx; 
  height: 320rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-left: 10rpx;
  padding-right: 30rpx;
}
.nav_list{
  width: 120rpx;
  height: 72rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #333;
  border-radius: 6rpx;
  position: relative;
  text-align: center;
  line-height: 72rpx;
}

/* 按钮背景图 */
.list_gb1{
  background-image: url("http://www.mutuan.org/mobile/image/tgiocn1.png") ;
  background-size: 100% 100%;
}
.list_gb2{
  background-image: url("http://www.mutuan.org/mobile/image/tjicon1.png");
  background-size: 100% 100%;
}
.list_gb3{
  background-image: url("http://www.mutuan.org/mobile/image/bkicon1.png");
  background-size: 100% 100%;
}
.list_gb4{
  background-image: url("http://www.mutuan.org/mobile/image/dzicon1.png");
  background-size: 100% 100%;
}
.nav-switch-style{
 color: #FF6F00;
}
.dots-parent {
  width: 100%;
  position: absolute;
  bottom: 10rpx
}
.dots-parent .progress-line-bg {
  width: 80%;
  height: 3rpx;
  border-radius: 3rpx;
  background-color: rgba(255, 255, 255, 0.1);
  margin-left: 12rpx;
  position: absolute;
  
}
.progress-line {
  background-color: red;
  height: 3rpx;
  border-radius: 3rpx;
}
.header_view_hide{display: block;}
.header_view_show{display: none;}

/*指示点位置*/
.wx-swiper-dots{
  position:relative;
  left: unset!important;
  right: -40rpx;
}


/* 自定义圆点 */
.dots {
  position: absolute;
  bottom: 20rpx;
  right: 23%;
  transform: translate(-20%, -20%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.dots view {
  width: 10rpx;
  height: 10rpx;
  margin: 0 3rpx;
  border-radius: 10rpx;
  background-color: #fff;
}
.dots .active {
  width: 18rpx;
  background-color: #FF6F00;
}

js代码文件：

// component/swiper/Swiper.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    banners:{
      type:Array
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    navState: 0,//导航状态
    indicatorDots: true, //是否显示面板指示点
    autoplay: false, //是否自动切换
    current: 0,     // 轮播图当前的下标
    interval: 3000, //自动切换时间间隔,3s
    duration: 200, //  滑动动画时长1s
    progressNumInterval: null,  //轮播图进度条的计时器
    progressNum: 0, //轮播图进度条的进度
    // banners: [],    //轮播图数据
  },

  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      //开启轮播图
      this.setData({
        autoplay: true
      })
      // 初次执行顶部轮播图的进度条的进度点
      this.progressLineInterval();
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
      //关闭轮播图
      this.setData({
        autoplay: false
      })
      // 清理进度条的计时器
      clearInterval(this.data.progressNumInterval)
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //点击导航
    navSwitch: function (e) {
      let index = e.currentTarget.dataset.index;
      // 清理小圆点的计时器
      this.progressLineInterval();
      this.setData({
        current: 0,
        navState: index,
      })
    },
    //监听轮播图的下标
    monitorCurrent: function (e) {
      //console.log(e.detail.current)
      let current = e.detail.current;
      this.setData({
        current: current
      })
      // 二次执行顶部轮播图的小圆点的进度点
      this.progressLineInterval();
    },

    //封装轮播图进度条计时器的方法
    progressLineInterval: function () {
      // 清理小圆点的计时器
      clearInterval(this.data.progressNumInterval)
      // 清理小圆点的进度
      this.setData({
        progressNum: 0,
      })
      /**
       * 轮播图的切换时间为5秒，进度条的进度为1-100%，
       * 因为5000/100=50毫秒，所以每50毫秒就要执行1个进度点
       * 另外需要把计时器寄存在data{}对象上，否则会清理不掉上一个计时器
       * */
      this.data.progressNumInterval = setInterval(() => {
        let progressNum = this.data.progressNum;
        // console.log(progressNum)
        if (progressNum < 100) {
          progressNum++;
        } else {
          progressNum = 0;
          // 清理进度条的计时器
          clearInterval(this.data.progressNumInterval)
        }
        // console.log(progressNum)
        this.setData({
          progressNum: progressNum
        })
      }, 30)
    },
  }
})

大家有什么问题可以评论交流，互相学习