OnSen UI结合AngularJs打造”美团"APP"逛一逛”页面 --Hybrid App

1、页面效果图：

演示链接地址：http://www.nxl123.cn/bokeyuan/meiTuanDemo_walk/

2、核心代码

walk.html：

<ons-page ></ons-page>

walkController.js：

/**
 * Created by NIUXINLONG on 2018/8/3.
 */
app.controller("walkController",function ($scope ) {
    // $scope.name ="123";
    $scope.nearTab = ["头条","美食","玩乐","影视"];

    $scope.index = 0;

    $scope.change = function (index) {
        // alert(index);
        $scope.index = index;
        carousel.setActiveCarouselItemIndex(index);
    };
    $scope.update = function () {
        $scope.index = carousel.getActiveCarouselItemIndex();
    };
    $scope.allLists = [
        [
            {
                title: "这样的小龙虾才好吃呢！",
                img1: "imgs/meituan_15ac05dce13.jpg",
                img2: "imgs/meituan_15ab60cb3aa.jpg",
                img3: "imgs/meituan_15ab61f2e56.jpg",
                subTitle:"舌尖上的北京1分钟前"
            },
            {
                title: "网评已经消失的5款小零食!",
                img1: "imgs/meituan_15ab81c001a.jpg",
                img2: "imgs/meituan_15ab6299b90.jpg",
                img3: "imgs/meituan_15ab626eca6.jpg",
                subTitle:"舌尖上的上海6分钟前"
            },
            {
                title: "国内最适合穷游的5个地方，没钱不是理由1",
                img1: "imgs/meituan_15ac07c859d.jpg",
                img2: "imgs/meituan_15ac07c3581.jpg",
                img3: "imgs/meituan_15ac07ca1eb.jpg",
                subTitle:"舌尖上的烟台8分钟前"
            },
            {
                title: "这些没事我文采步只能看着，好吃到怀疑人生!",
                img1: "imgs/meituan_15ac06f763d.jpg",
                img2: "imgs/meituan_15ab85ee93f.jpg",
                img3: "imgs/meituan_15ac05d98df.jpg",
                subTitle:"舌尖上的烟台15分钟前"
            },
            {
                title: "方便面的19种做法，吃完保你还惦记！",
                img1: "imgs/meituan_15ac05db0ac.jpg",
                img2: "imgs/meituan_15ab623a9af.jpg",
                img3: "imgs/meituan_15ab86383f5.jpg",
                subTitle:"舌尖上的烟台20分钟前"
            }
        ],
        [
            {
                title: "这样的小龙虾才好吃呢！",
                img1: "imgs/meituan_15ac05dce13.jpg",
                img2: "imgs/meituan_15ab60cb3aa.jpg",
                img3: "imgs/meituan_15ab61f2e56.jpg",
                subTitle:"舌尖上的北京1分钟前"
            },
            {
                title: "网评已经消失的5款小零食!",
                img1: "imgs/meituan_15ab81c001a.jpg",
                img2: "imgs/meituan_15ab6299b90.jpg",
                img3: "imgs/meituan_15ab626eca6.jpg",
                subTitle:"舌尖上的上海6分钟前"
            },
            {
                title: "国内最适合穷游的5个地方，没钱不是理由1",
                img1: "imgs/meituan_15ac07c859d.jpg",
                img2: "imgs/meituan_15ac07c3581.jpg",
                img3: "imgs/meituan_15ac07ca1eb.jpg",
                subTitle:"舌尖上的烟台8分钟前"
            },
            {
                title: "这些没事我文采步只能看着，好吃到怀疑人生!",
                img1: "imgs/meituan_15ac06f763d.jpg",
                img2: "imgs/meituan_15ab85ee93f.jpg",
                img3: "imgs/meituan_15ac05d98df.jpg",
                subTitle:"舌尖上的烟台15分钟前"
            },
            {
                title: "方便面的19种做法，吃完保你还惦记！",
                img1: "imgs/meituan_15ac05db0ac.jpg",
                img2: "imgs/meituan_15ab623a9af.jpg",
                img3: "imgs/meituan_15ab86383f5.jpg",
                subTitle:"舌尖上的烟台20分钟前"
            }
        ],
        [
            {
                title: "这样的小龙虾才好吃呢！",
                img1: "imgs/meituan_15ac05dce13.jpg",
                img2: "imgs/meituan_15ab60cb3aa.jpg",
                img3: "imgs/meituan_15ab61f2e56.jpg",
                subTitle:"舌尖上的北京1分钟前"
            },
            {
                title: "网评已经消失的5款小零食!",
                img1: "imgs/meituan_15ab81c001a.jpg",
                img2: "imgs/meituan_15ab6299b90.jpg",
                img3: "imgs/meituan_15ab626eca6.jpg",
                subTitle:"舌尖上的上海6分钟前"
            },
            {
                title: "国内最适合穷游的5个地方，没钱不是理由1",
                img1: "imgs/meituan_15ac07c859d.jpg",
                img2: "imgs/meituan_15ac07c3581.jpg",
                img3: "imgs/meituan_15ac07ca1eb.jpg",
                subTitle:"舌尖上的烟台8分钟前"
            },
            {
                title: "这些没事我文采步只能看着，好吃到怀疑人生!",
                img1: "imgs/meituan_15ac06f763d.jpg",
                img2: "imgs/meituan_15ab85ee93f.jpg",
                img3: "imgs/meituan_15ac05d98df.jpg",
                subTitle:"舌尖上的烟台15分钟前"
            },
            {
                title: "方便面的19种做法，吃完保你还惦记！",
                img1: "imgs/meituan_15ac05db0ac.jpg",
                img2: "imgs/meituan_15ab623a9af.jpg",
                img3: "imgs/meituan_15ab86383f5.jpg",
                subTitle:"舌尖上的烟台20分钟前"
            }
        ],
        [
            {
                title: "这样的小龙虾才好吃呢！",
                img1: "imgs/meituan_15ac05dce13.jpg",
                img2: "imgs/meituan_15ab60cb3aa.jpg",
                img3: "imgs/meituan_15ab61f2e56.jpg",
                subTitle:"舌尖上的北京1分钟前"
            },
            {
                title: "网评已经消失的5款小零食!",
                img1: "imgs/meituan_15ab81c001a.jpg",
                img2: "imgs/meituan_15ab6299b90.jpg",
                img3: "imgs/meituan_15ab626eca6.jpg",
                subTitle:"舌尖上的上海6分钟前"
            },
            {
                title: "国内最适合穷游的5个地方，没钱不是理由1",
                img1: "imgs/meituan_15ac07c859d.jpg",
                img2: "imgs/meituan_15ac07c3581.jpg",
                img3: "imgs/meituan_15ac07ca1eb.jpg",
                subTitle:"舌尖上的烟台8分钟前"
            },
            {
                title: "这些没事我文采步只能看着，好吃到怀疑人生!",
                img1: "imgs/meituan_15ac06f763d.jpg",
                img2: "imgs/meituan_15ab85ee93f.jpg",
                img3: "imgs/meituan_15ac05d98df.jpg",
                subTitle:"舌尖上的烟台15分钟前"
            },
            {
                title: "方便面的19种做法，吃完保你还惦记！",
                img1: "imgs/meituan_15ac05db0ac.jpg",
                img2: "imgs/meituan_15ab623a9af.jpg",
                img3: "imgs/meituan_15ab86383f5.jpg",
                subTitle:"舌尖上的烟台20分钟前"
            }
        ]

    ];
});

3、项目相关的文件下载

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