如何实现窗口尺寸改变，swiper重新初始化尺寸_软件运维

1、首先需要打开HBuilderX开发工具，创建一个Web项目，并将swiper插件对应的CSS和JavaScript文件拷贝到项目中。

2、然后新建一个静态页面，然后扒老将swiper插件的文游此源件神态引入到页面中。

3、接着在<body></body>标签中，插入多个div标签并设置class属性。

4、利用类选择器和伪类选择器nth-child，设置几个div标签的样式。

5、调用jquery初始化函数，对swiper插件进行初始化，设置autoplay属性。

6、最后保存代码并运行项目，打开浏览器查看界面效果。

最近写小程序经常用swiper，结果发现，坑好多啊。。。

坑1.swiper-item的100%宽高

小程序默认swiper-item的宽高默认继承swiper的宽高，如果不用!important语法根本改不了

如果想要制作不同高度图片的swiper，则需要事先知道每张图片的高度然后给swiper赋高度值。

swiper-item的宽度也是一个巨坑，想要设置一次展示多个swiper-item可以设置这个属性：display-multiple-items，值为数字。但是这样每个item都是紧贴着的。

如果想要做出不紧贴的效果，唯一的方法就是swiper-item留部分白，另一部分放置想要展示的内容

掐指一算，我好久没更新了。。。

日常记录学习~~

参数参考官方文档： https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html

cover-image：覆盖在原生组件之上的图片视图，支持嵌套在 cover-view 里

cover-view：覆盖在原生组件之上的文本视图，支持嵌套 cover-view 、 cover-image ，可在 cover-view 中使用 button

原生组件有：map，video，canvas，camera，live-player，live-pusher

参数参考官方文档： https://developers.weixin.qq.com/miniprogram/dev/component/match-media.html

match-media：media query 匹配检测节点，指定一仿春组 media query 规则，满足时，这个节点才会被展示。

参数参考官方文档： https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html

movable-area：是movable-view的可移动区域，必须设置width和height属性，不并芹设置默认为10px

movable-view：可移动的视图容器，在页面中可以拖拽滑动，movable-view必须在movable-area组件中使用，并且必须是直接子节点，否则不能移动。

参数参考官方文档： https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html

page-container：“假页”容器备蔽耐组件，效果类似于 popup d出层，页面内存在该容器时，当用户进行返回 *** 作，关闭该容器不关闭页面，当前页面最多只有 1 个容器，若已存在容器的情况下，无法增加新的容器

参数参考官方文档：

https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

scroll-view：可滚动视图区域，使用竖向滚动时，需要给一个固定高度，组件属性的长度单位默认为px

参数参考官方文档：

https://developers.weixin.qq.com/miniprogram/dev/component/share-element.html

具体使用可看官方案例哦

share-element：共享元素，该组件需与page-container组件结合使用

swiper：滑块视图容器，其中只可放置swiper-item组件，否则会导致未定义的行为。

swiper-item:仅可放置在swiper组件中，宽高自动设置为100%

这是我们最熟悉的容器啦~

欢迎分享，转载请注明来源：内存溢出

如何实现窗口尺寸改变，swiper重新初始化尺寸