详细问题描述
官方关于SWIPER组建的示例如下:
<template>
<view>
<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
<swiper-item v-for="item in itemList" :key="item">
<text>{{item}}</text>
</swiper-item>
</swiper>
<button @tap="changeIndicatorDots"> indicator-dots </button>
<button @tap="changeAutoplay"> autoplay </button>
<slider @change="intervalChange" show-value min="500" max="2000" /> interval
<slider @change="durationChange" show-value min="1000" max="10000" /> duration
</view>
</template>
示例代码运行后内容无法获取宽度,整个width值为0,因此无法被查看到。
修正方法:增加swiper样式
如:
<swiper indicator-dots="true" autoplay="true" interval="2000" duration="500" style="width: 750upx;height: 300upx;">
重现步骤
[步骤]在原始示例代码情况下,无法查看到swiper-item内容,原因是swiper-item缺失宽度,通过设置swiper-item宽度,在微信IDE可以看到ITEM宽度已经达到了设定值。
[结果]swiper-item父元素既swiper的宽度仍然为0无法撑开,导致父元素内的所有子元素无有效展示空间
[期望]组件说明中增加关于swiper需要人工给宽度的描述,并在官方示例代码中修正。因为swiper-item会自定以swiper的宽高为宽高,因此完整修正方法是直接给swiper设定宽高
运行环境
[系统版本]win10
[浏览器版本]微信IDE
[IDE版本]V1.02
[手机操作系统]-
[手机型号]-
[mui版本]-
附件
[代码片段]
[安装包]
联系方式
[QQ]
[电话]
1 个回复
极客道人
正解!!查了很久的数据问题,但是事实上数据完全没有丢,就是宽高问题! 谢谢