初试微信小程序(事件简介)

在使用微信小程序的时候最后一个配置不要添加逗号,不然会失效
刚加入一个公司, 公司就让我在三天之内实现 一个cnode的中文社区,

还是好好记录一下微信的一些坑吧;

  • 单标签需要闭合使用,不然会报错

意箭头函数的使用, 他this的指向会 指向最近一个层级的对象;

在使用 wx.request() 等函数的时, 如果使用箭头函数,需要先在 这之前改变this的指向
如 const that=this ,


view 组件的公共属性
公共属性

<view
        class="pressBtn"   
        id="num"
        style="color:#fbfbfb"
        hidden     //这个属性用来隐藏这个view
        data-name="num"   //自定义的属性 以data开头
        catch/bind:tap="onNumTap"  //添加属性
        >{{num}}</view>

wx:if 与 v-if 对应, hidden 与v-show 进行对应;
在标签中使用 {{ }} 即是对应 vue 中 v-bind :

bind 的就是vue 中 v-on 事件的监听; @


在冒泡的事件中: currentTarget 和 target是不一致的; currentTarget是我们绑定了的组件,target是发生事件的组件;
建议不太清晰的时候直接使用currentTarget即可
currentTarget里面的 dataset是没有数据的。这个是为了方便我们添加我们自定义的属性


小程序中的冒泡事件:

类型 触发条件
touchstart 手指触摸动作开始
touchend 手指触摸动作结束

touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断,如来电提醒,弹窗

tap 手指触摸后马上离开(使用最多)
longpress 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发
longtap 手指触摸后,超过350ms再离开(推荐使用longpress事件代替)

transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart 会在一个 WXSS animation 动画开始时触发
animationiteration 会在一个 WXSS animation 一次迭代结束时触发
animationend 会在一个 WXSS animation 动画完成时触发
touchforcechange 在支持 3D Touch 的 iPhone 设备,重按时会触发


在这里插入图片描述
水平为X, 竖直为Y

pageX 绝对定位, 联想css 中的定位, (不考虑滚动条的)
clientX , 相对定位, 与滚动条有关
https://www.cnblogs.com/jicheng/p/5945057.html

详解:https://blog.csdn.net/Q176782/article/details/52135746

使用多次遍历的时候最好使用 block 包裹
在wxml中是不会解析的,但是又可以方便嵌套

<view bindtap="passQuery" data-index="1">点击事件传参</view>

js中:

passQuery: function(e){
    // 传递的参数
    let query = e.currentTarget.dataset['index'];
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值