七分道道
七分道道
  • 发布:2018-09-29 09:09
  • 更新:2019-01-04 11:44
  • 阅读:1283

【报Bug】官网SWIPER组件示例代码描述不足

分类:uni-app

详细问题描述
官方关于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]
[电话]

2018-09-29 09:09 负责人:无 分享
已邀请:
3***@qq.com

3***@qq.com

正解!!查了很久的数据问题,但是事实上数据完全没有丢,就是宽高问题! 谢谢

该问题目前已经被锁定, 无法添加新回复