通过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. V $ BACKUP_DATAFILE

    V$BACKUP_DATAFILE 从控制文件显示有关备份集中的控制文件和数据文件的信息. 柱 数据类型 描述 RECID NUMBER 备份数据文件记录ID STAMP NUMBER 备份数据文件记 ...

  2. CVPR2020论文解读:手绘草图卷积网络语义分割

    CVPR2020论文解读:手绘草图卷积网络语义分割 Sketch GCN: Semantic Sketch Segmentation with Graph Convolutional Networks ...

  3. 激光雷达Lidar Architecture and Lidar Design(下)

    Considerations on Lidar Design 双基地还是单基地? 双轴还是同轴? 几何重叠 向上还是向下看? 关心分散还是只关心时间? 发射器和接收器的波长 是否可调? 发射器和接收器 ...

  4. Django(60)Django内置User模型源码分析及自定义User

    前言 Django为我们提供了内置的User模型,不需要我们再额外定义用户模型,建立用户体系了.它的完整的路径是在django.contrib.auth.models.User. User模型源码分析 ...

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

    运行时栈帧结构 栈帧(Stack Frame)是用于支持虚拟机进行方法调用和方法执行的数据结构,它是虚拟机运行时数据区中的虚拟机栈(Virtual Machine Stack)的栈元素.栈帧存储了方法 ...

  6. 一文带你了解.Net互斥锁

    本文主要讲解.Net基于Threading.Mutex实现互斥锁 基础互斥锁实现 基础概念:和自旋锁一样,操作系统提供的互斥锁内部有一个数值表示锁是否已经被获取,不同的是当获取锁失败的时候,它不会反复 ...

  7. 实验2、Flask模板、表单、视图和重定向示例

    实验内容 1. 实验内容 表单功能与页面跳转功 能是Web应用程序的基础功能,学习并使用他们能够更好的完善应用程序的功能.Flask使用了名为Jinja2的模板引擎,该引擎根据用户的交互级别显示应用程 ...

  8. 【HTML】同页面锚点跳转

    跳转: <a href="#maodian001">去吧!</a> 锚点: <a id="maodian001"></ ...

  9. VBS脚本编程(10)——编写WMI脚本

    WMI介绍 1.WMI是什么? WMI--Windows管理规范(Windows Management instrumentation). 是一项核心的Windows管理技术. 采用统一的.基于开放标 ...

  10. 关于MySql数据库误操作数据找回的办法

    先讲个事,前段时间,系统长时间不用的一个功能被开放出来了,想当然的我没有在测试平台上测试,直接操作了正式系统(的确是我不严谨),导致好多数据异常,页面展示错乱了.于是我想到的第一个就是进行备份还原.项 ...