uni-app uni-grid在进入nvue页面后返回会出现页面一行的grid-item少一个
uni-app uni-grid在进入nvue页面后返回会出现页面一行的grid-item少一个
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | win10教育版 | HBuilderX |
操作步骤：
<template>
<view>
<uni-section title="功能列表" type="line" padding>
<uni-grid :column="columnNum" :square="false" :highlight="true" @change="navigateDesc">
<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
<view class="grid-item-box" style="background-color: #fff;">
<image class="image" :src="item.img" mode="aspectFill" />
<text class="text">{{item.name}}</text>
<view v-if="item.badge" class="grid-dot">
<uni-badge :text="item.badge" :type="item.type" />
</view>
</view>
</uni-grid-item>
</uni-grid>
</uni-section>
</view>
</template>
<script>
export default {
data() {
return {
columnNum:4,
list: [{
img: "/static/wzxj.png",
name: "考生签到",
url: "/pages/ksqd/qdksxz",
},{
img: "/static/wzxj.png",
name: "职位面试抽签",
url: "/pages/zwmscq/zwmscq",
},{
img: "/static/wzxj.png",
name: "考生面试抽签",
url: "/pages/ksmscq/ksmscq",
},{
img: "/static/wzxj.png",
name: "主考官考室选择",
url: "/pages/ksxz/zkgKsxz/zkgKsxz",
},{
img: "/static/wzxj.png",
name: "考官考室选择",
url: "/pages/ksxz/kgKsxz/kgKsxz",
},{
img: "/static/wzxj.png",
name: "监督员考室选择",
url: "/pages/ksxz/jdyKsxz/jdyKsxz",
},{
img: "/static/wzxj.png",
name: "引导员考室选择",
url: "/pages/ksxz/ydyKsxz/ydyKsxz",
},{
img: "/static/wzxj.png",
name: "考生抽题",
url: "/pages/ksMsg/ksct/ksct",
},{
img: "/static/wzxj.png",
name: "考生作答与评分",
url: "/pages/ksMsg/kszdpf/kszdpf",
},{
img: "/static/wzxj.png",
name: "监督员审核",
url: "/pages/ksMsg/jdysh/jdysh",
},{
img: "/static/wzxj.png",
name: "查看面试进度",
url: "/pages/zkckmsjd/zkckmsjd",
},{
img: "/static/wzxj.png",
name: "公屏面试提示",
url: "/pages/gpmsts/gpmsts",
},
]
}
},
mounted() {
console.log(this.columnNum)
},
onShow() {
console.log(this.columnNum)
this.columnNum = 4;
this.$forceUpdate();
},
onUnload() {
},
onHide() {
},
methods: {
navigateDesc(e) {
console.log(e);
if (this.list[e.detail.index].url != null) {
uni.navigateTo({
url: this.list[e.detail.index].url
});
}
},
}
}
</script>
<style>
.grid-item-box {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px 0;
}
.image {
width: 50rpx;
height: 50rpx;
}
.text {
font-size: 26rpx;
margin-top: 10rpx;
}
.grid-dot {
position: absolute;
top: 5px;
right: 15px;
}
</style>预期结果：
预期一行4个，
实际结果：
但是进入一个nvue页面以后就有概率变成三个
bug描述：
<template>
<view>
<uni-section title="功能列表" type="line" padding>
<uni-grid :column="columnNum" :square="false" :highlight="true" @change="navigateDesc">
<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
<view class="grid-item-box" style="background-color: #fff;">
<image class="image" :src="item.img" mode="aspectFill" />
<text class="text">{{item.name}}</text>
<view v-if="item.badge" class="grid-dot">
<uni-badge :text="item.badge" :type="item.type" />
</view>
</view>
</uni-grid-item>
</uni-grid>
</uni-section>
</view>
</template>在进入过nvue页面以后有概率会出现一行少一个item的情况，如附件
定义一行为4个就会变成3个，定义为3个就可能出现两个的情况…
columnNum:4,
5 回复
在使用 uni-app 的 uni-grid 组件时，如果在 nvue 页面中返回后出现一行 grid-item 少一个的情况，可能是由于 nvue 页面的渲染机制与 vue 页面不同导致的。以下是一些可能的原因和解决方案：
1. 布局问题
nvue 页面的布局机制与 vue 页面不同，nvue 使用的是原生渲染，可能会导致布局计算不准确。你可以尝试以下方法：
- 检查
uni-grid的宽度和grid-item的宽度：确保uni-grid的宽度和grid-item的宽度计算正确，避免因为宽度计算不准确导致布局错乱。 - 使用
flex布局：nvue页面支持flex布局，你可以尝试使用flex布局来替代uni-grid，手动控制grid-item的排列。
2. 页面缓存问题
uni-app 的页面缓存机制可能会导致页面返回时布局错乱。你可以尝试以下方法：
- 禁用页面缓存：在
pages.json中配置页面时，设置"disableScroll": true或"disableCache": true，禁用页面缓存。 - 手动刷新页面：在页面返回时，手动刷新页面或重新加载数据，确保布局正确。
3. 组件生命周期问题
nvue 页面的生命周期与 vue 页面有所不同，可能会导致组件在返回时没有正确更新。你可以尝试以下方法：
- 在
onShow生命周期中重新渲染：在onShow生命周期中重新渲染uni-grid，确保布局正确。 - 使用
key强制重新渲染：为uni-grid或grid-item设置key，在返回时更新key，强制重新渲染组件。
4. 使用 nvue 原生组件
如果 uni-grid 在 nvue 页面中表现不稳定，你可以考虑使用 nvue 的原生组件来实现类似的功能。例如，使用 list 或 scroll-view 结合 flex 布局来实现网格布局。
示例代码
以下是一个使用 flex 布局实现网格布局的示例：
<template>
<view class="container">
<view class="grid">
<view class="grid-item" v-for="(item, index) in items" :key="index">
{{ item }}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
items: [1, 2, 3, 4, 5, 6, 7, 8, 9]
};
}
};
</script>
<style>
.container {
flex: 1;
padding: 10px;
}
.grid {
flex-direction: row;
flex-wrap: wrap;
}
.grid-item {
width: 33.33%;
height: 100px;
justify-content: center;
align-items: center;
border: 1px solid #ccc;
}
</style>