1.准备工作

1.参考文件

以下链接中有一个jquery.js文件，请参考index.html的。

2.创建新文件

创建一个新的js文件并编写指令。这也是我第一次写指令，可扩展，方便。当一些效果在项目中被重用时，冗余代码可以通过指令来减少。

第二，代码编写

/** *由谢晗于2017年12月8日创建。* 柱状图动态加载指令*/angular.module('studyApp。指令')。指令(“progressPer”)，函数($compile，$ time out){返回{ restrict : ' AE '，作用域： { progress data : '=' }，模板： ' div class=' progress-main ' ng-repeat=' progress data '中的项“”div class=“进度-数据”“”span { { item。name } }/span ' ' div class='技能栏清除修复'数据-百分比={ { item。width } } ' ' div class=' skill bar-bar '/div $ new())；$timeout(function() { jQuery(').技能栏').每个（函数(){ jQuery(this)).查找('。长条锅。制作动画({ width:jQuery(this)).attr('数据百分比')},1000);});});} } });/** *由谢晗于2017年11月29日创建。*控制器文件*/棱角分明。模块('研究应用程序。控制器' .控制器(' ProgressCtrl '，函数($scope，$rootScope，$ionicHistory，$timeout，$location) { $scope.title='进度条效果；$ scope。go back=function(){ $ ion chistory。go back()；};var dataInfo=[ { NAME: '测试1 '，NUM:30，RATE:30 }，{ NAME: '测试2 '，NUM:25，RATE:25 }，{ NAME: '测试3 '，NUM:45，费率：45 }]；handleTabData(DataInfo)；函数handleTabData(数据){ var width data=[]；for(var I=0；idata.lengthI){ width数据。推送({ width : data[I]).RATE"% "，//进度条百分比名称：data[i].名称，//标题sum:data[i].NUM，//数量百分比：data[i].RATE " % " })；//百分比} $ scope。handledatainfo=宽度数据；//不使用指令加上下面的代码//$timeout(函数(){ //jQuery(').技能栏').每个（函数(){ //jQuery(this)).查找('。长条锅。制作动画({ //width:jQuery(this)).attr('数据百分比'//},1000);//});//});} });离子项目不使用指令/ion-item div class=' progress-main ' ng-repeat=' handleDataInfo ' div class=' progress-data ' span { { item }。name } }/span div class='技能栏清除修复'数据-百分比={ { item。width } } div class='技能栏-条'/div class='技能栏-百分比' { item。sum } }/div/div/div p class='进度率' { item。百分比} }/p/div-item使用指令/ion-item progress-per progress-data=' handleDataInfo '/progress-per/* * * * * * * * * * *进度条样式CSS * * * * * * * * */.滑板{位置：相对；显示器：块；边距-底部： 15px宽度： 100%;背景技术# eee/**背景颜色* */高度： 35px边界半径： 3px-moz-border-radius : 3px；-网络套件-边框-半径： 3px-网络套件-transit : 0.4s线性；-moz-transit : 0.4s线性；-ms-transit : 0.4s线性；-o-transit : 0.4s线性；transition: 0.4s线性；-网络套件-过渡-属性：宽度，背景色；-moz-transition-property:宽度，背景色；-ms-transition-property:宽度，背景色；-o-跃迁-性质：宽度，背景色；过渡属性：宽度，背景色；}.技能栏-栏{身高： 35px宽度： 0px背景： # 50 D2 C2；边界半径： 3px-moz-border-radius : 3px；-网络套件-边框-半径： 3px}.技能栏百分比{位置：绝对值；right : 10 xtop : 0；font-size : 11px高度： 35px线高： 35pxcolor : # ffffcolor : rgba(0，0，0，0.4)；}.progress-main { display : flex；display :-web套件-flex；align-items:居中；-web套件-align-items :中心；正义-内容：中心；-网络套件-狡辩-content:中心；页边距-top : 10px；}.进度-数据{左边距-:5%；宽度： 100%;向左浮动：}.进度{右侧浮动：宽度： 20%;线高： 35px保证金-左侧： 5%;页边距-top : 10px；}三效果图

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。