我们的app是用angularjs开发的,确实angualrjs在渲染数据上为程序猿提供了很大的便利,不用去像ajax那样拼接数据。但是有一次需求是这样的,在秒杀模块,产品个数不固定,左右滑动弹性效果,并且图片懒加载,当手指滑动到最后一张时页面跳转到限时秒杀专题页。
html
<div class="secKillPro swiper-container">
<ul class="secWrap clearfix swiper-wrapper">
//这里就是遍历数据,渲染页面,用自定义指令
<li class="fl swiper-slide" on-finish-render-filters ng-repeat="secK in seckills">
<a ng-click="openDetail(secK.id)">
<p class="secImg">
//图片的自定义属性
<img lazy-src="{{secK.ImageUrl}}" alt="">
</p>
<div class="secMess">
<p>{{secK.ProductName}}</p>
<div class="secPrice clearfix">
<span class="fl">¥{{secK.Price}}</span>
<i class="fl">¥{{secK.SalesPromotion}}</i>
</div>
</div>
</a>
</li>
</ul>
</div>
css样式
.secKillPro {
overflow-x: auto;
overflow-y: hidden;
margin-top: 0.5rem;
}
.secKillPro ul li {
float: left;
width: 6.2rem;
text-align: center;
}
.secKillPro .secImg {
width: 4.5rem;
height: 4.5rem;
margin: 0 auto;
}
.secKillPro .secImg img {
width: 100%;
height: 100%;
}
.secMess p {
width: 5.2rem;
font-size: 0.7rem;
color: #666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0 auto;
}
.secPrice {
margin: 0 auto;
text-align: center;
margin-left: 0.3rem;
}
.secPrice span {
font-size: 0.7rem;
display: block;
margin-top: 0.2rem;
color: #333333;
font-weight: bold;
letter-spacing: 1px;
width: 5rem;
}
.secPrice i {
display: block;
font-size: 0.6rem;
color: #707070;
text-decoration: line-through;
width: 4.45rem;
}
js部分
这时我们就需要定义一个指令了,在ng-repeat后来执行一些事情
app.directive('onFinishRenderFilters', function ($timeout) { //要用驼峰命名法
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngRepeatFinished');
});
}
}
};
});
定义好了之后我们来调接口,渲染页面,这里用的异步加载
$.ajax({
type: 'get',
url: requestHead + commConfig + '/mapi/mHomeApi/GetMillionKillProduct',
dtaType: 'json',
async: true,
success: function (res) {
console.log(res);
if (res != '') {
$scope.seckills = res;
$scope.seckillslength = $scope.seckills.length;
} else {
$(".secondKill").hide();
}
},
error: function () {
}
});
下面来用swiper实现产品左右滑动弹性效果
$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
var swiper8 = new Swiper('.secKillPro', {
slidesPerView: 3,
observer: true, //修改swiper自己或子元素时,自动初始化swiper
observeParents: true, //修改swiper的父元素时,自动初始化swiper
onTouchEnd: function (swiper) { //监听滑动的最后一个元素的事件
var snum = $(".secWrap li img").length,
simg = $(".secWrap li img");
//因为图片是后面取的,所以第一组加载完,会出现第二组加载不出来的情况,所以用for循环再取一次
for (var i = 0; i < snum; i++) {
if (simg.eq(i).attr("src") == undefined) {
var lsrc = simg.eq(i).attr("lazy-src");
simg.eq(i).attr("src", lsrc);
}
}
}
});
});
最后再实现滑动到最后一个时跳转页面到秒杀页,自己定义一个点击事件
$scope.openDetail = function (id) {
clicked('WJB2BAPP.html#/detail/' + id, false, false);
}
由于时间有限,暂且搁笔,写的不深,还望朋友们提出宝贵意见,一起进步,谢谢!