uni-app中当uni.navigateTo传的参数为object时,通过传递的不同参数,在显示单页面内通过v-if判断显示出对应的内容(可实现多页面效果)
通过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判断显示出对应的内容(可实现多页面效果)的更多相关文章
- uni app中使用自定义图标库
项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...
- uni app中关于图片的分包加载
因为在项目中使用了大量的静态资源图片,使得主包体积过大, 而把这些图片全部放到服务器又有点麻烦,就想能不能把图片也分包,但是直接放在分包下的话导致图片资源找不到了, 在社区中看到大佬分享的十分有用,特 ...
- 织梦DEDECMS更换目录后页面内的图片和缩略图无法显示解决方法
http://www.win8f.com/seoyouhua/6609.html 很多人碰到织梦更换目录后内容图片和缩略图无法显示的问题,在此,慧鸿网络特地搜集整理了一篇关于织梦出现缩略图和内容无法显 ...
- MyBatis 中传递多个参数的 4 种方式
方式 1 :封装成对象入参 #{对应实体类的属性} //UserMapper.java 接口 /** * 多条件查询:根据用户名称(模糊查询)和用户角色查询用户列表(参数:对象入参) * @para ...
- 创意设计展示:折叠效果在移动 App 中的应用
在今天在移动 App 界面设计中,你可以看到不同创意类型的视觉效果.特别是在 Dribbble 上面,有有很多应用程序的 UI 概念设计,让你惊叹.当然,他们大多只是作为一个概念设计,可能永远也不会成 ...
- 天猫京东app中常见的上下滚动轮播效果如何实现?
前段时间,公司安排我制作一个上下滚动轮播效果,类似于我们在天猫京东app中常见的这样: 哇kao!这个我完全不会呀??? 幸好,前几天一个朋友在朋友圈分享了一篇推文.瞬间引领我走出了迷茫,这个教程特别 ...
- uni app canvas 不生效
canvas 创建canvas绘图上下文. <canvas style="width: 300px; height: 200px;" canvas-id="firs ...
- ASP.NET简单实现APP中用户个人头像上传和裁剪
最近有个微信项目的用户个人中心模块中,客户要求用户头像不仅仅只是上传图片,还需要能对图片进行裁剪.考虑到flash在IOS和Android上的兼容性问题,于是想着能从js这块入手,在网上发现了devo ...
- 如何在移动端app中应用字体图标icon fonts
How to use icon fonts in your mobile apps 在任何APP设计中实现可图形的矢量缩放最完美的方式是使用字体图标. 移动端的设计变的越来越复杂.原因在于多样的屏幕尺 ...
随机推荐
- 3D-LiDAR
3D-LiDAR 结合光学+激光扫描+数据处理技术,实现对人和物体的无盲点检测. 利用专有光学技术实现高精度,高分辨率三维扫描. 到目前为止,传感器只能准确地检测出物体的存在,而且很难感知目标的大小和 ...
- CUDA C++编程接口:编译
CUDA C++编程接口:编译 一.概述 CUDA C++为熟悉C++编程语言的用户提供了一个简单的路径,以方便地编写程序以执行该设备. 它由一组最小的扩展到C++语言和运行库. 在编程模型中引入了核 ...
- Netty 框架学习 —— ByteBuf
概述 网络数据的基本单位总是字节,Java NIO 提供了 ByteBuffer 作为它的字节容器,但这个类的使用过于复杂.Netty 的 ByteBuf 具有卓越的功能性和灵活性,可以作为 Byte ...
- 量子:基于ERP块对的两步量子直接通信
学习论文: 题目:Two-step quantum direct communication protocol using the Einstein-Podolsky-Rosen pair block ...
- 【NX二次开发】修改dlx对话框标题的方法
修改dlx名称, 修改对话框标题的方法: theDialog->TopBlock()->FindBlock("Dialog")->GetProperties()- ...
- 「10.13」毛一琛(meet in the middle)·毛二琛(DP)·毛三琛(二分+随机化???)
A. 毛一琛 考虑到直接枚举的话时间复杂度很高,我们运用$meet\ in\ the\ middle$的思想 一般这种思想看似主要用在搜索这类算法中 发现直接枚举时间复杂度过高考虑枚举一半另一半通过其 ...
- Linux关闭打开防火墙命令
Linux下打开和关闭防火墙 1.及时生效,重启后复原 关闭:service iptables stop 开启:service iptalbes start 查看状态:service iptabl ...
- Bootstrap中宽度大于指定宽度时有空白的解决方法
<div class="container-fluid"></div> 其中container-fluid的作用是占100%
- 单元测试布道二:在全新的 DDD 架构上进行单元测试
目录 回顾 dotnet 单元测试相关的工具和知识 可测试性 不确定性/未决行为 依赖于实现:不可 mock 复杂继承/高耦合代码:测试困难 实战:在全新的 DDD 架构上进行单元测试 需求-迭代1: ...
- centos 8.3安装 OPENJDK
centos 8.3安装 OPENJDK 查找可安装的OPENJDK [root@xamppr10 ~]# yum search java | grep -i --color openjdk 命令执行 ...