组件详情
自定义扫描进度动画组件

自定义扫描进度动画组件

上传者:李泽辰    上传时间:2018-08-20 17:57:17

  55

统计UI 进度条

下载   喜欢

自定义扫描进度动画组件 介绍

WxSacnProgressBar

用于微信小程序的一个圆形进度组件,支持自定义循环播放图标。

效果图

image image

如何使用

整个项目可以直接作为小程序项目导入到微信开发者工具中运行,biliang目录为组件库目录。

  1. 把clone下来中的项目中的 biliang 目录,拷贝到 小程序项目的根目录
  2. 在你的页面级别中(pages/xxx),导入使用,具体如下:
    1)在wxss中导入样式

    @import "../../biliang/scan/scanbar.wxss";

    2)在wxml中导入模板,并指定template,is和data请都不要修改,组件会自动调用

    <import src="../../biliang/scan/scanbar.wxml"/>
    <view class="container">
        <template is="scanbar" data="{{...scanbar}}"/>
    </view>
    

    3)在页面js中导入

    var ScanBar = require("../../biliang/scan/scanbar.js")
    

    4)在页面js中,调用ScanBar中提供的方法,即可实现效果

    onLoad: function () {
        //1、创建对象
        this.scanBar = new ScanBar();
        //2、传入需要展示的图标
        this.scanBar.init(['../../images/icon_toutiao.svg', '../../images/icon_weibo.svg', '../../images/icon_sohu.svg']);
    },
    onShow: function () {
        //3、开始扫描
        this.scanBar.startScan();
        //4、设置进度
        this.scanBar.setProgress(progress);
    },
    onHide: function () {
        //5、调用该方法可停止扫描,进度达到100%之后,请手动调用,页面关闭时也请手动调用
        this.scanBar.stopScan(true);
    }
    
精品推荐
最新发布

联系我们

电话:400 866 0210 (工作日 9:00 ~ 18:00)

QQ群:385046190

客服:service@pgyer.com

商务:bd@pgyer.com

版权所有 © 西安点测网络科技有限公司 2014 - 2017 陕ICP备15010407号-4