在导航页面的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
您可能感兴趣的文章: