通过uni-app中当uni.navigateTo传的参数为object时,通过传递的不同参数,在显示单页面内通过v-if判断显示出对应的内容(可实现多页面效果)

起始页跳转到对应页面,并传递参数(object),如下图所示:

<template>
<div>
<div class="item" v-for="(item,index) in className" :key="index" @click="nextPage(item)">
<div class="label">{{item.name}}</div>
<div class="right-icon"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
className:[{
type:1,
name: '实体课'
},{
type:2,
name: '讲座'
}, {
type: 3,
name: '辅导课'
}, {
type: 4,
name: '培训课'
}, {
type: 5,
name: '录播课'
}]
}
},
methods: {
nextPage(type) {
uni.navigateTo({
url: 'lesson-time?type=' + JSON.stringify(type)//将传递的对象转化成字符串
})
}
}
}
</script>

对应页面接收参数,如下图所示:

v-for和v-if不建议一起使用!!!

<template>
<div class="container"> <div class="teacher-info">
<scroll-view scroll-y @scrolltolower="scrolltolower" class="teacher-info-scrool">
<!-- 实体课 -->
<div class="teacher-info-box" v-for="(item,index) in lessonList1" :key="index.id" v-if="newpage == 1">
<div class="teacher-info-box1">
<div>{{item.name}}</div>
<div>{{item.phone}}</div>
</div>
<div class="teacher-info-box2">
<div class="info-box box1">{{item.title}} <span class="info-time">{{item.times}}</span></div>
<div class="info-box info-box-btn">讲师:{{item.teacher}}
<span class="detail-btn" @click="nextPage1(item)">详情</span>
</div>
<div class="info-box">校区:{{item.campus}}</div>
<div class="info-box">课程:{{item.class}}</div>
<div class="info-box">实际上课人数:{{item.real_num}}人</div>
<div class="info-box">上课时间:{{item.date}} <span class="info-time">
{{item.datetime}}</span></div>
</div>
<div class="teacher-info-box3"
:class="item.state == 2 ? ' wait' : item.state == 3 ? ' refuse' : ''">
{{stateFliter(item.state)}}
</div>
</div> </scroll-view>
</div>
</div>
</template> <script>
export default { data() {
return {
newpage: '',
lessonList1: [{
name:'xxxxx',
phone: '18297955237',
title: '非钻石班、医学特招班班种',
times: '2021-06-01 12:20',
teacher: '汪伟',
campus: '徽商校区',
class: '公共语文',
real_num: '1250',
date: '2021-06-01 ',
datetime: ' 08:00~11:00'
}]
}
}, onLoad(options) {
console.log(JSON.parse(options.type));
this.newpage = JSON.parse(options.type).type;
uni.setNavigationBarTitle({
title: JSON.parse(options.type).name
});
}

所有关键代码如上,可根据需求自行修改

uni-app中当uni.navigateTo传的参数为object时,通过传递的不同参数,在显示单页面内通过v-if判断显示出对应的内容(可实现多页面效果)的更多相关文章

  1. uni app中使用自定义图标库

    项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...

  2. uni app中关于图片的分包加载

    因为在项目中使用了大量的静态资源图片,使得主包体积过大, 而把这些图片全部放到服务器又有点麻烦,就想能不能把图片也分包,但是直接放在分包下的话导致图片资源找不到了, 在社区中看到大佬分享的十分有用,特 ...

  3. 织梦DEDECMS更换目录后页面内的图片和缩略图无法显示解决方法

    http://www.win8f.com/seoyouhua/6609.html 很多人碰到织梦更换目录后内容图片和缩略图无法显示的问题,在此,慧鸿网络特地搜集整理了一篇关于织梦出现缩略图和内容无法显 ...

  4. MyBatis 中传递多个参数的 4 种方式

    方式 1 :封装成对象入参  #{对应实体类的属性} //UserMapper.java 接口 /** * 多条件查询:根据用户名称(模糊查询)和用户角色查询用户列表(参数:对象入参) * @para ...

  5. 创意设计展示:折叠效果在移动 App 中的应用

    在今天在移动 App 界面设计中,你可以看到不同创意类型的视觉效果.特别是在 Dribbble 上面,有有很多应用程序的 UI 概念设计,让你惊叹.当然,他们大多只是作为一个概念设计,可能永远也不会成 ...

  6. 天猫京东app中常见的上下滚动轮播效果如何实现?

    前段时间,公司安排我制作一个上下滚动轮播效果,类似于我们在天猫京东app中常见的这样: 哇kao!这个我完全不会呀??? 幸好,前几天一个朋友在朋友圈分享了一篇推文.瞬间引领我走出了迷茫,这个教程特别 ...

  7. uni app canvas 不生效

    canvas 创建canvas绘图上下文. <canvas style="width: 300px; height: 200px;" canvas-id="firs ...

  8. ASP.NET简单实现APP中用户个人头像上传和裁剪

    最近有个微信项目的用户个人中心模块中,客户要求用户头像不仅仅只是上传图片,还需要能对图片进行裁剪.考虑到flash在IOS和Android上的兼容性问题,于是想着能从js这块入手,在网上发现了devo ...

  9. 如何在移动端app中应用字体图标icon fonts

    How to use icon fonts in your mobile apps 在任何APP设计中实现可图形的矢量缩放最完美的方式是使用字体图标. 移动端的设计变的越来越复杂.原因在于多样的屏幕尺 ...

随机推荐

  1. 【注意力机制】Attention Augmented Convolutional Networks

    注意力机制之Attention Augmented Convolutional Networks 原始链接:https://www.yuque.com/lart/papers/aaconv 核心内容 ...

  2. 摄像头ISP系统原理(下)

    摄像头ISP系统原理(下) l  WDR(Wide Dynamic Range)------宽动态 动态范围(Dynamic Range)是指摄像机支持的最大输出信号和最小输出信号的比值,或者说图像最 ...

  3. 达芬奇架构NPU

    达芬奇架构NPU 达芬奇架构的核心优势是什么?如何更好地赋能麒麟990? 达芬奇架构,是华为自研的面向AI计算特征的全新计算架构,具备高算力.高能效.灵活可裁剪的特性,是实现万物智能的重要基础.具体来 ...

  4. MindSpore整体架构介绍

    MindSpore整体架构介绍 MindSpore框架架构总体分为MindSpore前端表示层.MindSpore计算图引擎和MindSpore后端运行时三层. MindSpore前端表示层(Mind ...

  5. RTOS诊断和错误检查

    RTOS诊断和错误检查 RTOS diagnostics and error checking 查看RTOS显示系列 错误处理不太可能是任何用于嵌入式系统应用程序的操作系统的主要功能.这是资源限制的必 ...

  6. Spring——Bean的作用域

    Spring中Bean的作用域有五种,分别是singleton.prototype.request.session.globalSession.其中request.session.globalSess ...

  7. 还在担心写的一手烂SQL,送你4款工具

    对于正在运行的mysql,性能如何,参数设置的是否合理,账号设置的是否存在安全隐患,你是否了然于胸呢? 俗话说工欲善其事,必先利其器,定期对你的MYSQL数据库进行一个体检,是保证数据库安全运行的重要 ...

  8. docker创建和使用mysql

    container和image是两种不同的概念,image即指存在的镜像,container指docker运行起来后image的实例. 当使用docker kill 把某个正在运行的实例kill掉之后 ...

  9. c++性能测试工具:google benchmark进阶(一)

    这是c++性能测试工具教程的第四篇文章,从本篇开始我将逐步介绍一些性能测试的高级技巧. 前三篇教程可以看这里: c++性能测试工具:google benchmark入门(一) c++性能测试工具:go ...

  10. 我的新书《C++服务器开发精髓》终于出版啦

    一.千呼万唤始出来 亲爱的各位读者,我的新书<C++ 服务器开发精髓>终于终于终于与大家见面了,图书如下: 图书的封面设计很精美,当然内容一定不负众望.因出版社老师要求提供一张照片放到封面 ...