微信小程序事件和页面跳转

news/2024/5/17 7:52:48/文章来源:https://blog.csdn.net/m0_72694993/article/details/127021983

一、页面跳转

1.非TabBar页面

一个小程序拥有多个页面,我们通过wx.navigateTo进入一个新的页面

我们通过下边点击事件实现页面跳转进行代码实现及参考

wx.navigateBack()回退到上一个页面

wx.redirectTo(url)删除当前页面跳转到指定页面

2.TabBar页面:

wx.switchTab只能打开TabBar

3.其他方法

二、事件绑定

1.常见的事件类型

 

在前边加bind或catch就可以绑定事件处理函数了,他们不同的是,catch没有事件冒泡,bind有事件冒泡,还有capture-bind与bind不同的是他是事件捕获(从外到内)

 

2.在对应的js文件进行定义事件处理函数

在data下边定义事件处理函数

   onclick(){console.log("nihao");},

3.事件处理函数的调用

我们通过bindtap(根据上边的表可以看到tap是手指触碰马上离开)

我们通过bindtap绑定事件处理函数onclick

<view style="color :blue;">你好帅</view>
<button bindtap="onclick">click</button>

4.实现页面跳转的方法wx.navigateTo

其中url是我们要跳转到的页面

success是我们成功的时候执行的函数

fail是我们失败的时候执行的函数

complete是无论成功失败都执行的函数

 wx.navigateTo({url: 'url',success:(result)=>{},fail:()=>{},complete:()=>{}});

5.实现页面跳转

我们在url中写入我们想要跳转的页面即可

 onclick(){wx.navigateTo({url: '../index/index',success:(result)=>{},fail:()=>{},complete:()=>{}});},

6.实现多页面跳转的简化

当我们实现多页面的跳转的时候可以设置多个处理函数,也可以通过一个处理函数绑定不同的url进行实现多页面的跳转

第一种(普通实现):

首先在js文件定义多个处理方法

  onclick(){wx.navigateTo({url: '../index/index',})},onclick2(){wx.navigateTo({url: '../index/index2',})},

然后在页面布局绑定事件即可

<view style="color :blue;">你好帅</view>
<button bindtap="onclick">click</button>
<button bindtap="onclick2">click2</button>

第二种(简化实现):

在js文件中data中定义url1和url2,然后接受到dataset中的参数赋值给url属性进行跳转

其中dataset位于事件的target属性下

  data: {url1:"../index/index",url2:"../index/index2"
,tnt:{name:"lihua",index:0,},cor: 'blue',ifs:1,list:[1.2,2.3,3.4,4.5],list2:[{name:"lifang",id:1},{name:"lili",id:2},{name:"xiaoi",id:3}]},onclick(event){wx.navigateTo({url: event.target.dataset.url,})},

然后在按钮中自定义属性通过dataset方法传入事件处理函数

<view style="color :blue;">你好帅</view>
<button data-url='{{url1}}' bindtap="onclick">click</button>
<button data-url='{{url2}}' bindtap="onclick">click2</button>

事件中的属性如下

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_13265.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

最新AWVS14.9.220913107 支持Windows使用教程(附下载地址)

主要内容&#xff1a;awvs14.9下载、awvs14.9使用教程、awvs14.9安装教程、awvs14.9批量扫描、awvs14.9用法、awvs最新版下载 使用方法 一键PJ 一键PJ则只需要在安装Acunetix软件后&#xff0c;运行pj工具即可 通用思路 修改hosts文件&#xff08;C:\Windows\System32\driv…

15天深度复习JavaWeb的详细笔记(十一)——VUE、Element

文章目录demo11-VUE、Element1&#xff0c;VUE1.1 概述1.2 快速入门1.3 Vue 指令1.3.1 v-bind & v-model 指令1.3.2 v-on 指令1.3.3 条件判断指令1.3.4 v-for 指令1.4 生命周期2&#xff0c;Element2.1 快速入门2.2 Element 布局2.2.1 Layout 局部2.2.2 Container 布局容器…

Spring 注解

事务注解 使用注解 EnableTransactionManagement 开启事务支持后&#xff0c;然后在访问数据库的Service方法上添加注解 Transactional 便可 * EnableTransactionManagement&#xff0c;会额外加载 4 个 bean * BeanFactoryTransactionAttributeSourceAdvisor 事务切面类 …

C# ASP.NET Web Core API (.NET 6.0)

目录 一、简介 二、创建项目 三、启动项目 四、开放访问权限 五、添加其他的API 结束 一、简介 ASP.NET Core Web API 是 ASP.NET Core MVC 的一个功能。ASP.NET Core MVC 包含了对 Web API 的支持。可以构建多种客户端的 HTTP 服务。ASP.NET Core Web API可用于在 .NET…

LeetCode 0328. 奇偶链表

【LetMeFly】328.奇偶链表 力扣题目链接&#xff1a;https://leetcode.cn/problems/odd-even-linked-list/ 给定单链表的头节点 head &#xff0c;将所有索引为奇数的节点和索引为偶数的节点分别组合在一起&#xff0c;然后返回重新排序的列表。 第一个节点的索引被认为是 奇…

8-Arm PEG-ACA,8-Arm PEG-Acrylamide,八臂-聚乙二醇-丙烯酰胺可用于自由基引发剂

一&#xff1a;产品描述 1、名称 英文&#xff1a; 8-Arm PEG-ACA 8-Arm PEG-Acrylamide 中文&#xff1a; 八臂-聚乙二醇-ACA 2、CAS编号&#xff1a;N/A 3、所属分类&#xff1a;Acrylate/Acrylamide PEG Multi-arm PEGs 4、分子量&#xff1a;可定制 5、质量控制&a…

C++之模拟实现<unordered_set/map>及位图和布隆过滤器

目录&#x1f308;前言&#x1f681;1、哈希表的改造&#x1f682;2、模拟实现的完整代码&#x1f683;3、哈希表的应用&#x1f684;3.1、位图的概念&#x1f685;3.2、位图的实现&#x1f686;3.3、位图完整代码&#x1f689;3.4、位图的应用&#x1f687;4、位图的变形&…

qt中的qmake.conf文件

qmake.conf文件是qt用于存放系统平台和编译器相关默认值的配置文件。qt为所支持的各种系统平台和对应编译器附加了相关的配置文件。其位置在QtInstallDIr/Qt5.12.0\5.12.0\msvc2015_64\mkspecs中。 windows台式机系统的默认配置​​​​​​这里的每一个文件夹代表一个qt所支…

医美企业如何玩转私域流量?

医美企业普遍面临的难点 广告投放成本高、客户到店率低、投入产出不成正比&#xff0c;是医美行业的“难隐之痛”。不少医美机构开始布局私域的精细化运营。但不是每个医美机构都能做好&#xff0c;有的机构做私域&#xff0c;复购翻几倍&#xff1b;也有的机构对私域理解还停…

比特币和以太坊抹去早些时候的收益,这就是为什么

随着美元指数 (DXY) 跃升至 20 的 112.87 年高点&#xff0c;加密市场出现了突然的自由落体。 最佳 cryptocurrencies 包括比特币&#xff08;BTC&#xff09;和以太坊&#xff08;ETH&#xff09;在内的一个小时内下跌超过2%。 ​比特币交易价格超过 19 万美元&#xff0c;但…

【HTML——奇幻撕布】(效果+代码)

效果展示 有强迫症的朋友可能会挺喜欢这个的 ~ 代码 下面即为全部源代码: 奇幻撕布.html <!doctype html> <html lang="en">

【Spring Boot 集成应用】 OAUTH2统一认证单点登录中的各种模式说明

1. OAUTH2统一认证介绍 OAuth 2.0 是一个行业的标准授权协议。OAuth 2.0 专注于简化客户端开发人员&#xff0c;同时为 Web 应用程序&#xff0c;桌面应用程序&#xff0c;手机等各种设备接入提供特定的授权流程。 2. 传统登陆认证 传统登陆方式是在每个服务进行登陆认证&am…

mqtt报文逐条解析

文章目录1、背景说明2、mqtt报文解析3、剩余长度计算4、构建connect报文5、CONNACK报文示例6、心跳PING报文7、心跳回应PINGRESP报文8、断开连接DISCONNECT报文9、订阅请求SUBSCRIBE10、订阅请求确认SUBACK11、取消订阅UNSUBSCRIBE12、取消订阅确认UNSUBACK13、发布消息PUBLISH…

element-ui源码分析:剖析el-tree源码,看看实现一个树组件有多么复杂(1)

elment-ui中tree木块相关文件如下图&#xff1a; 下图梳理一下各个文件之间的引用关系&#xff08;箭头的方向表示使用&#xff09; 1 uti.js 1.1 markNodeData 标记节点 export const NODE_KEY $treeNodeId;export const markNodeData function(node, data) {if (!data ||…

java集合专题Set接口及HashSet/LinkedHashSet使用方法底层结构及源码分析

Set接口及常用方法 我们主要学习Set接口下的HashSet/TreeSet/LinkedHashSet这3个Set的实现类! 并且通过源码的方式学习其底层结构分析源码和他们的扩容方式! Set特点: 无序,保存顺序和取出顺序不一致不允许重复值, 可以保存null值! Set接口下的常用方法 Set接口实现了Collec…

307. 区域和检索 - 数组可修改

文章目录分析常规做法线段树解法与其结构线段树的构建线段树的区域查询线段树的更新线段树的时间复杂度拓展阅读分析 原题油管讲解线段树做法 常规做法 brute force的做法是&#xff0c;更新时直接在数组原地更新&#xff0c;而求区域和时逐元素相加&#xff0c;时间复杂度为…

多测师肖sir_高级讲师_第2个月第8讲解类

Python中的类与对象 &#xff08;1&#xff09;类(class): 用来描述具有相同的属性和方法的对象的集合。它定义了该集合中每个对 象所共有的属性和方法。对象是类的实例。 案例&#xff1a;人类xiu&#xff08;对象&#xff09; &#xff08;2&#xff09;实例化&#xff1a;创…

使用docker-compose搭建高可用Apollo配置中心

使用docker-compose搭建高可用Apollo配置中心搭建学习环境编写docker-compose脚本创建script目录&#xff0c;并导入sql脚本执行docker-compose创建容器初始化环境创建测试应用启动demo&#xff0c;测试拉取配置添加依赖添加配置应用配置启动如下搭建高可用生产环境搭建mysql创…

Rosjava SLAM - Android APP 历程

目标 能在有一个Android APP的界面控制机器运行。 如&#xff1a;转&#xff1a; 机器人控制 &#xff1a; SLAM - Android APP_Lan.W的博客-CSDN博客如果选择&#xff0c;按下录制按钮时相机流将按照设置要求打开&#xff0c;相机流预览窗口将实时显示相机画面&#xff0c;得…

虚拟实习项目技术架构mal总结

mogodb闪退 各种插件和启动 mall文档 先要敲定技术架构版本才能编写代码,否则可能全部重来。 1.先技术2.再业务 先给请求加以及生成的token oauth2源码分析 教程