微信小程序基础知识--图片跳转,事件跳转,冒泡事件

这篇具有很好参考价值的文章主要介绍了微信小程序基础知识--图片跳转,事件跳转,冒泡事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、 图片携带的跳转

微信小程序点击图片跳转页面,微信小程序,小程序

首页

微信小程序点击图片跳转页面,微信小程序,小程序错误

1.1    指定路径

导航组件 指定跳转的路径  并进行参数的传递? 传递数据的名称

ur1 指定跳转路径  传递id

微信小程序点击图片跳转页面,微信小程序,小程序

1.2  js文件中显示跳转的id信息

详情页的js中  从服务器中读取的数据  并由console.log 表示出来的

微信小程序点击图片跳转页面,微信小程序,小程序

1.3  常用跳转的方法  

微信小程序点击图片跳转页面,微信小程序,小程序

 展示上图设定的跳转携带的id和标题

 微信小程序点击图片跳转页面,微信小程序,小程序

结果

 微信小程序点击图片跳转页面,微信小程序,小程序

 文章来源地址https://www.toymoban.com/news/detail-699481.html

二、绑定事件跳转   bindtap

3.1概念

微信小程序点击图片跳转页面,微信小程序,小程序

 事件绑定在组件上,写在头标签

 

微信小程序点击图片跳转页面,微信小程序,小程序

 微信小程序点击图片跳转页面,微信小程序,小程序

 

 3.2 js逻辑层

微信小程序点击图片跳转页面,微信小程序,小程序

微信小程序点击图片跳转页面,微信小程序,小程序 可以不要:

 

 3.3  catch微信小程序点击图片跳转页面,微信小程序,小程序

bind  catch   实现事件绑定

3.4冒泡事件 非冒泡事件

冒泡事件(触摸事件)

微信小程序点击图片跳转页面,微信小程序,小程序

 

微信小程序点击图片跳转页面,微信小程序,小程序

 

 

微信小程序点击图片跳转页面,微信小程序,小程序

catch 阻止冒泡事件

微信小程序点击图片跳转页面,微信小程序,小程序

 

3.5事件传值

点击外层按钮

 微信小程序点击图片跳转页面,微信小程序,小程序

 

微信小程序点击图片跳转页面,微信小程序,小程序

 3.6 点击事件 

微信小程序点击图片跳转页面,微信小程序,小程序

 

 3.7  只绑定了外层

微信小程序点击图片跳转页面,微信小程序,小程序

微信小程序点击图片跳转页面,微信小程序,小程序

 点击内层组件1

微信小程序点击图片跳转页面,微信小程序,小程序

 target 点击没有绑定事件,触发了外层事件,带有触发的事件的集合     有  51zxw

current   点击的当前触发的事件,没有   51zxw

点击内层组件2 

微信小程序点击图片跳转页面,微信小程序,小程序

 

 target 点击没有绑定事件,触发了外层事件,带有触发的事件的集合     有  我要自学网

current   点击的当前触发的事件,没有   我要自学网

 

3.8 样式模板的按钮到详情页

绑定按钮 将id数据传到js中

微信小程序点击图片跳转页面,微信小程序,小程序

可以点击块内任何位置实现跳转

微信小程序点击图片跳转页面,微信小程序,小程序

 当前targete有id数据

微信小程序点击图片跳转页面,微信小程序,小程序

 

首页  js文件将传过来的id数据打印出来

微信小程序点击图片跳转页面,微信小程序,小程序

菜单页中js和首页的一样模式需要复制过来微信小程序点击图片跳转页面,微信小程序,小程序

 

3.9  轮播图绑定事件

绑定图片路径

微信小程序点击图片跳转页面,微信小程序,小程序

 结果  不能返回id

微信小程序点击图片跳转页面,微信小程序,小程序

 绑定在整个块上

微信小程序点击图片跳转页面,微信小程序,小程序

 结果可以返回id

微信小程序点击图片跳转页面,微信小程序,小程序

 

 跳转

方式:API   路由

微信小程序点击图片跳转页面,微信小程序,小程序

 

到了这里,关于微信小程序基础知识--图片跳转,事件跳转,冒泡事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序分类图片通过id跳转到详情页,不同分类实现定向跳转

    微信小程序分类图片通过id跳转到详情页,不同分类实现定向跳转 1.实现循环展示排列 inde.wxml index.wxss index.js 页面展示 2.跳转到大分类页面 class.wxml class.js 结果:

    2024年02月11日
    浏览(60)
  • 【面试必会,微信小程序的页面跳转和参数传递 ,程序员必会知识

    index.wxml: 在index.wxml页面添加一个元素,在元素里面使用属性url就可以 运行: 跳转的数据传递 以wx.navigateTo为例: 上面讲述,wx.navigateTo传入的url是跳转的页面(使用相对路径) wx.navigateTo({ url:“pages/home/home” }); 那么参数传递至下一页面,则只需要在路径后面,添加?问号,?

    2024年04月14日
    浏览(65)
  • 【前端知识】React 基础巩固(四十一)——手动路由跳转、参数传递及路由配置

    利用 useNavigate 封装一个 withRouter(hoc/with_router.js) 添加到hoc/index.js文件中 利用withRouter,拦截Home组件,实现手动跳转路由 路由参数传递包括:1.动态路由传参;2.查询字符串传参 改造withRouter,通过 useParams() 和 useSearchParams() 来接收两种参数传递: 在界面中,通过params来接收

    2024年02月14日
    浏览(51)
  • React Native 图片组件基础知识

    在 React Native 中使用图片其实跟 HTML 中使用图片一样简单,在 React Native 中我们使用 Image 组件来呈现图片的内容,其中主要的属性有: source 。这个属性主要是设置图片的内容,它可以是网络图像地址、静态资源、临时本地图像以及本地磁盘中的图像。 搭建基础框架 编写卡片

    2024年02月13日
    浏览(50)
  • 《ElementUI 基础知识》png 图片扩展 icon用法

    UI 设计给的切图是 .png 格式。但想与 Element UI icon 用法类似,方案如下。 准备图片 新建文件,可使用 CSS 预处理语言 styl 或 scss 。 stylus 方式 文件 icon.styl scss 方式 文件 icon.scss 全局导入。在 Vue 框架中直接导入即可。

    2024年04月23日
    浏览(42)
  • CTF-Misc基础知识之图片及各种工具

    MISC作为CTF中比较重要的一类题型,分值占比较大,为了帮助大家更好的学习MISC的做题方法,我总结了常见的图片类型中的几种题型及工具: 图片,音频,视频 首先就是大家常见的图片分析,图片修复,图片修改长宽高,图片拼接,二维码扫描,LSB隐写等等。 遇到图片类型

    2023年04月09日
    浏览(40)
  • 微信小程序之间跳转,多个微信小程序相互跳转,小程序里如何跳转另一个小程序

    微信小程序之间跳转,多个微信小程序相互跳转,小程序里如何跳转另一个小程序 view代码 js代码

    2024年02月12日
    浏览(45)
  • 微信小程序页面跳转方式+跳转小程序

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 跳转到其他页面(非tabBar页) 返回上一页面或返回多级页面 首先需要在当前小程序app.json中定义:需要跳转的小程序的app-id app.josn文件: 第一种方法:wx.

    2024年02月12日
    浏览(83)
  • 【C++】基础知识--程序的结构(1)

    C++简介: C++ 是一种静态类型的、编译式的、通用的、大小写敏感的、不规则的编程语言,支持过程化编程、面向对象编程和泛型编程。 C++ 被认为是一种中级语言,它综合了高级语言和低级语言的特点。 C++ 是由 Bjarne Stroustrup 于 1979 年在新泽西州美利山贝尔实验室开始设计开

    2024年02月06日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包