资讯专栏INFORMATION COLUMN

Angularjs与weui的握手

winterdawn / 2579人阅读

摘要:控制器显示与隐藏时的动画,使用中的服务到此,导航和一个功能演示的页面就已经实现了。由于大部分是静态的,没有动态,所以只需要将官方的演示照搬即可。更希望能得到您的帮助与指正。

引子

自从开通了sf的文章专栏,总想在这个专栏里写些自己的东西。不久前,微信推出了自己的一套UI,我看有很多开发者将其套用在了一些前端框架中,比如react、vue。最近自己在学习Angularjs,所以,也想把这个UI整合到这个框架,这几天试了一下,简单的套用了一个功能,现在分享给大家,分离做的不好,请高手指点。

适合读者

有一定的Angularjs基础,并且了解ngRoute、ngAnimate的人群。

包含文件

整合的时候,参照官方的演示页面,自己也做了一个演示页面,完全使用Angularjs做的,没有引用其它框架。下面先说明一下引入的文件。

使用angular.min.js 1.4.9

使用angular-route.min.js 1.4.9

使用angular-animate.min.js 1.4.9

使用weui.min.css 0.4.0

一开始想与官方的演示页面一样做一个单页面的,开发之后发现,把所有内容放到一个文件里显得杂乱,所以,使用了Angularjs的路由功能,把各个小功能独立成页面,在需要时加载进来。此处使用模板加载功能来实现。于是,导航页面代码就显示很干净,如果想要使用哪部分的功能代码,直接使用相对应的html页面及js脚本文件即可,方便、快捷。

下是导航页面的代码:





    
    
    WeUI
    




    
    

以上代码大部分来自官方的首页代码,由于要使用Angularjs,所以增加了相应的属性,包括ngApp,ngController,ngClick,ngIf以及显示功能演示页面的ngView。

代码中,ngClick中使用了showBlock函数,参数是当前点击的功能字符串,这个函数的参数在使用路由功能后,没有使用,仅仅是在此函数中增加了隐藏与显示导航部分以及功能演示部分的代码,详情请查看下面的脚本代码。

angular.module("weuiapp", ["ngAnimate", "ngRoute"])
    .config(function($routeProvider) {
        $routeProvider
            .when("/", {
                controller: "home",
                templateUrl: ""
            })
            .when("/button",{
                controller: "button",
                templateUrl: "button.html"
            })
            .when("/cell", {
                controller: "cell",
                templateUrl: "cell.html"
            })
            .when("/toast", {
                controller: "toast",
                templateUrl: "toast.html"
            })
            .when("/msg", {
                controller: "msg",
                templateUrl: "msg.html"
            })
            .when("/article", {
                controller: "article",
                templateUrl: "article.html"
            })
            .when("/icons", {
                controller: "icons",
                templateUrl: "icons.html"
            })
            .when("/panel", {
                controller: "panel",
                templateUrl: "panel.html"
            })
            .otherwise({
                redirectTo: "/"
            })

    })
    .controller("home", function($scope) {
        $scope.homeShow = true;
        $scope.viewShow = false;

        $scope.showBlock = function() {
            $scope.homeShow = false;
            $scope.viewShow = true;
        }
    })
    .controller("toast", ["$scope", "$interval", toast])
    .animation(".aweui-show", ["$animateCss", toastAnimate])
    .animation(".home", ["$animateCss", function($animateCss) {
        return {
            enter: function(element, doneFn) {
                return $animateCss(element, {
                    from: { left: "100%", top: 0, opacity: 0 },
                    to: { left: 0, top: 0, opacity: 1 },
                    duration: .3
                });
            },
            leave: function(element, doneFn) {
                return $animateCss(element, {
                    from: { left: 0, top: 0, opacity: 1 },
                    to: { left: "-100%", top: 0, opacity: 0 },
                    duration: .3
                });
            }
        }
    }])
    .animation(".view", ["$animateCss", function($animateCss) {
        return {
            enter: function(element, doneFn) {
                return $animateCss(element, {
                    from: { left: "100%", top: 0, opacity: 0 },
                    to: { left: 0, top: 0, opacity: 1 },
                    duration: .3
                });
            },
            leave: function(element, doneFn) {
                return $animateCss(element, {
                    from: { left: 0, top: 0, opacity: 1 },
                    to: { left: "-100%", top: 0, opacity: 0 },
                    duration: .3
                });
            }
        }
    }])
$scope.showBlock = function() {
    $scope.homeShow = false;
    $scope.viewShow = true;
}

这一段便是函数要实现的功能代码,分别控制变量homeShow以及viewShow来实现导航与功能演示两部分的显示与隐藏。

.animation(".home", ["$animateCss", function($animateCss) {
    return {
        enter: function(element, doneFn) {
            return $animateCss(element, {
                from: { left: "100%", top: 0, opacity: 0 },
                to: { left: 0, top: 0, opacity: 1 },
                duration: .3
            });
        },
        leave: function(element, doneFn) {
            return $animateCss(element, {
                from: { left: 0, top: 0, opacity: 1 },
                to: { left: "-100%", top: 0, opacity: 0 },
                duration: .3
            });
        }
    }
}])

以上是导航部分显示时的动画效果代码。导航部分初始化为绝对定位,让其在消失前先做一个向左移出显示区域,并且渐隐的动画。当查看完功能演示,回到导航时,进行动画反转。这里使用的ngAnimate的$animateCss服务,并且使用了此服务提供的进入事件enter以及移出事件leave。其它的动画功能与其相同。

$routeProvider
    .when("/", {
        controller: "home",
        templateUrl: ""
    })
    .when("/button",{
        controller: "button",
        templateUrl: "button.html"
    })
    .when("/cell", {
        controller: "cell",
        templateUrl: "cell.html"
    })
    .when("/toast", {
        controller: "toast",
        templateUrl: "toast.html"
    })
    .when("/msg", {
        controller: "msg",
        templateUrl: "msg.html"
    })
    .when("/article", {
        controller: "article",
        templateUrl: "article.html"
    })
    .when("/icons", {
        controller: "icons",
        templateUrl: "icons.html"
    })
    .when("/panel", {
        controller: "panel",
        templateUrl: "panel.html"
    })
    .otherwise({
        redirectTo: "/"
    })

这是路由服务,对应html中的a标签href属性,所以,此程序中没有使用showBlock函数的参数,已经没有用处了,此函数只是为了增加了动态效果而创造的。

下面,再来看看功能演示部分的页面代码。

Toast

已完成

数据加载中

这就是加载等待提示功能的演示页面代码,一共两种样式,其一,显示文字;其二,有一个加载等待的动画并且有提示文字显示。

页面有两个按钮,功能就是分别呼出这两种样式,每种样式呼出后,停留3秒后自动消失。

在导航页面的js中,有一个控制器和一个动画函数调用了此功能页面脚本代码中的函数,分别是控制器函数toast()以及动画函数toastAnimate()。脚本文件的代码如下。

//toast控制器
function toast($scope, $interval) {
    $scope.toastHide = 0;
    $scope.loadingToastHide = 0;

    $scope.showToast = function() {
        $scope.toastHide = 1;

        $interval(function() {
            $scope.toastHide = 0;
        }, 3000, 1);
    }

    $scope.showLoadingToast = function() {
        $scope.loadingToastHide = 1;

        $interval(function() {
            $scope.loadingToastHide = 0;
        }, 3000, 1);
    }
}

//显示与隐藏时的动画,使用ngAnimate中的$animateCss服务
function toastAnimate($animateCss) {
    return {
        enter: function(element, doneFn) {
            return $animateCss(element, {
                from: { opacity: 0 },
                to: { opacity: 1 },
                duration: .3
            });
        },
        leave: function(element, doneFn) {
            return $animateCss(element, {
                from: { opacity: 1 },
                to: { opacity: 0 },
                duration: .3
            });
        }
    }
}

到此,导航和一个功能演示的页面就已经实现了。由于大部分UI是静态的,没有动态,所以只需要将官方的演示照搬即可。需要增加动态代码的,现在已只做了这一个,后续还会陆续增加至完成。

代码开源地址

代码已经上传至github上,感兴趣的朋友可以点击查看,代码同时也上传到个人的服务器上,说明中有链接地址,可以直接点击查看效果。

由于项目刚刚成立,很多东西没有完善,还有很多不如意的地方,请谅解。更希望能得到您的帮助与指正。

项目地址:https://github.com/limeng0403/Angularjs-weui

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78895.html

相关文章

  • 如何写一份好前端面试简历?

    摘要:简历的存在只有一个目的帮你约到面试。即使你通过其他方式获得了面试,当你入职的时候,还是要有这么一份纸质简历的,所以不要想着偷懒。在该系统上线后,前端性能从提升到,服务器由台减少到台通过量化的数字来增强可信度。 简历的本质 原文地址在写简历之前,我们必须清楚的了解一件事情,那就是简历是什么?它不是人生履历,不是项目清单,也不是技能大放送。简历的存在只有一个目的 —— 帮你约到面试。只要能...

    winterdawn 评论0 收藏0
  • 如何写一份好前端面试简历?

    摘要:简历的存在只有一个目的帮你约到面试。即使你通过其他方式获得了面试,当你入职的时候,还是要有这么一份纸质简历的,所以不要想着偷懒。在该系统上线后,前端性能从提升到,服务器由台减少到台通过量化的数字来增强可信度。 简历的本质 原文地址在写简历之前,我们必须清楚的了解一件事情,那就是简历是什么?它不是人生履历,不是项目清单,也不是技能大放送。简历的存在只有一个目的 —— 帮你约到面试。只要能...

    joyvw 评论0 收藏0
  • 如何写一份好前端面试简历?

    摘要:简历的存在只有一个目的帮你约到面试。即使你通过其他方式获得了面试,当你入职的时候,还是要有这么一份纸质简历的,所以不要想着偷懒。在该系统上线后,前端性能从提升到,服务器由台减少到台通过量化的数字来增强可信度。 简历的本质 原文地址在写简历之前,我们必须清楚的了解一件事情,那就是简历是什么?它不是人生履历,不是项目清单,也不是技能大放送。简历的存在只有一个目的 —— 帮你约到面试。只要能...

    wpw 评论0 收藏0
  • 3月份前端资源分享

    摘要:面试如何防骗一份优秀的前端开发工程师简历是怎么样的作为,有哪些一般人我都告诉他,但是他都不听的忠告如何面试前端工程师 更多资源请Star:https://github.com/maidishike... 文章转自:https://github.com/jsfront/mo... 3月份前端资源分享 1. Javascript 使用judge.js做信息判断 javascript...

    nanchen2251 评论0 收藏0
  • 搜集React、Vue、Angular和传统UI组件库以及后台管理平台模板

    摘要:高颜值好用易扩展的微信小程序库,有赞。一套高质量的微信小程序组件库。用和搭建的一个通用管理后台基于实现的后台管理系统模板一个后台管理系统模板是一套组件化框架,支持定制主题,主要服务于前台及中后台产品。基于后台管理系统。 快来Star,在这里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

    zhangrxiang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<