【微信小程序】使用vant组件库(count-down)实现倒计时

本次实现使用的是微信开发工具。

引入vant组件库

1. 初始化package.json

   npm init -y
   

2. 利用npm安装vant组件库

   npm i @vant/weapp -S --production
   

3. 删除微信样式
   删除app.json中的”style”:”v2”，以防两种样式冲突。
4. 修改project.config.json
   找到setting属性，修改成

   "packNpmManually":true,
   "packNpmRelationList":[
   	{
   		"packageJsonPath":"./package.json",
   		"miniprogramNpmDistDir":"./"
   	}
   ]
   

5. 构建npm
   点击工具，选择构建npm，生成miniprogram_npm文件夹。
6. 引入
   在app.json中写入，

   "usingComponents":{
   "van-count-down":"@vant/weapp/van-count-down/index"
   }
   

7. 使用

   <van-count-down></van-count-down>
   

count-down组件用法

1. 参考CountDown倒计时官方文档
2. 本次使用属性有time、use-slot，使用的事件有change。
   2.1 time为倒计时的总时长，按照项目需要获取到总时长并赋值给time，单位是毫秒。
   2.2 use-slot需要结合事件change，通过bind:change获取timeData对象，自行书写页面想要展示的倒计时内容，并调整倒计时样式。

代码实现

wxml文件

<navBar
  titleName="countdown组件实现倒计时"  
  showLeftArrow="{{false}}"    
/>

<view class="head">
  <image class="img" src="../../image/countdown2.png"></image>   
  <van-count-down use-slot
    time="{{minusRes}}"
    bind:change="onchange"
  >
    <text class="item">{{timeData.minutes}}</text>
    <text class="item">:</text>
    <text class="item">{{timeData.seconds}}</text>
  </van-count-down>   
</view>  

js文件

Page({  
  data: {        
    minusRes:,     //按照项目需求自行计算
    timeData:{}             
  }, 
  onchange(e){
    this.setData({
      timeData:e.detail
    })    
  }
})

wxss文件

.middle{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20rpx;
  background-color: rgb(246,246,246);
  border-radius: 30rpx;  
  height: 180px;
}
.img{
  width: 140rpx;
  height: 80px;
  animation: rote 2s infinite;
  display: block;
  margin-bottom: 20px;
}  
.item{
  color: #000000;
  font-size: 60rpx;
  font-weight: 700;
}

/* 定义动画，使其旋转 */
@keyframes rote {
  form {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

效果图（添加动画效果）

count-down组件实现倒计时