找回密码
 立即注册

QQ登录

只需一步,快速开始

[工具插件] 微信小程序自定义扫描进度动画组件

[复制链接]
查看: 384|回复: 152
最佳答案
0 

4

主题

4

帖子

94

积分

新人求带

积分
94
 楼主| 发表于 2017-11-13 14:59:33 | 显示全部楼层 |阅读模式
用于微信小程序的一个圆形进度组件,支持自定义循环播放图标。

效果图
ScanBar.png

如何使用

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

把clone下来中的项目中的 biliang 目录,拷贝到 小程序项目的根目录

在你的页面级别中(pages/xxx),导入使用,具体如下:
1)在wxss中导入样式
  1. @import "../../biliang/scan/scanbar.wxss";
复制代码

2)在wxml中导入模板,并指定template,is和data请都不要修改,组件会自动调用
  1. <import src="../../biliang/scan/scanbar.wxml"/>
  2. <view class="container">
  3.         <template is="scanbar" data="{{...scanbar}}"/>
  4. </view>
复制代码

3)在页面js中导入
  1. var ScanBar = require("../../biliang/scan/scanbar.js")
复制代码

4)在页面js中,调用ScanBar中提供的方法,即可实现效果
  1. onLoad: function () {
  2.         //1、创建对象
  3.         this.scanBar = new ScanBar();
  4.         //2、传入需要展示的图标
  5.         this.scanBar.init(['../../images/icon_toutiao.svg', '../../images/icon_weibo.svg', '../../images/icon_sohu.svg']);
  6. },
  7. onShow: function () {
  8.         //3、开始扫描
  9.         this.scanBar.startScan();
  10.         //4、设置进度
  11.         this.scanBar.setProgress(progress);
  12. },
  13. onHide: function () {
  14.         //5、调用该方法可停止扫描,进度达到100%之后,请手动调用,页面关闭时也请手动调用
  15.         this.scanBar.stopScan(true);
  16. }
复制代码

游客,如果您要查看本帖隐藏内容请回复
回复

使用道具 举报

最佳答案
0 

0

主题

36

帖子

92

积分

新人求带

积分
92
发表于 2017-11-13 17:01:34 | 显示全部楼层
很棒!!!!!
回复

使用道具 举报

最佳答案
0 

0

主题

14

帖子

104

积分

新人求带

积分
104
发表于 2017-11-13 17:03:04 | 显示全部楼层
交换机快乐可可姐姐
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

31

帖子

49

积分

新人求带

积分
49
发表于 2017-11-13 17:24:49 | 显示全部楼层
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

31

帖子

49

积分

新人求带

积分
49
发表于 2017-11-13 17:25:36 | 显示全部楼层
很棒!!!!!
回复

使用道具 举报

最佳答案
0 

0

主题

31

帖子

49

积分

新人求带

积分
49
发表于 2017-11-13 17:25:43 | 显示全部楼层
很棒!!!!!
回复

使用道具 举报

最佳答案
0 

0

主题

1934

帖子

476

积分

略知一二

积分
476
发表于 2017-11-13 18:12:23 | 显示全部楼层
e'se'r'd't'y'f'yu'gu'y't'fu
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

2736

帖子

825

积分

专家路上

积分
825
发表于 2017-11-13 18:27:54 | 显示全部楼层
etrfyofvytgyyiuioj
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

23

帖子

242

积分

新人求带

积分
242
发表于 2017-11-13 23:23:30 | 显示全部楼层
回复

使用道具 举报

最佳答案
0 

0

主题

1934

帖子

476

积分

略知一二

积分
476
发表于 2017-11-14 11:07:37 | 显示全部楼层
e'd'd'r'r't'r'yi'uhiuhuij
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com