<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>
- 发布:2024-01-19 14:10
- 更新:2024-03-06 22:13
- 阅读:541
产品分类: uni-app x/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX版本号: 3.99
手机系统: Android
手机系统版本号: Android 14
手机厂商: 小米
手机机型: 小米13
HBuilderX安装路径: F:\tool\develop\HBuilderX.3.96.2023110403\HBuilderX
示例代码:
操作步骤:
请求漫画图片列表(分页加载)
渲染widthFix模式
图片之间出现见图
页面滚动隐藏元素在展示间距消失
请求漫画图片列表(分页加载)
渲染widthFix模式
图片之间出现见图
页面滚动隐藏元素在展示间距消失
预期结果:
渲染后图片无间距
渲染后图片无间距
实际结果:
图片有间距
图片有间距
bug描述:
图片列表全部采用widthFix时候,会有间距,当页面滚动元素隐藏后在展示间距消失,具体请参考压缩包中视频
最佳回复
Diligent_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
测试例的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