AngularJs中,在ng-epeat后需要执行Js脚本怎么处理?

我们的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);
  }
由于时间有限,暂且搁笔,写的不深,还望朋友们提出宝贵意见,一起进步,谢谢!



猜你喜欢

转载自blog.csdn.net/lyl520_zyg1314/article/details/81017191