通过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. ZooKeeper学习笔记三:使用ZooKeeper实现一个简单的配置中心

    作者:Grey 原文地址:ZooKeeper学习笔记三:使用ZooKeeper实现一个简单的配置中心 前置知识 完成ZooKeeper集群搭建以及熟悉ZooKeeperAPI基本使用 需求 很多程序往 ...

  2. DeepLabV3+语义分割实战

    DeepLabV3+语义分割实战 语义分割是计算机视觉的一项重要任务,本文使用Jittor框架实现了DeepLabV3+语义分割模型. DeepLabV3+论文:https://arxiv.org/p ...

  3. ISP_DPC坏点矫正

    ISP_DPC坏点矫正 1. 坏点介绍 图像坏点(Bad pixel) : 图像传感器上光线采集点(像素点)所形成的阵列存在工艺上的缺陷,或光信号进行转化为电信号的过程中出现错误,从而会造成图像上像素 ...

  4. GPU端到端目标检测YOLOV3全过程(下)

    GPU端到端目标检测YOLOV3全过程(下) Ubuntu18.04系统下最新版GPU环境配置 安装显卡驱动 安装Cuda 10.0 安装cuDNN 1.安装显卡驱动 (1)这里采用的是PPA源的安装 ...

  5. 深入理解java虚拟机笔记Chapter4

    JDK命令行工具 其中的重中之重是 jstat 命令!而它最常用的参数就是 -gcutil,使用格式如下: jstat -gcutil [pid] [intervel] [count] 输出如下 D: ...

  6. Mybatis中9种经典的设计模式!你知道几个?

    虽然我们都知道有23个设计模式,但是大多停留在概念层面,真实开发中很少遇到.Mybatis源码中使用了大量的设计模式,阅读源码并观察设计模式在其中的应用,能够更深入的理解设计模式. Mybatis至少 ...

  7. 解Bug之路-ZooKeeper集群拒绝服务

    解Bug之路-ZooKeeper集群拒绝服务 前言 ZooKeeper作为dubbo的注册中心,可谓是重中之重,线上ZK的任何风吹草动都会牵动心弦.最近笔者就碰到线上ZK Leader宕机后,选主无法 ...

  8. expdp数据泵导出数据汇总

    [oracle@enmo1 ~]$ mkdir datadump[oracle@enmo1 ~]$ cd datadump/[oracle@enmo1 datadump]$ pwd/home/orac ...

  9. 办公利器!用Python快速将任意文件转为PDF

    痛点: 相信大家都会遇到一种场景.老师/上司要求你把某个文件转为pdf,并且是一批(不止一个,一个的话手动就可以搞定),并且这种是枯燥无聊的工作,既没有什么技术含量又累. 试想一下,如果我把这些文件放 ...

  10. 『无为则无心』Python基础 — 11、Python中的数据类型转换

    目录 1.为什么要进行数据类型转换 2.数据类型转换本质 3.数据类型转换用到的函数 4.常用数据类型转换的函数 (1)int()函数 (2)float()函数 (3)str()函数 (4)bool( ...