用es6语法方式写了个微信小程序小插件–数字滚动;
效果图:
wxml页面布局代码:
<!--pages/main/index.wxml--><view class="animate-number"> |
<view class="num num1">{
{num1}}{
{num1Complete}}</view> |
<view class="num num2">{
{num2}}{
{num2Complete}}</view> |
<view class="num num3">{
{num3}}{
{num3Complete}}</view> |
<view class="btn-box"> |
<button bindtap="animate" type="primary" class="button">click me</button> |
</view></view> |
|
index.js调用NumberAnimate.js
// pages/main/index.jsimport NumberAnimate from "../../utils/NumberAnimate";Page({
|
data:{
|
|
}, |
onLoad:function(options){
|
// 页面初始化 options为页面跳转所带来的参数 |
|
}, |
onReady:function(){
|
|