我们的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实现产品左右滑动弹性效果
//限时秒杀 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 (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);
}
由于时间有限,暂且搁笔,写的不深,还望朋友们提出宝贵意见,一起进步,谢谢!