关于swiper动态更改,无法更新的悖论
关于swiper动态更改,无法更新的悖论
以前都觉得swiper的使用很简单,那是因为使用swiper时都是写的数据,按照官网上介绍直接初始化swiper,随便丢一个地方初始化就ok了,但是在很多需求中,我们都需要动态的改变数据,这样可能就会遇到很多问题。
最近在react搭建环境中,使用swiper就遇上一些问题:
1. 初始化后,在react的钩子里面new 出来的swiper对象作用域问题。
2. 更改swiper,更新时很多方法不能使用。
3. 修改数据swiper里面的slider出现混乱。
4. 数据不匹配(需要加载的数据以改变,但是swiper里面的数据出现错误)。
```
class Banner extends Component {
static defaultProps = {
imageData:['image/b1.jpg','image/b2.jpg','image/b3.jpg','image/b4.jpg','image/b5.jpg','image/b6.jpg','image/b7.jpg','image/b8.jpg'],
imgData:['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg','img/9.jpg','img/10.jpg','img/11.jpg']
}
componentDidMount() {
this.mySwiper = new Swiper('.Banner', {
pagination: {
el: '.swiper-pagination',
},
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
loop:true,
effect : 'fade',
});
}
componentWillReceiveProps() {
console.log(1111);
this.mySwiper.update();
}
render() {
var sliderFn = (arr) => {
var sliderArr = [];
for(var i=0; i<arr.length; i++) {
sliderArr.push(<div class="swiper-slide"><img src={arr[i]}/>'</div>)
}
return sliderArr;
}
return (
<div class="swiper-container Banner">
<div class="swiper-wrapper">
{sliderFn(this.props.imgFlag ? this.props.imgData : this.props.imageData)}
</div>
<div class="swiper-pagination"></div>
</div>
)
}
}
<p>
真正的核心部分在
</p>
<p>
observer:true,//修改swiper自己或子元素时,自动初始化swiper </p>
<p>observeParents:false,//修改swiper的父元素时,自动初始化swiper </p>
onSlideChangeEnd: function(swiper){
swiper.update();
mySwiper.startAutoplay();
mySwiper.reLoop();
}
<p>加上这串代码后,使用基本正常</p>
<p>mySwiper.reLoop(); 重新对需要循环的slide个数进行计算,当你改变了slidesPerView参数时需要用到,需要自动轮播的时候必须要加上;</p>
<p>swiper.update(); 更新Swiper,这个方法包含了updateContainerSize,updateSlidesSize,updateProgress,updatePagination,updateClasses方法。也就是数据改变是重新初始化一次swiper;</p>
<p>mySwiper.startAutoplay(); 重新开始自动切换;</p>
<p>但是还会有一个问题,比如说在初始化页面是,初始化加载一组数据,但是这组数据里面只有一条信息,但是其他组数据里面包含了多条信息,在这种情况下必须要手动切换一次才能触发自动轮播,还没找到解决办法。</p>
<p>
以上就是遇到的一些问题,记录一下,以后遇到还可以看看。
</p>
关于swiper动态更改,无法更新的悖论的更多相关文章
- dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
- delphi 动态更改屏幕分辨率(转)
一.如何动态更改屏幕分辨率 有许多小工具可以在不重新启动Windows的条件下,动态更改屏幕分辨率.你是不是也想自己动手做一个呢?请在interface段中加入下面一句 function Resolu ...
- js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .
js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...
- Android应用中动态更改主题的实现
在android应用程序中我们可能需要切换模式,如晚上切换到夜间模式便于阅读等.本文参考了网上的一些资料,并结合实例,实现了动态更改主题的效果. Android中实现theme主题可以使用在activ ...
- WPF 动态更改启动窗体startupUri
原文:WPF 动态更改启动窗体startupUri 第一步: 在 App.xaml 里,把 StartupUri=""去掉,改成 Startup="Applicatio ...
- ASP.NET网页动态添加、更新或删除数据行
ASP.NET网页动态添加.更新或删除数据行 看过此篇<ASP.NET网页动态添加数据行> http://www.cnblogs.com/insus/p/3247935.html的网友,也 ...
- 微信小程序动态更改样式
获取列表长度(动态渲染),当长度>x时添加内联样式并绑定数据{{}},通过js动态更改{{}}
- WPF编程,通过Double Animation动态更改控件属性的一种方法。
原文:WPF编程,通过Double Animation动态更改控件属性的一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/a ...
- WPF编程,通过【帧】动态更改控件属性的一种方法。
原文:WPF编程,通过[帧]动态更改控件属性的一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/article/detail ...
随机推荐
- Redis入门很简单之三【常见参数配置】
Redis入门很简单之三[常见参数配置] 博客分类: NoSQL/Redis/MongoDB redisnosql缓存中间件memcached Redis的一下常见设置都是通过对redis.conf ...
- [STemWin教程入门篇] 第一期:emWin介绍
转自:http://bbs.armfly.com/read.php?tid=1544 SEGGER公司介绍 了解emWin之前,先了解一下SEGGER这家公司,了解生产商才能对emWin有更加全面的认 ...
- Linux C遇到的常见错误
此随笔主要记录一些Linux C遇到的常见错误,便于debug问题或自己编程时,避免发生类似的错误或问题,后续会持续更新.... 1.内存泄露问题 内存泄露是由于内存没有释放导致程序耗内存一直增大,引 ...
- canvas简单画图板
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <title> ...
- python *arg和**kwargs的区别
转载自:https://www.cnblogs.com/yunguoxiaoqiao/p/7626992.html 一.*args的使用方法 *args 用来将参数打包成tuple给函数体调用 举个栗 ...
- UML指南系列——用例图
可以用用例来描述正在开发的系统想要实现的行为,而不必说明这些行为如何实现. 结构良好的用例只表示系统或者子系统的基本行为,而且既不过于笼统也不过于详细.
- vue-cli 中多个组件共用一个mt-checklist
// html <div v-if="dataList"> <mt-popup v-model="popupVisible" position ...
- arcpy-字段唯一值、重复值、最值、平均值、方差、标准差、中数、众数
插个广告,制作ArcGIS的Tool工具学习下面的教程就对了: 零基础学习Python制作ArcGIS自定义工具观看链接 <零基础学习Python制作ArcGIS自定义工具>课程简介 im ...
- 请求一个url的全过程
最近在进行前端面试方面的一些准备,遇到了一个经典前端问题,一个url从输入到页面加载中间到底发生了什么,以前也认真想过这个问题,但是当时回答的都不全面,现在来好好总结一下: 总体来说分为以下六个步骤: ...
- 2018-2-13-win10-UWP-等级控件
title author date CreateTime categories win10 UWP 等级控件 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17: ...