<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",
// badge: '0',
// type: "primary"
},{
img: "/static/wzxj.png",
name: "职位面试抽签",
url: "/pages/zwmscq/zwmscq",
// badge: '0',
// type: "primary"
},{
img: "/static/wzxj.png",
name: "考生面试抽签",
url: "/pages/ksmscq/ksmscq",
// badge: '0',
// type: "primary"
},{
img: "/static/wzxj.png",
name: "主考官考室选择",
url: "/pages/ksxz/zkgKsxz/zkgKsxz",
// badge: '0',
// type: "primary"
},{
img: "/static/wzxj.png",
name: "考官考室选择",
url: "/pages/ksxz/kgKsxz/kgKsxz",
// badge: '0',
// type: "primary"
},{
img: "/static/wzxj.png",
name: "监督员考室选择",
url: "/pages/ksxz/jdyKsxz/jdyKsxz",
// badge: '0',
// type: "primary"
},{
img: "/static/wzxj.png",
name: "引导员考室选择",
url: "/pages/ksxz/ydyKsxz/ydyKsxz",
// badge: '0',
// type: "primary"
},{
img: "/static/wzxj.png",
name: "考生抽题",
url: "/pages/ksMsg/ksct/ksct",
// badge: '0',
// type: "primary"
},{
img: "/static/wzxj.png",
name: "考生作答与评分",
url: "/pages/ksMsg/kszdpf/kszdpf",
// badge: '0',
// type: "primary"
},{
img: "/static/wzxj.png",
name: "监督员审核",
url: "/pages/ksMsg/jdysh/jdysh",
// badge: '0',
// type: "primary"
},{
img: "/static/wzxj.png",
name: "查看面试进度",
url: "/pages/zkckmsjd/zkckmsjd",
// badge: '0',
// type: "primary"
},{
img: "/static/wzxj.png",
name: "公屏面试提示",
url: "/pages/gpmsts/gpmsts",
// badge: '0',
// type: "primary"
},
],
}
},
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;
// position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
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>
- 发布:2022-03-31 17:37
- 更新:2023-08-15 13:26
- 阅读:625
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10教育版
HBuilderX类型: 正式
HBuilderX版本号: 3.2.12
手机系统: Android
手机系统版本号: Android 7.1.1
手机机型: 平板电脑
页面类型: nvue
vue版本: vue2
打包方式: 离线
项目创建方式: HBuilderX
操作步骤:
预期结果:
预期一行4个,
预期一行4个,
实际结果:
但是进入一个nvue页面以后就有概率变成三个
但是进入一个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,
9***@qq.com (作者)
更新成最新的版本还是有呢....
2022-04-01 09:37
9***@qq.com (作者)
我这个app才刚开始写。。。就三个页面。。。基本是最简单的逻辑了
2022-04-01 09:37