8***@qq.com
8***@qq.com
  • 发布:2021-07-19 09:14
  • 更新:2021-07-19 09:15
  • 阅读:609

【报Bug】swiper使用:在ios14.4中可以正常显示;在ios14.6中swiper内容无法显示

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.1.22

手机系统: iOS

手机系统版本号: IOS 14

手机厂商: 苹果

手机机型: iphone7 iphoneXs

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

App下载地址或H5⽹址: https://itunes.apple.com/cn/app/id1519167539?mt=8

示例代码:

swiper使用:在ios14.4中可以正常显示;在ios14.6中swiper内容无法显示

代码

<!-- 顶部选项卡 -->  
        <view class="nav-bar">  
            <view  
                v-for="(item, index) in navList"  
                :key="index"  
                :class="index == tabCurrentIndex ? 'nav-item current' : 'nav-item'"  
                :id="'tab' + index"  
                @click="tabClick(index)"  
            >  
                {{ item.text }}  
            </view>  
        </view>  
        <!-- 内容部分 -->  
        <swiper :duration="300" :current="tabCurrentIndex" class="swiper-box" @change="changeTab">  
            <swiper-item style="overflow: scroll;" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">  
                <scroll-view class="list-scroll-content" scroll-y @scrolltolower="getEvents">  
                    <!-- 空白页 -->  

                    <view class="tab-content">  
                        <view class="type-item" v-for="(item, i) in tabItem.actionList" :key="i" @click="checkTrans(item, tabIndex)">  

                            <view class="itemtitle">{{ item.represent }}</view>  
                            <view class="" v-if="item.coverImg" style="width: 500upx;height: 300upx;position: relative;background-color: #ECECEC;">  
                                <image :src="baseImg + item.coverImg" style="width: 500upx;height: 300upx;margin-bottom: 20upx;"  mode="aspectFit"></image>  
                                <image src="../../static/play.png" style="width: 50upx;height: 50upx;position: absolute;left: 225upx;top: 125upx;"></image>  
                            </view>  
                            <view class="imgListView" v-else>  
                                <view v-for="(itemImg, index) in item.imgList" :key="'img' + index">  
                                    <image class="imgview" :src="baseImg+itemImg" mode="aspectFill"></image>  
                                </view>  
                            </view>  
                            <view class="bottomItem">  
                                <text>{{item.createDate}}</text>  
                                <image class="plimg" src="../../static/img/pinglun.png" style="width: 20upx;height: 20upx;"></image>  
                                <text>评论</text>  
                                <view class="zanview" v-if="tabCurrentIndex==1"  @tap.stop="addStar(item,i)">  
                                    <image class="zanimg" :src="item.starFlag=='1'?'../../static/img/zan.png':'../../static/img/unzan.png'" style="width: 20upx;height: 20upx;"></image>  
                                    <text>赞一下</text>  
                                </view>  
                                <view class="tousuview" @tap.stop="tousuClick(item,i)">  
                                    举报屏蔽  
                                </view>  
                            </view>  

                        </view>  
                    </view>  
                    <!-- 没有文件 -->  
                    <view class="no-list" v-if="tabItem.noList">  
                        <image src="/static/empty.png" mode=""></image>  
                        <view style="color: #CCCCCC;font-size: 24upx;">暂无数据</view>  
                    </view>  
                    <uni-load-more :status="tabItem.loadingType" v-else></uni-load-more>  
                </scroll-view>    
            </swiper-item>  
        </swiper>  

scss样式

/* 顶部tabbar */  
.nav-bar {  
    display: flex;  
    height: 80upx;  
    position: relative;  
    align-items: center;  
    z-index: 10;  
    width: 100%;  
    background-color: #FFFFFF;  
    .nav-item {  
        flex: 1;  
        height: 100%;  
        display: flex;  
        align-items: center;  
        justify-content: center;  
        font-size: 30upx;  
        color: #666;  
        position: relative;  
        &:after {  
            content: '';  
            width: 0;  
            height: 0;  
            border-bottom: 4upx solid #09BF82;  
            position: absolute;  
            left: 50%;  
            bottom: 0;  
            transform: translateX(-50%);  
            transition: 0.3s;  
        }  
    }  
    .current {  
        color: #09BF82;  
        &:after {  
            width: 30%;  
        }  
    }  
}  
.list-scroll-content {  
    height: 100%;  
}  

.swiper-box {  
    height: calc(100% - 80upx);  
    width: 100%;  
    .tab-content {  
        display: flex;  
        flex-direction: column;  
        padding: 0 30upx;  
        .type-item {  
            display: flex;  
            flex-direction: column;  
            padding: 20upx 0upx;  
            border-bottom: 1upx solid #dddddd;  
            color: #666;  
            font-size: 30upx;  
            margin-bottom: 20upx;  
            .imgListView{  
                display: flex;  
                flex-wrap: wrap;  
                .imgview{  
                    margin-right: 20upx;  
                    margin-top: 10upx;  
                    width: 180upx;  
                    height: 180upx;  
                }  
            }  
            .bottomItem{  
                display: flex;  
                align-items: center;  
                justify-content: flex-start;  
                color: #999;  
                font-size: 22upx;  
                .plimg{  
                    margin-left: 30upx;  
                    margin-right: 10upx;  
                }  
                .zanview{  
                    color: #999;  
                    font-size: 22upx;  
                    .zanimg{  
                        margin-left: 30upx;  
                        margin-right: 10upx;  
                    }  
                }  
                .tousuview{  
                    margin-left: 40upx;  
                    color: #999;  
                    font-size: 22upx;  
                }  
            }  
        }  
    }  
}  

.no-list {  
    text-align: center;  
    padding-top: 280upx;  
    image {  
        width: 361upx;  
        height: 309upx;  
    }  
}

操作步骤:

在ios14.4中可以正常显示;升级为ios14.6后,swiper内容无法显示

预期结果:

预期在ios14.6中swiper内容也可以正常显示

实际结果:

在ios14.6中swiper内容无法正常显示

bug描述:

swiper使用:在ios14.4中可以正常显示;在ios14.6中swiper内容无法显示

2021-07-19 09:14 负责人:无 分享
已邀请:
8***@qq.com

8***@qq.com (作者)

实际显示图片

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