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

引入vant组件库

1. 初始化package.json npm init -y
2. 利用npm安装vant组件库 npm i @vant/weapp -S --production
3. 修改project.config.json 找到setting属性，修改成 "packNpmManually":true, "packNpmRelationList":[ { "packageJsonPath":"./package.json", "miniprogramNpmDistDir":"./" } ]
4. 构建npm 点击工具，选择构建npm，生成miniprogram_npm文件夹。
5. 引入 在app.json中写入， "usingComponents":{ "van-count-down":"@vant/weapp/van-count-down/index" }
6. 使用 <van-count-down></van-count-down>

count-down组件用法

1. 参考
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);
  }
}