小小白啊
小小白啊
  • 发布:2022-01-06 18:11
  • 更新:2022-01-10 09:28
  • 阅读:404

【报Bug】在app端nvue文件下swiper-item无法占满swiper

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windiws10 ltsc

HBuilderX类型: 正式

HBuilderX版本号: 3.3.5

手机系统: 全部

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

iPhone 8 15.2系统 realme 安卓11

示例代码:
        <view class="swiper__calendar-days">  
            <swiper class="swiper__container" :duration="800"  
                :current="activeCurrent" circular @change="switchChangeMonth">  
                <swiper-item>  
                    <view class="days-content">  
                        <view class="day__item" v-for="sub in dayList" :key="sub.yearmonthday"  
                            @click.stop="handleChooseDay(sub)">  
                            <view class="day__item__wrapper">  
                                <text :class="['day__item__text']">{{sub.day}}</text>  
                            </view>  
                        </view>  
                    </view>  
                </swiper-item>  
            </swiper>  
        </view>  

操作步骤:
.swiper__container {  
        flex: 1;  
        transition: height .5s ease;  
        background-color: red;  
        height: 250px;  
    }  

    .days-content {  
        flex: 1;  
        flex-direction: row;  
        flex-wrap: wrap;  
        justify-content: flex-start;  
    }  

    .day__item {  
        width: 125rpx;  
        // flex: 1;  
        height: 50px;  
        flex-direction: column;  
        justify-content: center;  
        align-items: center;  
        background-color: antiquewhite;  
    }  

    .day__item__wrapper {  
        flex: 1;  
        flex-direction: row;  
    }  

    .day__item__text {  
        color: #303133;  
        text-align: center;  
    }  

    .day__item__text--disabled {  
        color: #c8c9cc;  
    }  

    .day__item__text--selected {  
        color: #2979ff;  
    }  

预期结果:

占满swiper

实际结果:

没有占满

bug描述:

红边是swiper容器的背景,swiper-item里的子view一直无法占满。

2022-01-06 18:11 负责人:无 分享
已邀请:
小小白啊

小小白啊 (作者)

在vue文件模式下是没有问题的。

DCloud_Android_ST

DCloud_Android_ST

swiper-item设置flex: 1;可以实现占满swiper。 截图里的效果可能是其他内部子元素导致的。提供完整示例我们看下

  • 小小白啊 (作者)

    你好,我有的。已经提供完整示例了。

    2022-01-07 13:42

  • 小小白啊 (作者)

    我已经检查了内部子元素,没有设置任何的margin和padding。很奇怪的是,在vue模式下是很正常,但是nvue就不行了。

    2022-01-07 13:49

小小白啊

小小白啊 (作者)

如果里面的 天数 item,设置为flex:1;就会出现以下情况:(所以我在想是不是解析器有什么问题)

例子

小小白啊

小小白啊 (作者)

emm,没人确认吗?

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