这两天做了两个H5页面 用的是angular框架 其实用这个稍微有点小题大做 主要是我用习惯了 而且数据交互这用的熟 所以就用了 vue有时间做个小项目出来就好了 学习学习
言归正传 :
1 首先是ui框架 因为是滑动页面 所以用了swiper: http://idangero.us/swiper/demos/29-custom-pagination.html 这次的要求是有tab键 并且tab键可以点击到相关的页面 滑动页面后 tab组件也要跟着变化 代码:正常引用css 和js后 想要字随页面变化 页面也随点击的字变化 要添加下面的代码:
script
$(function () { var mySwiper = new Swiper('.swiper-container', { //tab切换 onSlideChangeEnd: function (swiper) { var j = mySwiper.activeIndex; $('.swiper-tab li').removeClass('active').eq(j).addClass('active'); } //initialSlide: 1//第几页开始的 去掉这个滑动就会正常了 }); //列表切换 $('.swiper-tab li').on('click', function (e) { e.preventDefault(); //得到当前索引 var i = $(this).index(); $('.swiper-tab li').removeClass('active').eq(i).addClass('active'); mySwiper.slideTo(i, 1000, false); }); })
css 要比正常的多出一行:
.swiper-pagination-bullet-active { color: #fff; background: #007aff; }
这样就可以生成tab组件与swiper的结合使用了
2 要求页面往下滑动时候加载下一页的数据 虽然大致我能想出来怎么做 但是感觉还是好麻烦的说 所以 我就搜到了一个插件https://github.com/sroze/ngInfiniteScroll
这个是参考别的 所以附上原文链接:http://www.cnblogs.com/Uncle-Maize/p/6255840.html?utm_source=itdadao&utm_medium=referral 写的挺清楚的 大家直接参考用就好了 当然我也会在底下放上我自己的代码 毕竟我自己码放了一遍 看着更熟不是
1)首先下载ng-infinite-scroll.js 链接:http://sroze.github.io/ngInfiniteScroll/ 目前是1.0.0版本
2)如果你是用的 jQuery2.0 以上版本,还需要修改 ng-infinite-scroll.js 程序,将所有的将所有的 $window.xxx 改为 $(window).xxx, elem.xxx 改为 $(elem).xxx
3)引入js
<script type='text/javascript' src='path/to/jquery.min.js'></script> <script type='text/javascript' src='path/to/angular.min.js'></script> <script type='text/javascript' src='path/to/ng-infinite-scroll.min.js'></script>
4)重要的部分 示例代码:
html
<div class="swiper-slide comment" infinite-scroll='comments.nextPage()' infinite-scroll-disabled='comments.busy' infinite-scroll-distance='1'> <div class="comment-border" ng-repeat="n in comments.items"> <div class="comment-style"> <img ng-src="{{n.CommentReplyerHeaderImage}}" class="layout-mr20" ng-cloak> <!--src="img/children-head.jpg"--> <div class="comment-pic"> <span class="comment-titel typography-ellipsis layout-mb5" ng-cloak>{{n.CommentReplyerName}}</span> <span class="writer"> <img src="img/smile.png" alt=""> <my-directive></my-directive> </span> </div> </div> <p class="thewords layout-pb15"> {{n.reply_comments}} </p> <div class="photos"> <div class="img-body photo" ng-style="{'background-image': 'url({{n.thumbnail_img_url_one}})'}" ng-if="n.thumbnail_img_url_one"> </div> </div> <div class="review" ng-show="n.comment_type_choices == 2"> <div class="layout-p10"> <div class="review-for">引用 <span>@{{n.UserName}}</span>:</div> <p> {{n.comments}}</p> </div> <div class="photos"> <div class="img-body photo" ng-style="{'background-image': 'url({{n.reply_thumbnail_img_url_one}})'}" ng-if="n.reply_thumbnail_img_url_one"> </div> </div> </div> <div class="grayline"></div> </div> </div>
js
var app = angular.module('app', ['infinite-scroll']); app.controller('sharePageController',["$scope", "$http", "Comment", "ExportAdvice", "SharePhotos",function ($scope, $http, Comment, ExportAdvice, SharePhotos) { $scope.comments = new Comment(); $scope.exportAdvice = new ExportAdvice(); $scope.sharePhotos = new SharePhotos();}]);// 评论多页滚动加载app.factory('Comment', function ($http) { var Comment = function () { this.items = []; this.busy = false; this.after = ''; this.page = 1; }; var pageSize = 10; var isLoadCompleted = false; Comment.prototype.nextPage = function () { // 判断是否已经加载到最后一条数据了 if (isLoadCompleted) { return; } if (this.busy) return; this.busy = true; var url = "http://************?page=" + this.page + "&product_id=418"; $http.get(url, { headers: {'SECRET-KEY': '######'} }).then(function (response) { if (response.data.results.data.length < pageSize) { isLoadCompleted = true; } var items = response.data.results.data; for (var i = 0; i < items.length; i++) { this.items.push(items[i]); } this.after = "t3_" + this.items[this.items.length - 1].id; console.log(this.after); this.busy = false; this.page += 1; }.bind(this)); }; return Comment;});
差不多就是这样了 主要意思都在 参考着看吧
这边要说一下
1))我参考的原文的作者没有加识别"是否是最后一条数据"这项 如果不加的话 即使没有数据 也会继续往下求 并且报错 所以一定要加 我这个接口每页是返回10条数据
2))this.after对于我的项目是没用的 我就是忘了删了 以上就实现"滑动页面加载下一页数据的实现了"
3))swiper为了保证页面的一致性 所以设定了以height最高的页面为基准 对于我这次就不适合了 因为我总共4个tab页 其中2 3 4是要加载第二页第三页```数据的 按照它的那个逻辑 我的所有页面都要那么长 很难看 所以后来查了资料 看到swiper有个api 是"autuHight" 设置这个为true就行 但是对于我的不起效 最后我就设置了css 这样就实现了自适应高度
.swiper-slide{ height:pxToRem(500px); } .swiper-slide-active{ height:auto; }
4))header里面的SECRET-KEY 是后端自己设置的 我理解为相当于验证吧 只要记住它的写法和码放位置就好了
5))依赖注入的格式 在本地的时候我就配置的简单的 所以没事 但是提交到服务器上会报错
6))这次我遇到一个困难 当然也是我对于angular的api不熟悉闹的 服务器返回的字段中有个时间 这个时间是utc格式的用户注册时间 我需要将这个时间和现在的时间做差 得到过去了多少天 我刚开始想的是添加一个函数 然后调用就好了 但是angular不知道是不允许还是怎样 就是添加不上 后来我就在response返回值中 拿到这个字段 做了一个for循环 求得每个用户id的天数 存在一个数组里面 然后放进相应标签中 但是不行啊 angular不允许dom操作 那我怎么加呢? 就想到了指令 用指令把这个添加上 这个说一下$index很好用 因为我把循环出来的天数都放在了数组里 所以相关的ng-repeat要单独做 但是又不能一下子放两个 后来查资料 可以用$index引用 就成功显示了
//自定义指令 app.directive("myDirective", function () { return { template: "<span ng-cloak>{{comments.arr[$index]}}天<span/>" }; });
3 大方面就差不多了 下面就是我自己想记一下的东西 毕竟干这行时间不长 忘性大 :
1)如果要background-image与服务器的图片同步 要用ng-style 有两种写法 我没发现是为什么 因为版本都是一样的 所以我都放上:
第一种
<div class="poster" ng-style="{'background-image': 'url(' + productsInfo.collectionListImage + ')'}" ng-cloak></div>
第二种
<div class="col-xs-3 img-body photo" ng-repeat="m in sharePhotos.items" ng-style="{'background-image': 'url({{m.thumbnail_img_url_one}})'}"> </div>
2)ng-cloak是防止图片没有加载完成时候 出现{{}}等东西的
3)我发现进度条是可以用flex布局 用calc实现width根据服务器返回数值改变大小的
4)控制标签显示与否 可以用ng-if ng-show ng-hide 根据true或false 可以用ng-class添加样式
ng-class="{'zero':x.negativeCount==0}"
另外我又做了一个 H5 页面 基于 angular 做的 因为还是要滑动页面 所以用了 swiper
这次的页面是有一个主页面 8 个产品页面 主要就是两个页面样式 我接到后看了下接口 8 个产品页面 样式一样 就是接口数据不同 所以我打算用 ng-repeat 来控制页面生成
页面样式 要求: 主页面是全屏 产品页面是中间大 两边的都露出来一些 我是参考了 swiper 的这个案例做的: http://www.swiper.com.cn/demo/08-centered-auto.html
所有样式做完,数据请求到后遇到了了问题 首先 页面都生成以后 除了前两个页面 剩余的都滑不动 就是滑不过去 我开始想到是swiper-slide少了 所以在后面加了相应数量的空白swiper-slide 的div 可以滑动了 但是数据不一定会返回8个呀 我就像用js动态生成swiper-slide 生成了 但是不行 滑不动 我就想啊想 后来想到 是swiper的框架 所以应该调整swiper才对 所以找了api 问了度娘 知道了答案 只要在swiper的js中加上下面这两个就可以了 滑不动是因为swiper自己计算没有那么多页面 后生成的不承认
observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true//修改swiper的父元素时,自动初始化swiper
按照设计要求 第一个和最后一个页面都不用那个中间大两边露出一点的样式 所以用nth-child 和nth-last-child 将swiper-slide样式调整为100%就好了