swiper 的一堆坑

最近写小程序经常用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组件缩小后需要完全居中。

二、实现方案：

一种方式是flex居中，但我调试后效果不行；还有一种就是绝对定位，使用left 50%，这种我调试也不居中；还有一种就是计算屏幕宽度和swiper宽度，绝对定位后left=(屏幕width-swiper width)/2,本文介绍最后一种实现方式。

三、程序实现

3.1 js文件

data声明变量

onload时计算参数值

3.2 wxss文件

使用绝对定位，left使用变量，格式： var( --变量名--)

3.3 wxml文件

swiper外用一个view组件，并使用变量，格式：style="--left--:{{动态变量}}px"

四、实现效果

---