微信小程序-父子页面传值

news/2024/7/20 3:02:55 标签: 微信小程序, 小程序

父子页面传值

父页面向子页面传值

方法一:

父页面:

1. /page/xxx/xxx?id=1

子页面:

onLoad:function(option){
}

方法二

  1. <bindtap=“func” data-xxx=””>

子页面向父页面传值

定义父子页面

父页面:hotspot

子页面:topic

设计:hotspot页面,点击“请选择话题”,然后跳转到topic页面,topic页面显示默认的 热点列表;点击任意热点话题,跳转回hotspot页面并显示已选择的话题title。

hotspot.wxml

<view bindtap="chooseTopic">{{topicTitle}}</view>

hotspot.js

data: {
	topicTitle:"请选择话题"
},
/* 跳转到topic页面 */
chooseTopic: function(){
	wx.navigateTo({
		url: '/pages/topic/topic',
  })
},
/* 设置topicTitle */
setTopicTitle: function(d){
  this.setData({topicTitle:d.title});
}

topic.wxml

<view>
  <view class="item" wx:for="{{topicList}}" bindtap="chooseTopic" data-topic="{{item}}">
    <text >#{{item.title}}</text>
    <text>查看:{{item.view}}</text>
  </view>
</view>

topic.js

    data: {
			/* 实际项目中,数据一般从后端获取,此处仅作模拟用 */
      topicList:[
        {id:0, title:"人工智能", view:100},
        {id:1, title:"新能源汽车", view:95}
      ]
    },
    chooseTopic: function(data){
      var topicInfo = data.currentTarget.dataset.topic;
      /* 将title信息传递给hostspot页面 */
      var pages = getCurrentPages();
      var prevPage = pages[pages.length-2];
      prevPage.setTopicTitle(topicInfo);
      wx.navigateBack({});
    },

知识点

wx.navigateTo

wx.navigateBack

请添加图片描述

getCurrentPages

获取当前页面栈


http://www.niftyadmin.cn/n/5296927.html

相关文章

ssm基于web的马病管理系统设计与实现+jsp论文

摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;马病信息因为其管理内容繁杂&#xff0c;管理数量繁多导致手工进行处理不能满足广大…

[GDOUCTF 2023]泄露的伪装

[GDOUCTF 2023]泄露的伪装 wp 进入页面&#xff0c;会发现什么也没有&#xff1a; 目录扫描&#xff1a; dirsearch -u “http://node4.anna.nssctf.cn:28588/” 扫出了两个文件&#xff0c;都去访问一下&#xff0c;test.txt 是源码的副本&#xff0c;由于是文本文件&…

单挑力扣(LeetCode)SQL题:1285. 找到连续区间的开始和结束数字(难度:中等)

给题目&#xff1a;1285. 找到连续区间的开始和结束数字 &#xff08;通过次数8,111 | 提交次数9,900&#xff0c;通过率81.93%&#xff09; 表&#xff1a;Logs ------------------------ | Column Name | Type | ------------------------ | log_id | int …

菜鸟学习vue3笔记-vue hooks初体验

import { ref } from "vue"; export default function () {let a1 ref(1);let a2 ref(5);let c ref(0);function add() {a1.value;a2.value;}return {add,a1,a2,c,}; }<template><div><p>第一个数字{{ a1 }}</p><p>第二个数字{{ a2…

关于HTTPS

目录 什么是加密 对称加密 非对称加密 中间人攻击 引入证书 HTTPS是一个应用层的协议,是在HTTP协议的基础上引入了一个加密层. HTTP协议内容都是按照文本的方式明文传输,这就导致在传输的过程中出现一些被篡改的情况. 运营商劫持事件 未被劫持的效果,点击下载按钮,就会…

实践:基于双向LSTM模型完成文本分类任务

目录 1 数据处理 1.1 数据加载 1.2 构造Dataset类 1.3 封装DataLoader 2 模型构建 3 模型训练 4 模型评价 5 模型预测 5 拓展实验 5.1 使用Pytorch内置的单向LSTM进行文本分类实验 ​编辑 5.2 使用Paddle内置的单向LSTM进行文本分类实验 总结 电影评论可以蕴含…

【HarmonyOs Arkts笔记】Arkts ForEach循环使用

说明 ForEach循环数组对象时 要指定对象的唯一标识 例如 id&#xff0c;否则只会显示第一个 State tabsList: object[] [{ name: 砍价活动, id: 1, icon: https://php-b2c.likeshop.cn/uploads/images/2022062414322367e6a5479.png },{ name: 拼团活动, id: 2, icon: https:…

配置yum镜像源

文章目录 前言一、配置yum源1.清除本地配置2.挂载镜像3.新增本地源配置4.加载本地yum源&测试 总结 前言 在内网环境的时候&#xff0c;yum无法正常连接互联网安装软件&#xff0c;这时候我们可以挂载系统镜像文件来下载。 一、配置yum源 1.清除本地配置 cp -rf /etc/yum…