2***@qq.com
2***@qq.com
  • 发布:2024-01-19 14:10
  • 更新:2024-03-06 22:13
  • 阅读:319

【报Bug】uni-app x图片widthFix模式下有间距

分类:uni-app x

产品分类: uni-app x/App

PC开发环境操作系统: Windows

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

HBuilderX版本号: 3.99

手机系统: Android

手机系统版本号: Android 14

手机厂商: 小米

手机机型: 小米13

HBuilderX安装路径: F:\tool\develop\HBuilderX.3.96.2023110403\HBuilderX

示例代码:
<template>  
    <list-view class="list" :rebound="false" :scroll-y="true" :custom-nested-scroll="true"  
        @scrolltolower="loadData(null)">  
        <list-item class="list-item" v-for="(item, index) in dataList" :key="item.id">  
            <image :src="item.image_url" mode="widthFix" @click="handPrive(index)"></image>  
        </list-item>  
    </list-view>  
</template>  

<script>  
    // import detailModel from './viewModel/detailModel.uts'  
    // import type { ListItem } from './viewModel/detailModel.uts'  
    type ListItem = {  
        id : number,  
        photo_id : number,  
        image_url : string,  
    }  
    const PAGE_SIZE = 10; // 最大值 10  

    export default {  
        data() {  
            return {  
                id: '',  
                loading: false,  
                dataList: [] as ListItem[],  
                isEnded: false,  
                loadingError: '',  
                $currentPage: 1  
            }  
        },  
        onLoad(options : OnLoadOptions) {  
            if (options.has('id')) {  
                this.id = options.get('id')!  
            }  
            this.loadData(null)  
        },  
        methods: {  
            refreshData(loadComplete : (() => void) | null) {  
                this.loading = false  
                this.isEnded = false  
                this.dataList.length = 0  
                this.$currentPage = 1  
                this.loadData(loadComplete)  
            },  
            loadData(loadComplete : (() => void) | null) {  
                if (this.loading || this.isEnded) {  
                    return  
                }  
                this.loading = true  
                const data = [  
                    { "id": 101, "image_url": "https://i.miji.bid/2024/01/19/49cc865cc0f70d95a224199bb47d1aa6.jpeg", "photo_id": 1 },  
                    { "id": 100, "image_url": "https://i.miji.bid/2024/01/19/e2803f895f722f4b63d5d314e472bf50.jpeg", "photo_id": 1 },  
                    { "id": 99, "image_url": "https://i.miji.bid/2024/01/19/722ddb40a847e8853e302c8c8e998184.jpeg", "photo_id": 1 },  
                    { "id": 98, "image_url": "https://i.miji.bid/2024/01/19/6d5a975ad06ac3d5f34c25b016531dc4.jpeg", "photo_id": 1 },  
                    { "id": 97, "image_url": "https://i.miji.bid/2024/01/19/42cb65c413e5e3198d928d013a791ff0.jpeg", "photo_id": 1 },  
                    { "id": 96, "image_url": "https://i.miji.bid/2024/01/19/24e6f93990cf94c4a2af36a6c3b3d9ba.jpeg", "photo_id": 1 },  
                    { "id": 95, "image_url": "https://i.miji.bid/2024/01/19/2d9172f043e22066347c62497bc47c1e.jpeg", "photo_id": 1 },  
                    { "id": 94, "image_url": "https://i.miji.bid/2024/01/19/bb5ecb79a58ad39478b89680d803e99a.jpeg", "photo_id": 1 },  
                    { "id": 93, "image_url": "https://i.miji.bid/2024/01/19/120fcd80a960d6cd3ff801e05f65b3b8.jpeg", "photo_id": 1 },  
                    { "id": 92, "image_url": "https://i.miji.bid/2024/01/19/3bb1a6c576acd7b3ea5c27e448c0a3d1.jpeg", "photo_id": 1 },  
                ] as ListItem[]  
                this.dataList = data  
                this.isEnded = true  
                this.loading = false  
                if (loadComplete != null) {  
                    loadComplete()  
                }  
                // detailModel.getImgList({  
                //  id: this.id,  
                //  current: this.$currentPage,  
                //  size: PAGE_SIZE  
                // }).then(data => {  
                //  console.log(JSON.stringify(data))  
                //  this.dataList.push(...data)  
                //  if (data.length !== PAGE_SIZE) {  
                //      this.isEnded = true  
                //  } else {  
                //      this.$currentPage++  
                //  }  
                // }).catch((err) => {  
                //  this.loadingError = (err as Error).message  
                // }).finally(() => {  
                //  this.loading = false  
                //  if (loadComplete != null) {  
                //      loadComplete()  
                //  }  
                // })  
            },  
            handPrive(current : number) {  
                const urls = [] as string[]  
                this.dataList.forEach((el : ListItem) => {  
                    urls.push(el.image_url)  
                })  
                uni.previewImage({  
                    urls,  
                    current,  
                    indicator: 'number',  
                    loop: true  
                })  
            }  
        }  
    }  
</script>  

<style lang="scss" scoped>  
    .list {  
        flex: 1;  
        background-color: #fff;  
    }  
</style>

操作步骤:

请求漫画图片列表(分页加载)
渲染widthFix模式
图片之间出现见图
页面滚动隐藏元素在展示间距消失

预期结果:

渲染后图片无间距

实际结果:

图片有间距

bug描述:

图片列表全部采用widthFix时候,会有间距,当页面滚动元素隐藏后在展示间距消失,具体请参考压缩包中视频

2024-01-19 14:10 负责人:DCloud_Android_ST 分享
已邀请:

最佳回复

DCloud

DCloud

HBuilderX 4.02.2024030621-alpha 已修复。

piaoyi_UI

piaoyi_UI - 【插件开发】【专治疑难杂症】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群:120594820,代表作灵感实用工具小程序

会不会不是widthFix的原因,图片不在任何东西,有时候下面会有部分留白,使用块元素就可以解决

  • 2***@qq.com (作者)

    image是放在list-item下面的,感觉有点关系,并且图片高度并没有完全加载。现在临时解决方案是把图片的宽高比例保存了起来,对image设置指定宽高

    2024-01-20 13:54

DCloud_Android_ST

DCloud_Android_ST

测试例的css 补充下 class="list"、class="list-item"

  • 2***@qq.com (作者)

    以补充.list, 发现问题是list-item高度在图片未渲染完成就固定了高度, 图片widthFix后会变高而list-item高度未变造成图片展示不完全

    2024-01-20 17:24

  • 申庭教育

    大佬,我这个问题很紧急,可以去看下吗?【报Bug】1.hbuliderx3.96 夜间模式开启后,安卓10以下的手机夜间模式不生效正常,但是该手机的nvue也横屏时会重载nvue页面

    2024-02-02 13:57

要回复问题请先登录注册