小程序--事件处理

一、事件对象

给小程序的事件传递参数,有以下两种方法:

1、自定义属性

html 复制代码
<view class="item" wx:for="{{ 5 }}" wx:key="*this" data-index="{{index}}" bind:tap="onClick"></view>
javascript 复制代码
Page({
  onClick(e) {
    // 自定义属性
    console.log(e.target.dataset.index)
  }
})

2、mark属性

html 复制代码
<view class="item" wx:for="{{ 5 }}" wx:key="*this" mark:index="{{index}}" bind:tap="onClick"></view>
javascript 复制代码
Page({
  onClick(e) {
    // mark属性
    console.log(e.mark.index)
  }
})

3、实现tab切换高亮

小程序中,只能写一个class,否则会出现覆盖现象

html 复制代码
<view class="item {{activeIndex === index ? 'active' : ''}}" wx:for="{{ 5 }}" wx:key="*this" mark:index="{{index}}" bind:tap="onClick"></view>
javascript 复制代码
Page({
  data: {
    activeIndex: 0
  },
  onClick(e) {
    this.setData({
      activeIndex: e.mark.index
    })
  }
})
相关推荐
2501_9159184123 分钟前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 小时前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差11 小时前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张12 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬14 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_9151063214 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI15 小时前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_1772972206915 小时前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧
weixin_lynhgworld15 小时前
剧本杀小程序系统开发:开启沉浸式社交娱乐新纪元
小程序·娱乐
~废弃回忆 �༄17 小时前
mobx-miniprogram小程序的数据传输
小程序