路由配置页面
/***************** 英雄榜 ************************/ //英雄榜模板 .state('heroTopList', { url: '/heroTopList', abstract:true, templateUrl: 'templates/heroTopIndex.html', //进入页面触发的方法 onEnter: function () { }, //离开页面触发的方法 onExit: function () { }, controller: ["$scope", "$state", function ($scope, $state) { $scope.tabChange = function(myevent){ var currentObj = $(myevent.target); currentObj.closest(".yingxiongbang").find("a.button").removeClass("active"); currentObj.addClass("active"); }; }] }) //top10店铺 .state('heroTopList.topShop', { url: '/heroTopList/topShop', templateUrl: 'templates/heroTopIndex_topShop.html', //进入页面触发的方法 onEnter: function () { }, //离开页面触发的方法 onExit: function () { }, controller: ["$scope", "$state", function ($scope, $state) { }] }) //top10超级会员 .state('heroTopList.topSuperMember', { url: '/heroTopList/topSuperMember', templateUrl: 'templates/heroTopIndex_topSuperMember.html', //进入页面触发的方法 onEnter: function () { }, //离开页面触发的方法 onExit: function () { }, controller: ["$scope", "$state", function ($scope, $state) { }] }) //top10 会员 .state('heroTopList.topMember', { url: '/heroTopList/topMember', templateUrl: 'templates/heroTopIndex_topMember.html', //进入页面触发的方法 onEnter: function () { }, //离开页面触发的方法 onExit: function () { }, controller: ["$scope", "$state", function ($scope, $state) { }] })
heroTopIndex.html 模板页面内容
<ion-header-bar align-title="center"> <div class="buttons"> <a class="button button-clear" ui-sref="index"> <span class="icon ion-ios-arrow-left"></span> </a> </div> <h1 class="title"> 英雄榜 </h1> </ion-header-bar> <style> .yingxiongbang a.active{ background-color: #000; color: #fff; } </style> <ion-content class=""> <div class="button-bar yingxiongbang"> <a class="button bg_e3e2e2 active" ui-sref="heroTopList.topShop" ng-click="tabChange($event)">前十店铺</a> <a class="button bg_e3e2e2" ui-sref="heroTopList.topMember" ng-click="tabChange($event)">前十会员</a> <a class="button bg_e3e2e2" ui-sref="heroTopList.topSuperMember" ng-click="tabChange($event)">前十超级会员</a> </div> <div ui-view></div> </ion-content>
heroTopIndex_topMember.html 页面内容
<style> .list .item.item-avatar{ min-height: 70px; padding-top:14px; padding-bottom: 14px; } </style> <div class="list"> <div class="item item-avatar"> <img src="public/image/touxiang.png"> <div class="line_height_35px font_16"> <div class="float_left">一路飞行</div> <div class="float_right">¥222222.22</div> <div class="clear_both"></div> </div> </div> <div class="item item-avatar"> <img src="public/image/touxiang.png"> <div class="line_height_35px font_16"> <div class="float_left">一路飞行</div> <div class="float_right">¥222222.22</div> <div class="clear_both"></div> </div> </div> </div>