angular ng-repeat元素swiper无法滑动问题解决

风晓 2024-01-01 19:33:08  50594 赞同 0 反对 0

分类：资源

angular中ng-repeat元素swiper无法滑动，angular与swiper冲突。

1.问题

在项目中，我需要利用ng-repeat循环li，比如一个nav导航条，在加入swiper后，出现无法滑动的问题。

问题展示：

其实，我们只需要在初始化swiper时加入两行代码即可

observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper

2.实现

效果图

html

<div ng-controller="myCtrl" class="swiper-container">
    <ul class="swiper-wrapper">
        <li ng-repeat="item in arr"  class="swiper-slide">{{item}}</li>
    </ul>
</div>

var app = angular.module("myApp", []);
app.controller("myCtrl", ["$scope", function ($scope) {
    $scope.arr = [1, 2, 3, 4, 5];;
    var mySwiper = new Swiper('.swiper-container',{
        grabCursor:true,
        spaceBetween:10,
        freeMode:true,
        observer:true,
        observeParents:true
    })
}])

如果您发现该资源为电子书等存在侵权的资源或对该资源描述不正确等，可点击“私信”按钮向作者进行反馈；如作者无回复可进行平台仲裁，我们会在第一时间进行处理！

评价 0 条

相关资源

JS判断数组是否包含某元素 2024-01-03 49971 浏览
我在学习ES6数组拓展时，发现了新增了不少了有趣的数组方法，突然想好工作中判断数组是否包含某个元素是非常常见的操作，那么这篇文章顺便做个整理。
在C程序中，将数组范围查询与频率相同的元素进行翻译 2024-01-08 50113 浏览
这里我们会看到一个有趣的问题。我们有一个包含 N 个元素的数组。我们必须执行一个查询 Q，如下所示： Q(start, end) 表示从开始到结束，数字“p”出现的次数恰好是“p”次。 p> 因此，如果数组类似于：{1, 5, 2, 3, 1, 3, 5, 7, 3, 9, 8}，并且查询为 – Q(1 , 8) – 这里 1 出现一次，3 出现 3 次。所以答案是 2 Q(0, 2) – 这里 1 出现一次。所以答案是 1
JS leetcode 移除元素题解分析 2024-01-03 52863 浏览
JS leetcode 移除元素题解分析
js forEach参数详解，forEach与for循环区别，forEach中如何删除数组元素 2024-01-03 51361 浏览
js forEach参数详解，forEach与for循环区别，forEach中如何删除数组元素
迭代器模式：遍历容器内元素 2024-01-07 50428 浏览
迭代器模式是一种行为型设计模式，它允许你在不暴露集合内部结构的情况下遍历集合中的所有元素。这种模式提供了一种统一的方式来访问不同类型的集合，使得客户端代码可以遍历集合，而不需要关心集合的具体实现细节。
如何使用Javascript开发sliding-nav带滑动条效果的导航插件? 2023-12-30 49667 浏览
本文介绍如何使用纯Javascript来开发一款简单的JS插件，本插件可以实现鼠标悬停在导航上时，下方的滑动条自动从当前菜单滑动到所选菜单当中去。
使用PHP中的array_pop()函数来删除数组末尾元素 2024-01-06 50386 浏览
PHP中的array_pop()函数用于删除数组的最后一个元素。本文将详细介绍array_pop()函数的使用方法，并提供相关的代码示例。
JQ的offset().top与JS的getBoundingClientRect区别详解，JS获取元素距离视窗顶部可变距离 2024-01-03 51924 浏览
JQ的offset().top与JS的getBoundingClientRect区别详解，JS获取元素距离视窗顶部可变距离
体系结构元素——通信实体。 2023-12-28 51855 浏览
1）面向系统的角度：线程、进程、结点。 2）面向问题的角度：对象（自然单元）、组件（提供的接口和所需接口）、Web服务（经常跨越组织边界）。 3）进程间通信：相对底层支持（套接字、多播、消息传递）。 4）远程调用：最常见的通信范型，双向交换。请求——应答协议（RR）：一对消息的交换。远程过程调用（RPC）：远程计算机上进程中的过程能被调用。远程方法调用（RMI）：一个发起调用的对象可以调用一个远程对象中的方法。进程通信及远程调用的限制：
滑动窗口机制 2023-12-24 52612 浏览
滑动窗口以字节为单位

angular ng-repeat元素swiper无法滑动问题解决

相关资源

关注我们