count-down组件实现倒计时
本次实现使用的是微信开发工具。
引入vant组件库
- 初始化package.json
npm init -y
- 利用npm安装vant组件库
npm i @vant/weapp -S --production
- 删除微信样式
删除app.json中的”style”:”v2”,以防两种样式冲突。 - 修改project.config.json
找到setting属性,修改成"packNpmManually":true, "packNpmRelationList":[ { "packageJsonPath":"./package.json", "miniprogramNpmDistDir":"./" } ]
- 构建npm
点击工具,选择构建npm,生成miniprogram_npm文件夹。 - 引入
在app.json中写入,"usingComponents":{ "van-count-down":"@vant/weapp/van-count-down/index" }
- 使用
<van-count-down></van-count-down>
count-down组件用法
- 参考CountDown倒计时官方文档
- 本次使用属性有time、use-slot,使用的事件有change。
2.1 time为倒计时的总时长,按照项目需要获取到总时长并赋值给time,单位是毫秒。
2.2 use-slot需要结合事件change,通过bind:change获取timeData对象,自行书写页面想要展示的倒计时内容,并调整倒计时样式。
代码实现
wxml文件
<navBar
titleName