1、頁面效果圖：

演示地址：http://www.nxl123.cn/bokeyuan/meiTuanDemo_mine/

2、核心代碼

mine.html：

<ons-page id="mine" ng-controller="MineController">
<!--toolbar開始-->
<ons-toolbar>
<div class="left"></div>
<div class="center"></div>
<div class="right" style="padding-top: 18px">
<ons-toolbar-button>
<ons-icon style="color: white;opacity: 0.8"icon="fa-cog"/>
<ons-icon style="color: white;opacity: 0.8"icon="fa-bell"/>
</ons-toolbar-button>
</div>
</ons-toolbar>
<div class="line"></div>
<!--可滾動的列表開始-->
<ons-scroller>
<ons-list>
<ons-list-header>
<img src="imgs/bg_order_tab_signin.png" alt="img">
<span>請點擊登錄</span>
</ons-list-header>
<div class="mine_line"></div>
<ons-list-item ng-repeat="item in first" class="list__item--tappable list__item__line-height" modifier="chevron">
<img src="{{item.img}}" alt="img"><span>{{item.tag}}</span>
</ons-list-item>
</ons-list>

<ons-list>
<ons-list-item ng-repeat="item in second" class="list__item--tappable list__item__line-height" modifier="chevron">
<img src="{{item.img}}" alt="img"><span>{{item.tag}}</span>
</ons-list-item>
</ons-list>
<ons-list>
<ons-list-item ng-repeat="item in third" class="list__item--tappable list__item__line-height" modifier="chevron">
<img src="{{item.img}}" alt="img"><span>{{item.tag}}</span>
</ons-list-item>
</ons-list>
</ons-scroller>
<!--可滾動的列表結束-->
</ons-page>

mineController.js：

/**
* Created by NIUXINLONG on 2018/8/3.
*/
app.controller("MineController", function ($scope) {
$scope.name = "123";
$scope.first = [
{
img: "imgs/order_ic_vector_unpaid_new.png",
tag: "我的錢包"
},
{
img: "imgs/ic_vector_user_wallet.png",
tag: "余額"
},
{
img: "imgs/ic_vector_vip_club.png",
tag: "抵用券"
},
{
img: "imgs/ic_vector_vip_club.png",
tag: "會員卡"
}
];
$scope.second = [
{
img: "imgs/user_admin_name.png",
tag: "好友去哪"
},
{
img: "imgs/ic_vector_user_wallet.png",
tag: "我的評價"
},
{
img: "imgs/order_ic_vector_unpaid_new.png",
tag: "我的收藏"
},
{
img: "imgs/ic_vector_vip_club.png",
tag: "會員中心"
},
{
img: "imgs/ic_vector_voucher.png",
tag: "積分商城"
}
];
$scope.third = [
{
img: "imgs/ic_vector_user_wallet.png",
tag: "客服中心"
},
{
img: "imgs/ic_vector_vip_club.png",
tag: "關于集團"
}
];
});

3、項目相關的文件下載

http://www.nxl123.cn/files/meiTuanDemo_mine.zip

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的OnSen UI结合AngularJs打造”美团APP我的”页面 --Hybrid App的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。