uni-app项目数字滚动

深碍√TFBOYSˉ_ 2022-03-07 15:42 565阅读 0赞

# uni-app项目数字滚动 #

[github地址，喜欢的可以star下哦][github_star]

### 插件预览图 ###

![图片描述][420727979-5c6ce91d7383f_articlex]

#### 使用教程 ####

1.插件代码拷贝

*  下载后把components目录下countUp.vue文件拷贝到自己项目目录下

2.插件全局配置

*  在项目里main.js中配置如下代码

import countUp from './components/countUp.vue'
    
    Vue.component('countup',countUp)

3.插件使用

*  vue页面使用

<template>
        <view>
            <countup :num="num" color="#ff9e50" width='13' height='23' fontSize='23'></countup>
            <button @tap="add">Add</button>
            <button @tap="reduce">Reduce</button>
        </view>
    </template>
    
    <script>
    export default {
        data() {
            return {
                num:123.453
            };
        },
        onLoad() {},
        methods: {
            add() {
                this.num=++this.num;
            },
            reduce(){
                this.num=--this.num;
            }
        }
    };
    </script>

##### 兼容性 #####

uni-app项目中使用都兼容

[github_star]: https://github.com/xiaowang1314/uniapp-plugin-collections/blob/master/markdowns/countUp.md
[420727979-5c6ce91d7383f_articlex]: /images/20220307/3b7c8ca50d5640e49f20a0690e613f3a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，565人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp横向滚动

<template> <view> <scroll-view scroll-x="true" calss="scroll_view">

落日映苍穹つ/ 2023年01月11日 09:12/ 0 赞/ 314 阅读

相关 uniapp操作界面滚动

<scroll-view scroll-y="true" :style="{ 'height': getWindowHeight + 'px' }" ></scroll

偏执的太偏执、/ 2022年12月26日 08:21/ 0 赞/ 123 阅读

相关 uniapp滚动分页

<template> <view> <view v-for="(item,index) in list" :key="index"></view>

傷城~/ 2022年12月23日 12:28/ 0 赞/ 248 阅读

相关 uniapp滚动选择器 picker

从底部弹起的滚动选择器 picker > 支持五种选择器, 通过mode来区分, 分别是普通选择器(selector), 多列选择器(multiSelector), 时间

小鱼儿/ 2022年11月27日 02:00/ 0 赞/ 773 阅读

相关 uni-app项目数字滚动

uni-app项目数字滚动 [github地址，喜欢的可以star下哦][github_star] 插件预览图 ![图片描述][420727979-5c6ce91

深碍√TFBOYSˉ_/ 2022年03月07日 15:42/ 0 赞/ 566 阅读

相关 WPF数字滚动效果

和WPF数字滚动抽奖有区别，WPF数字滚动抽奖是随机的，而这里是确定的。为了系统演示，这个效果通宵加班写了整整6个小时，中间就上了次厕所。代码： Rolling

分手后的思念是犯贱/ 2022年01月05日 04:05/ 0 赞/ 397 阅读

相关 uniapp实现自定义滚动条。

uniapp实现自定义滚动条。笔记重点：需要给每个text绑定一个id,但是id不能是数字开头，所以在前面加一个s或者其他字母。然后scroll-into-view定位到

曾经终败给现在/ 2021年07月26日 01:23/ 0 赞/ 1257 阅读

相关 uniapp如何设置横向滚动，而且没有滚动条

> 设置横向滚动 overflow-x: auto; display: -webkit-box; overflow-y: hidden; > 隐藏横

今天药忘吃喽~/ 2021年07月24日 23:14/ 0 赞/ 1591 阅读

相关 uniapp 滚动条组件

<scroll-view scroll-y 开启竖直滚动,默认为false scroll-x 开启水平滚动,默认为false

梦里梦外;/ 2021年07月24日 16:16/ 0 赞/ 1209 阅读

相关 js 数字滚动动画

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

刺骨的言语ヽ痛彻心扉/ 2021年06月24日 13:59/ 0 赞/ 467 阅读