uni-app x图片在widthFix模式下存在间距问题

uni-app x图片在widthFix模式下存在间距问题

产品分类

uni-app x/App

PC开发环境

手机开发环境

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>  
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()  
            }  
        },  
        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时候,会有间距，当页面滚动元素隐藏后在展示间距消失,具体请参考压缩包中视频