zoukankan      html  css  js  c++  java
  • 浅谈被Swiper的坑

    最近在研发“移动端触屏滑动”(手机端在线做题翻页)功能的过程当中,使用了Swiper插件,官方参考地址:swiper

    写好静态模板,一切顺利,切换动态数据加载时,不能上下切换、前后滑动,动态统计template模板加载的数据量,绑定到swiper-slide类里面,虽然可以解决这个问题,

    在用户体验上极为不好;浏览Swiper官网,查看API文档,原来笔者忽略了两个参数:observerobserveParents,即启动动态检查器,当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。

    如下所示:

    var swiper = new Swiper('.swiper-container', {
    navigation: {
    nextEl: '#btn-next',
    prevEl: '#btn-prev',
    },
    observer: true,//修改swiper自己或子元素时,自动初始化swiper
    observeParents: true,//修改swiper的父元素时,自动初始化swiper
    });

    并且在调用上一页下一页方法时,不添加这两个参数,体验相当不流畅:

    var mySwiper = new Swiper('.swiper-container', {
    observer: true,
    observeParents: true,
    });

    mySwiper.slideNext();

  • 相关阅读:
    7-25 念数字
    7-24 约分最简分式
    7-23 币值转换
    HDU-1102-Constructing Roads
    HDU-1301-Jungle Roads
    链式向前星
    HDU-1217-Arbitrage(SPFA)
    POJ-1258-Agri-Net
    HDU-1863-畅通工程
    POJ-3050-Hoscotch
  • 原文地址:https://www.cnblogs.com/shiyige-216/p/14642451.html
Copyright © 2011-2022 走看看