mpvue： swiper组件实现选项卡功能高度自适应

遇到的困难：swiper组件有一个默认高度，因此无法自动高度自适应，商品详情里的大量图片无法显示解决：因图片height固定，可以在获取数据时，得到图片数量。数量x高度即为swiper的height。把图片数量存在2个变量里设置swiper高度：h为图片数量，400rpx为每张图片高度注意：因为选项卡是动态的，每个卡片的高度应由内容决定，h变量用于动态控制swiper高度；而...

weixin_40877092

2930人浏览 · 2018-12-29 00:06:51

weixin_40877092 · 2018-12-29 00:06:51 发布

在这里插入图片描述

遇到的困难：swiper组件有一个默认高度，因此无法自动高度自适应，商品详情里的大量图片无法显示

解决：因图片height固定，可以在获取数据时，得到图片数量。数量x高度即为swiper的height。

把图片数量存在2个变量里
设置swiper高度：h为图片数量，400rpx为每张图片高度

注意：因为选项卡是动态的，每个卡片的高度应由内容决定，h变量用于动态控制swiper高度；而imgsLen变量固定不变，用于固定‘商品详情’卡片高度。
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^