微信小程序Dom事件实现

面对微信小程序,可能没有像我们平时使用JQuery那样随心所欲。本篇就是为了解决这个问题。

请合理使用工具!

细节就不说了,直接备份一个实现的案例:

wxml

<view class="guess" >
  <view>
    <image data-data_auto = "{{ac[index]}}" data-index="{{index}}" data-num="1"  data-id="{{item.a_team_id}}" bindtap="{{item.bet==true?‘chooseMe‘:‘none‘}}" mode="widthFix"  src="{{ ac[index] === 1 ?‘../images/sheng0.png‘:‘../images/sheng2.png‘}}" class="img"></image>
  </view>
  <view>
    <image data-data_auto = "{{ac[index]}}" data-index="{{index}}" data-num="0" data-id="0" bindtap="{{item.bet==true?‘chooseMe‘:‘none‘}}" mode="widthFix"  src="{{ ac[index] === 0 ?‘../images/ping0.png‘:‘../images/ping2.png‘}}" class="img"></image>
  </view>
  <view>
    <image data-data_auto = "{{ac[index]}}" data-index="{{index}}" data-num="2" data-id="{{item.b_team_id}}" bindtap="{{item.bet==true?‘chooseMe‘:‘none‘}}" mode="widthFix"  src="{{ ac[index] === 2 ?‘../images/sheng0.png‘:‘../images/sheng2.png‘}}" class="img"></image>
  </view>
</view>

wxs:

//设置WXML的数据
that.setData({
  eventArray: res.data.data.data,
  active_bet: res.data.data.active_bet,
    ac:setActive(res.data.data.data)
});

//重要:创建新DOM绑定数据
function setActive($data) {
    let new_data = [];
    for(let i = 0;i<$data.length;i++){
        new_data[i] = 1;
    }
    that.ac = new_data;
    return new_data;
}

Event:

//事件解发
chooseMe(e) {
    console.log(this.ac);
  let keys = e.target.dataset.index;
  this.ac[keys] = parseInt(e.target.dataset.num);
},

  

基本原理就是:自定义DOM

原文地址:https://www.cnblogs.com/q1104460935/p/9158790.html

时间: 2024-11-05 23:30:36

微信小程序Dom事件实现的相关文章

微信小程序页面事件-下拉刷新,上拉加载更多

1.下拉刷新的概念及应用场景. 概念: 下拉刷新是移动端更新列表数据的交互行为,用户通过手指在屏幕上子上而下的滑动,可以触发页面的下拉刷新,更新列表数据. 应用场景: 在移动端,数据列表是常见的页面效果,更新列表数据是最基本的页面需求,相比于按钮刷新,定时刷新来说,下拉刷新的用户体验方便友好,已经成为移动端刷新列表数据的最佳解决方案. 微信小程序启动下拉刷新: 两种方式: 1.需要在app.json 的window选项中或页面配置中开启enablePullDownRefresh, 但是,一般情况

微信小程序常用事件

bind bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡. bindtap  跳转页面 bindchange  .value 改变时触发 change 事件 bindblur. 编辑器失去焦点时触发 bindinput  . 编辑器内容改变时触发 原文地址:https://www.cnblogs.com/ll15888/p/11479933.html

微信小程序转发事件

和生命周期是同级,在.js文件里面设置 // 分享按钮 onShareAppMessage: function () { return { title: '前端伪大叔', path: "/pages/list/list", imageUrl: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2854956166,1658664264&fm=26&gp=0.jpg" } } 点击按钮

微信小程序bindtap事件

bindtap就是点击事件 在wxml文件下 <button type="primary" bindtap="btnclick"> {{btnText}} </button> 在js文件下 Page({ /** * 页面的初始数据 */ data: { text : "这里是内容" , btnText : "这里是按钮", }, /** * 生命周期函数--监听页面加载 */ onLoad: funct

微信小程序-bindtap事件子元素不传参

<ul id="tabBar"> <li class="{{currentTabBar_s == 10?'active':''}}" data-current="10" bindtap="swichTabN"><image src='../../images/icon/tab_MyTodo_s.png' class='img_s'></image><image src='.

微信小程序视图层WXML_事件

微信小程序视图层WXML_小程序事件 什么是微信小程序事件 小程序事件是视图层到逻辑层的通讯方式. 小程序事件可以将用户的行为反馈到逻辑层进行处理. 小程序事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 小程序事件对象可以携带额外信息,如id, dataset, touches. 微信小程序事件的使用方式 在小程序组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该微信小程序页面对应的Page中找到相应的事件处理函数. <view id="

微信小程序视图层WXML_小程序事件

微信小程序视图层WXML_小程序事件 什么是微信小程序事件 小程序事件是视图层到逻辑层的通讯方式. 小程序事件可以将用户的行为反馈到逻辑层进行处理. 小程序事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 小程序事件对象可以携带额外信息,如id, dataset, touches. 微信小程序事件的使用方式 在小程序组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该微信小程序页面对应的Page中找到相应的事件处理函数. <view id="

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

微信小程序组件——bindtap和catchtap的区别

了解知识点 DOM模型是一个树形结构,在DOM模型中,HTML元素是有层次的.当一个HTML元素上产生一个事件时,该事件会在DOM树中元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件,这个传播过程就是DOM事件流. JS冒泡事件:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的(所有祖先元素)中被触发.这 一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层 共同点 在微信小程序的事件机制中,bindtap和catchta