angularjs中使用swiper时不起作用,最后出现空白位
controller.js中定义swipers指令:
- var moduleCtrl = angular.module('newscontroller',['infinite-scroll','ngTouch','news.service'])
- .directive('swipers',swipers);
- swipers.$inject = ['$timeout'];
- function swipers($timeout) {
- return {
- restrict: "EA",
- scope: {
- data:"="
- },
- template: '<div class="swiper-container" ng-if="data.dlfList.length>0" id="swiper-container1">'+
- '<div class="swiper-wrapper">'+
- '<div class="swiper-slide" ng-repeat="swiperList in data.dlfList">'+
- '<a ng-href="{{swiperList.isLink}}" ng-if="swiperList.classify==\'zt\'">'+
- '<div class="img-wrap">'+
- '<img ng-src="{{swiperList.picture}}" alt="{{swiperList.title}}" class="thumbpic">'+
- '</div><div class="dl_font_title dl_font_title_swiper" ng-bind="swiperList.title"></div>'+
- '<div class="source" ng-bind="swiperList.source"></div></a>' +
- '<a ng-if="swiperList.classify!=\'zt\'" ng-click="newsDetail(swiperList.id,swiperList.classify,swiperList.pubtime)">'+
- '<div class="img-wrap"><img ng-src="{{swiperList.picture}}" alt="{{swiperList.title}}" class="thumbpic">'+
- '<div class="numWrap" ng-if="swiperList.classify==\'pic\'">'+
- '<img class="swiper-numpic" src="http://dw.chinanews.com/chinanews/resource/mnapp/img/num.png">'+
- '<div class="swiper-num" ng-bind="swiperList.picCount"></div></div>'+
- '<div class="numWrap" ng-if="swiperList.classify==\'zb\'">'+
- '<img class="swiper-numpic" src="http://dw.chinanews.com/chinanews/resource/img/live.png"></div>'+
- '<div class="numWrap" ng-if="swiperList.classify==\'zy\'">'+
- '<img class="swiper-numpic" src="http://dw.chinanews.com/chinanews/resource/mnapp/img/num.png">'+
- '<div class="swiper-num">专题</div></div></div>'+
- '<div class="dl_font_title dl_font_title_swiper" ng-bind="swiperList.title"></div>'+
- '<div class="source" ng-bind="swiperList.source"></div></a>'+
- '</div></div></div>',
- link: function(scope, element, attrs) {
if(scope.$last){//最后一个循环项加载完成后初始化- $timeout(function(){
- var swiper = new Swiper('.swiper-container', { //轮播图绑定样式名
- slidesPerView: 'auto',
- spaceBetween: 10
- });
- },100);
}- }
- };
- }
index.html中使用swipers指令:
- <!-- swipers指令start -->
- <swipers data="yws"></swipers>
- <!-- swipers指令end -->
开发过程中的遇到的问题:
1、点击除“要闻”外的栏目,再点击“要闻”,多连发滚动不起作用;
2、向下滚动要闻列表后再向上滚动时多连发滚动不起作用(原因:向上滚动时重新请求了接口)
解决方法:将此处功能封装成一个指令,使用指令解决了以上2个问题
此处滑动到最后会出现一个空白位
解决方法:
- spaceBetween: 10
去掉此属性,循环项之间的距离使用css控制即可。
angularjs中使用swiper时不起作用,最后出现空白位的更多相关文章
- AngularJS 中<a> 超链接标签不起作用?
开始时遇到个问题,单页应用<a>元素链接点击就是不跳转页面,使用超链接标签<a href='group'>click</a> 不起作用. 解决方法: 如果你不巧配置 ...
- angularjs中ajax请求时传递参数的方法
method1方法使用的是params参数,该用法会把参数直接附加到url中 method2方法使用的是data参数,该参数会把页面参数类型从默认的multipart/form-data改为appli ...
- django中写form表单时csrf_token的作用
之前在学习django的时候,在template中写form时,出现错误.百度,google后要加{% csrf_token %}才可以,之前一直也没研究,只是知道要加个这个东西,具体是什么也不明白. ...
- AngularJS中get请求URL出现跨域问题
今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...
- AngularJS 中的Promise --- $q服务详解
先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...
- angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
- angularJS中的Promise对象($q)的深入理解
原文链接:a better way to learn AngularJS - promises AngularJS通过内置的$q服务提供Promise编程模式.通过将异步函数注册到promise对象, ...
- AngularJS中的Provider们:Service和Factory等的区别
引言 看了很多文章可能还是不太说得出AngularJS中的几个创建供应商(provider)的方法(factory(),service(),provider())到底有啥区别,啥时候该用啥,之前一直傻 ...
- AngularJS 中的 Promise 和 设计模式(转)
原文地址:http://my.oschina.net/ilivebox/blog/293771 目录[-] Promise 简单例子 链式 Promise Parallel Promises And ...
随机推荐
- ICPC 2018 焦作区域赛
// 2019.10.7 练习赛 // 赛题来源:2018 ICPC 焦作区域赛 // CF链接:http://codeforces.com/gym/102028 A Xu Xiake in Hena ...
- IPv6 三个访问本地地址的小Tips
最近发现家里宽带支持IPv6了,这里分享三个利用IPv6访问本地地址(内网地址)的方法. 通常来说,我们用localhost来代表本地地址127.0.0.1.其实在IPv6中有他自己的表示方法ip6- ...
- 浅析AIDL的使用和工作原理
AIDL是一种接口定义语言,用于生成可在Android设备上两个进程之间进行进程间通信(IPC)的代码. AIDL的使用 新建一个aidl文件,定义进程间通信的接口 // IStudentManage ...
- 测试Tensorflow-GPU的例子
import tensorflow as tf # import os # os.environ['TF_CPP_MIN_LOG_LEVEL']='2' a = tf.placeholder(tf.i ...
- Neo4j和Elasticsearch
Neo4j和Elasticsearch Neo4j和Elasticsearch是一种让人眼前一亮的组合,为什么需要把搜索和图表结合起来呢?它们是如何使用的呢? 在无处不在的互联网搜索引擎的推动下,全文 ...
- 使用雪碧图Css Sprite精灵 | 加速网页响应速度
什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它 ...
- Linux(Centos7)安装ngnix服务器
Ngnix服务器是一款优秀的静态页服务器软件和反向代理服务器软件 目前,centos安装ngnix可以yum安装也可以下载安装,我们为了扩展方便,选择下载安装.yum一键安装没什么好说的. 一.安装编 ...
- .net 接受请求过来的流
//接收POST过来的数据 System.IO.Stream s = Request.InputStream; int count = 0; byte[] buffer = new byte[1024 ...
- JQUERY(入口函数 选择器)
入口函数 $(document).ready(function(){ });可以简写为$(function(){}) 选择器 基本选择器 元素选择器 $("p") 所有 & ...
- day15 python-03 列表,元组,字典
Python之路,Day3 = Python基础3 注: extend: 拼接 enumerate:打印序号,返回两个值 模块的简单使用 sys模块 #!/usr/bin/env python #这句 ...