OnSen UI結合AngularJs打造」美團"APP"個人」頁面 --Hybrid App

一、頁面效果圖：

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

二、核心代碼

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: "關於集團"
        }
    ];
});

三、項目相關的文件下載

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