本文主要是介绍onsen ui button-bar的用法尝试，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果图：
html 中的代码：
<div style="width:100%; background:lightgray; padding:10px 0px;"><div class="button-bar" style="margin:0px auto;float: left"><div class="button-bar__item showThis" ng-click="events.sending(1)"><button class="button-bar__button" ng-class="{'button-active':switchStatus==1}">正在发送</button></div><div class="button-bar__item showLast" ng-click="events.alreadySend(2)"><button class="button-bar__button" ng-class="{'button-active':switchStatus==2}">已发送</button></div><div class="button-bar__item showLast" ng-click="events.wailtSend(3)"><button class="button-bar__button" ng-class="{'button-active':switchStatus==3}">待发送</button></div><div class="button-bar__item showLast" ng-click="events.alreadySave(4)"><button class="button-bar__button" ng-class="{'button-active':switchStatus==4}">已保存</button></div><div class="button-bar__item showLast" ng-click="events.failSend(5)"><button class="button-bar__button" ng-class="{'button-active':switchStatus==5}">发送失败</button></div></div></div>在typescript中的代码：
sending(status:number){let $log = this.$log;let $ocLazyLoad = this.$ocLazyLoad;let $window = this.$window;let $scope = this.$scope;$scope.switchStatus = status;$log.debug( $scope.switchStatus+" $scope.switchStatus");};alreadySend(status:number){let $log = this.$log;let $ocLazyLoad = this.$ocLazyLoad;let $window = this.$window;let $scope = this.$scope;$scope.switchStatus = status;$log.debug( $scope.switchStatus+" $scope.switchStatus");};wailtSend(status:number){let $log = this.$log;let $ocLazyLoad = this.$ocLazyLoad;let $window = this.$window;let $scope = this.$scope;$scope.switchStatus = status;$log.debug( $scope.switchStatus+" $scope.switchStatus");}alreadySave(status:number){let $log = this.$log;let $ocLazyLoad = this.$ocLazyLoad;let $window = this.$window;let $scope = this.$scope;$scope.switchStatus = status;$log.debug( $scope.switchStatus+" $scope.switchStatus");} failSend(status:number){let $log = this.$log;let $ocLazyLoad = this.$ocLazyLoad;let $window = this.$window;let $scope = this.$scope;$scope.switchStatus = status;$log.debug( $scope.switchStatus+" $scope.switchStatus");} 这篇关于onsen ui button-bar的用法尝试的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
