uni-app相关

白天 夜间 首页 下载 阅读记录
  我的书签   添加书签   移除书签

21.事件处理器

浏览 154 扫码 分享 2023-03-29 16:45:42
  • 开始
  • 阻止事件冒泡
  • 结束

    开始

    image.png

    https://uniapp.dcloud.io/tutorial/vue-basics.html#eventhandler
    image.png

    image.png

    image.png

    image.png
    flex布局,水平和垂直居中。
    image.png

    image.png
    tap和click都是点击事件,在手机上建议用tap
    image.png

    image.png
    es5的写法
    image.png
    es6写法
    image.png

    image.png

    image.png

    image.png

    image.png

    image.png
    image.png
    image.png

    image.png

    image.png
    image.png

    阻止事件冒泡

    image.png
    image.png

    image.png

    image.png

    image.png

    image.png

    image.png

    当点击了里面,外面的事件也会触发
    image.png
    阻止事件从里面冒泡到外面
    image.png

    点击里面,就是里面
    image.png

    结束

    若有收获,就点个赞吧

    0 人点赞

    上一篇:
    下一篇:
    • 书签
    • 添加书签 移除书签
    • socket
    • uni-app 在线拖拽平台
    • 在线客服
    • 小程序-反编译
      • 小程序转uni-app
      • 济南房选选
    • 小程序员开源项目
    • uView UI,是全面兼容nvue的uni-app生态框架
    • HBuilder X 快捷键
    • 网易云课堂uni-app
      • uni-app相关资料
        • uni-app uni.chooseImage H5端不显示图片
        • uni-app支付的插件
        • uni-app中隐藏tabbar
      • websocket教程
      • 下拉式筛选菜单
      • 所有课程地址
      • uni-app实战仿糗事百科app开发
        • 0-资料
        • 1.项目介绍
        • 2.课程更新说明
        • 3.开发环境搭建
        • 4.创建uniapp项目
        • 5.安卓真机调试配置
          • 一加8T colorOS12系统uni-app 开启真机调试
          • 红米手机进入开发者模式
        • 6.IOS真机调试配置
        • 7.微信小程序调试配置
        • 8.支付宝小程序调试配置
        • 9.引入官方css样式库
        • 10.引入自定义图标库
        • 11.引入css动画库
        • 12.设置全局属性globalStyle
        • 13.底部导航开发
        • 14.view和text组件和动画使用
        • 15.uni-app的css3选择器
        • 16.flex布局快速上手
        • 17.数据渲染
        • 18.class和style绑定
        • 19.条件渲染
        • 20.列表渲染
        • 21.事件处理器
        • 22.监听属性
        • 23.计算属性
        • 24.page.json配置
        • 25.图文、视频列表样式(上)
        • 26.图文、视频列表样式(下)
        • 27.封装列表样式组件
        • 28.滚动tab导航开发(上
        • 29.滚动tab导航开发(下)
        • 30.封装滚动tab导航组件
        • 31.上拉加载组件开发
        • 32.封装上拉加载组件
        • 33.优化图文列表组件
        • 34.封装无数据默认组件
        • 35.搜索页开发(上)
        • 36.搜索页开发(下)
        • 37.自定义导航栏开发
        • 38.textarea组件使用
        • 39.上传多图功能开发
        • 40.封装上传多图组件
        • 41.开发弹出提示框
        • 42.保存草稿功能开发
        • 43.修复自定义组件
        • 44.导航栏tab导航开发
        • 45.公共列表样式开发(上)
        • 46.公共列表样式开发(中)
        • 47.公共列表样式开发(下)
        • 48.封装公共列表组件(上)
        • 49.封装公共列表组件(下)
        • 50.封装tab导航栏组件
        • 51.tab导航栏功能实现
        • 52.上拉加载功能实现
        • 53.搜索功能开发
        • 54.轮播组件使用
        • 55.热门分类组件开发
        • 56.封装热门分类组件
        • 57.话题列表组件开发
        • 58.封装话题列表组件
        • 59.话题分类页开发
        • 60.page.json配置-话题详情页
        • 61.话题介绍组件开发
        • 62.封装话题介绍组件
        • 63.公共列表组件使用
        • 64.上拉加载实现
        • 65.下拉刷新实现
        • 66.page.json配置-小纸条功能
        • 67.小纸条列表组件开发
        • 68.封装小纸条列表组件
        • 69.下拉刷新功能实现
        • 70.上拉加载实现
        • 71.操作菜单开发
        • 72.封装操作菜单组件
        • 用户列表页-开始
        • 73.page.json配置-用户列表
        • 74.tab导航组件再次优化
        • 75.好友列表组件开发
        • 76.封装好友列表组件
        • 77.page.json配置-聊天页面
        • 78.聊天输入框组件开发
        • 79.聊天列表组件开发
        • 80.封装聊天列表组件
        • 81.完善聊天页功能
        • 82.搜索列表功能完善(上)
        • 83.搜索列表功能完善(下)
        • 84.page.json配置-内容页
        • 85.开发文章详情页信息组件
        • 86.评论列表组件开发
        • 87.评论输入框组件开发
        • 88.分享功能组件开发(上)
        • 89.分享功能组件开发(下)
        • 90.page.json配置-个人中心
        • 91.个人中心UI构建(上)
        • 92.个人中心UI构建(中)
        • 93.个人中心UI构建(下)
        • 94.设置页UI构建
        • 95.page.json配置-修改密码
        • 96.修改密码UI界面开发
        • 97.表单验证功能实现
        • 98.修改邮箱页UI界面开发
        • 99.表单验证功能实现
        • 100.编辑资料UI界面实现
        • 101.修改头像功能实现
        • 102.showActionSheet接口使用
        • 103.修改生日功能实现
        • 104.三级联动城市选择器使用
        • 105.帮助反馈UI界面实现
        • 106.关于页面UI界面
        • 107.page.json配置-登陆页
        • 108.登录页UI界面构建
        • 109.登录类型切换效果实现
        • 110.表单基础功能实现(上)
        • 111.表单基础功能实现(中)
        • 112.表单基础功能实现(下)
        • 113.第三方登录组件功能实现
        • 114.page.json配置-个人空间
        • 115.个人空间头部组件开发
        • 116.个人空间UI界面实现(一)
        • 117.个人空间UI界面实现(二)
        • 118.个人空间UI界面实现(三)
        • 119.个人空间操作菜单
        • 120.清除缓存功能
        • 121.全局方法和配置文件封装
        • 122.监听网络状态
        • 123.热更新
        • 124.动画效果优化
        • 125.后端线上环境部署流程
        • 未看完-127.api开发准备-vscode和数据库管理
        • 196.websocket快速入门
        • 197.websocket测试工具搭建
        • 198.websocket环境搭建
        • 199.聊天流程原理
        • 200.用户绑定客户端api
        • 205.部署后端源码到线上服务器
        • 206.部署https(上)
        • 207.部署https(下)
        • 209.配置wss和隐藏端口号
        • 211.封装请求模块(上)
        • 212.封装请求模块(下)
        • 213.首页交互实现
        • 214.请求错误处理封装
        • 215.首页交互实现(补充是否关注)
        • 216.文章详情页交互实现
        • 217.分享功能实现
        • 218.搜索文章功能实现
        • 219.话题专题页交互实现
        • 273.小程序自定义导航栏
        • 274.小程序分享功能实现
        • 275.隐藏版本检测更新
        • 276.微信小程序登录实现
      • uni-app实战商城类app和小程序
        • 0-资料
        • 1-项目介绍(买前必看)
        • 2-1 环境搭建和项目创建
        • 3-1 App.vue引入全局公共样式
        • 3-2 修复引入uni.css报错问题
        • 3-3 动画库使用和图标库创建
        • 3-4 编写uniapp全局样式
        • 4-1 底部导航开发
        • 5-1 基础UI库快速上手
        • 5-2 UI基础UI基础库封装(一)
        • 模板
        • 5-3 UI基础库封装(二)
        • 6-1 首页pages.json配置
        • 6-2 首页轮播图组件开发
        • 6-3 封装首页轮播图组件
        • 6-4 图标分类组件开发
        • 6-5 封装图标分类组件
      • uni-app实战仿微信app开发
        • 课时3-创建项目和开启原生渲染
        • 0-资料
        • 课时1-项目介绍
    • 2021-uni-uni-app从入门到进阶 系统完成项目实战
      • 0-资料
    • SpringBoot在线协同办公小程序开发
      • 0-资料
    • Taro
      • 0-资料
    • uni-app vue3
      • uni-app 常见错误
      • Vue3聊天实例|vue3.0 vant-ui仿微信/朋友圈
      • Vue3 和 Vite 双向加持,uni-app 性能再次提升
    • uni-app入门到实战 以项目为导向 掌握完整开发流程
      • 0-资料
      • 1-1 导学(导学不看,损失百万)
      • 1-2 应用效果展示与分析
      • 2-1 hello 小程序--入门 微信小程序(上)
      • 2-2 hello 小程序--入门 微信小程序(下)
      • 2-3 uni-app 核心知识点概览
      • 2-4 搭建uni-app开发环境
      • 2-5 语法速通-模板语法与数据绑定
      • 2-6 语法速通-条件判断
      • 2-7 语法速通-列表渲染
      • 2-8 语法速通-基础组件
      • 2-9 语法速通-自定义组件
      • 2-10 语法速通-api与条件编译
      • 2-11 生命周期概述(上)
      • 2-12 生命周期概述(下)
      • 3-1 uni-app 项目配置
      • 3-2 目录结构概述
      • 3-3 配置项目底部选项卡 - tabbar 配置
      • 3-4 在uni-app中如何使用sass
      • 4-1 认识 uniCloud开发
      • 4-2 HBuilderX 中配置 uniCloud 环境
      • 4-3 使用 uniCloud web 控制台
      • 4-4 开始使用云函数
      • 4-5 云数据库的添加和删除
      • 4-6 数据库的更新和查找
      • 4-7 使用云储存上传文件
      • 5-1 项目初始化
      • 5-2 自定义导航栏
      • 5-3 导航栏适配小程序
      • 5-4 使用字体图标
      • 5-5 选项卡展示
      • 5-6 选项卡数据初始化
      • 5-7 封装数据请求
      • 5-8 选项卡切换
      • 5-9 基础卡片视图实现
      • 5-10 更多卡片视图实现
      • 5-11 实现内容切换
      • 5-12 选项卡与内容联动
      • 5-13 内容卡片数据初始化
      • 5-14 切换选项卡懒加载数据
      • 5-15 -1 上拉加载更多(上)
      • 5-16 -2 上拉加载更多(下)
      • 5-17 -1 收藏按钮实现(上 )
      • 5-18 -2 收藏按钮实现(下)
      • 6-1 搜索页导航栏修改
      • 6-2 使用vuex 管理历史记录
      • 6-3 -1 搜索逻辑实现(上 )
      • 6-4 -2 搜索逻辑实现(下)
      • 6-5 搜索历史数据持久化
      • 7-1 标签管理页布局样式
      • 7-2 标签页数据处理
      • 7-3 编辑标签页
    暂无相关搜索结果!

      让时间为你证明

      展开/收起文章目录

      分享,让知识传承更久远

      文章二维码

      手机扫一扫,轻松掌上读

      文档下载

      请下载您需要的格式的文档,随时随地,享受汲取知识的乐趣!
      PDF文档 EPUB文档 MOBI文档

      书签列表

        阅读记录

        阅读进度: 0.00% ( 0/0 ) 重置阅读进度

          思维导图备注