swiper 改了class 导致不会滚动

2024-09-02

有关swiper动态改变数据遇到的坑（不能自动滚动，自动跟新数据，切换不正常）

以前都觉得swiper的使用很简单,那是因为使用swiper时都是写的数据,按照官网上介绍直接初始化swiper,随便丢一个地方初始化就ok了,但是在很多需求中,我们都需要动态的改变数据,这样可能就会遇到很多问题. 以下简单说说最近遇到的问题: 开发需求是需要通过接口请求来动态的改变swiper数据,在这里偷了一个懒,直接用vue驱动数据的改变,就只写了一个swiper,直接通过数据改变驱动swiper里数据的切换. 最开始是模拟的数据,这样开始使用起来是没有问题的,但是在使用真实数据后就有一大

【转】iframe页面跳转时，导致父页面滚动！该怎么解决?

HTML code <body> <form id="form1" runat="server"> <iframe id="topFrame" width="800px" height ="140px;" style=" margin:0px 0px 0px 0px" frameborder="0" scrolling="no&

Taro踩坑记录一: swiper组件pagestate定制，swiperChange中setState导致组件不能滚动。

import Taro, { Component } from '@tarojs/taro'; import { Swiper, SwiperItem, Image, View } from '@tarojs/components'; import PropTypes from 'prop-types'; import './MySlider.scss'; export default class MySlider extends Component { static propTypes = {

移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且touchend也经常不触发. 之后百度了一下这个问题,原因是主要是由于200ms超时导致内核不一定会一直处理touchmove事件,一旦超时会将后续所有的事件转交给UI处理,导致touchmove不会一直触发. 为了解决开发者需要,建议开发者在touchstart时调用event.preventDe

swiper 增加同页面增加2个滚动

js代码 <script type="text/javascript"> var mySwiper = new Swiper('.slide_a',{ noSwiping : true, }); var slide_b = new Swiper('.slide_b',{ autoplay : , effect : 'cube', }); </script> css代码 <div class="swiper-container slide_a&qu

因为改 UOM conversion 导致库存数量和財务上的数据错误

轻易改变 UOM conversion 会导致库存数量混乱, 也会造成財务上的数据错误. 我们这里做一个 case 来详细分析一下. 1. 開始 Carton 和 Each 的比例是 1 : 1. 2. 我们创建一个PO, ship to W1, 是一个WMS Org. Item 是 lot control 的. UOM 使用 Carton, 不用这个 item 的 Primary UOM. 这里我们注意单位价格是15, 由于在定义 item 的时候, 1 个 Each 单位价格是15, 再依

改计算机名导致 Oracle因目标主机或对象不存在

手贱修改了计算机名, 结果导致登陆oracle数据库报如下错误,一查资料,说是修改了计算机名导致的,需要进到oracle安装目录: \oracle\product\10.2.0\db_1\NETWORK\ADMIN目录下找到 listener.ora和tnsnames.ora. 修改HOST值,HOST = 改为自己的计算机名但是oracle安装目录不记得在哪里了,此时可以打开cmd窗口,输入path,回车即可看到各种软件的安装路径: 找到 listener.ora 文件,用notepad+

MyEclipse中“擅自乱改”项目名导致项目报错的处理

最近几天培训的过程中,经常有同学手一抖,默默的修改了本来配置部署好的项目名,导致项目报错…… 遇到这种事情,我一般会做的处理就是重新新建项目,然后把包和各种文件ctrl+c ctrl+v,遇到项目小还好,要是稍微一个不注意,就会出现更多的错误. 所以,经过孙大爷提到一个解决方法,以我的一个myeclipse+tomcat所做的struts2+hibernate整合的项目举例: 1.由于项目用的MyEclipse自带的MyTomcat,所以通过如图1-1的方式找到myeclipse自带的tomca

oracle 自己改了 spfile 导致起不来

oracle pfile 出错今天在升级 oracle 内存的时候参数调错了,导致 oracle 起不来, 情急之下用 vim 修改了 spfile 文件,结果由于该文件是二进制的,不能直接修改,所以启动报错了. SQL> startup pfile='/u01/app/oracle/product/11.2.0/dbs/spfileorcl.ora' LRM-00123: 在输入文件发现无效的字符 0 ORA-01078: 处理系统参数失败下面就是紧急修复那个文件了进入 oracle 的

非常优秀的swiper插件————幻灯片播放、图片轮播

http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不错,还没研究.) 2016-5-4 http://superslide2.com/ superslide2 http://www.superslide2.com/param.html api API: http://www.idangero.us/swiper/api/ 官网API http:

解决使用 swiper 常见的问题

使用 swiper 的过程中个人总结 1. swiper插件使用方法, 直接查看文档 swiper基础演示 swiper API文档 2.swiper近视初始化时, 其父级元素处于隐藏状态(display:none),会导致swiper初始化失败, 页面中的滚动效果有问题解决方法1: var mySwiper = myApp.swiper('.guest-wrapper',{ observer: true,//修改swiper自己或子元素时,自动初始化swiper observeParents

android 混淆导致友盟反馈出错

最近混淆应用时出现了一个错误: 打包编译没问题,但程序运行之后,点击友盟的反馈就会导致程序报错: E/AndroidRuntime(7669): java.lang.RuntimeException: Unable to start activity ComponentInfo{packagename/com.umeng.fb.ConversationActivity}: java.lang.IllegalArgumentException: ResClass is not initializ

HBuilder/Mui开发ios使用上拉刷新导致滚动条无法使用的解决方法

HBuilder/Mui开发的APP使用上拉刷新,当滚动到底部是会触发上拉刷新,加载更多数据.但是ios上确是一个坑,导致滚动条无法滚动. 解决方法放弃Mui的上拉刷新,自己使用JS实现. var old = Date.now(); document.addEventListener('scroll', function () { if (document.body.scrollHeight == document.body.scrollTop + window.innerHeight) {

移动端web页面滚动不流畅，卡顿闪烁解决方案

移动端web页面滚动不流畅,卡顿闪烁解决方案 1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果: -webkit-overflow-scrolling: touch 2.position属性导致的页面滚动不流畅问题: <div style="overflow-x: hidden; overflow-y: auto; position: absolute; height: 200px;"> <d

fullpage.js jq全屏滚动插件

fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. (代码演示效果并且可以下载查看http://www.dowebok.com/77.html) 一.fullPage.js实现全屏 fullPage.js是开源的JQuery插件库,其Github地址:https://github.com/alvarotrigo/fullPage.js 1.基本演示 1.1 引入文件 <!-

IOS 浏览器上设置overflow: auto 不可滚动

项目中最近遇到一个bug,在ios上出现的问题:原页面是在某一块地方滚动,但是改版后,滚动区域改为最外层元素,最外层包裹了一层class为main的div .main { position: fixed; left: 0; right: 0; bottom: 0; top: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } 里面是两个元素,上下布局,下面的元素本身是在自己的区域滚动,现在改为跟着上面的元素滚动,到一定距离时把tab

android gridview 停止滚动

http://blog.csdn.net/yaphetzhao/article/details/50544105 参考上面的博客,关键代码我就贴出来吧: public void stopGridViewScroll(){ Field mFlingEndField = null; Method mFlingEndMethod; try { mFlingEndField = AbsListView.class.getDeclaredField("mFlingRunnable"); mFli

vticker.js--垂直滚动插件

一.使用要求列表必须是ul>li的格式 html代码 <div class=" myvticker'"> <ul> <li>1.新闻标题</li> <li>2.新闻标题</li> <li>3.新闻标题</li> </ul> </div> js引用vticker.js , 点击下载 $('.myvticker').vTicker({ speed: 700,//默

屏蔽scrollview的滚动

外层有scrollview时,手指移动方向跟滚动条方向相同时,会导致scrollview的滚动.此时如果不想滚动的话,可以在要接受ontouch的子视图,或者子子视图中的touch监听里加上v.getParent().requestDisallowInterceptTouchEvent(true);,就可屏蔽scrollview的滚动. 例子如下:xml文件 <Scrollview ........> <RelativeLayout ......> <View android

全屏滚动实现：fullPage.js和fullPage

fullPage.js和fullPage都能实现全屏滚动,二者差别是:fullPage.js需依赖于JQuery库,而fullPage不须要依赖不论什么一个js库.能够单独使用. 一.fullPage.js实现全屏 fullPage.js是开源的JQuery插件库,其Github地址:https://github.com/alvarotrigo/fullPage.js 1.基本演示 1.1 引入文件  <link rel="stylesheet&q

恢复在iterm2中当滚动光标时候触发滚动历史记录的问题

在Iterm2中,如果你上下滚动光标(上下滑动触摸板.或者滚动鼠标滚轮),通常情况下是触发了屏幕内容上下滚动. 但是在某些异常情况下,却触发了命令行历史记录的上下滚动,效果和你连续按了多次键盘的上下键按键一样. 这种情况只有当你进入一个全屏的应用(例如vi)才会出现,因此触发这种异常情况,很可能是item2发现你进入了一个全屏应用,但是没检测到你跳出了这个全屏应用,导致将光标滚动继续触发为发送键盘的上下按键. 因此解决这种问题也很简单,就是进入一个全屏的应用(例如:vi),然后退出即可. 如果想

swiper 改了class 导致不会滚动

热门专题