• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序事件/自定义组件

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

事件

常见事件:

test.wxml     

<!-- 事件-->
<button bind:tap="click" data-name="{{b}}" data-age="sb">按钮</button>   #bind:事件名="事件函数名"
<view class="outer" bind:tap="click1" data-name="1">
外面
<view class="inner" bindtap="click2" data-name="2">    
里面
</view>
</view>

test.js   (在js最下方写)

 click1: function () {

    console.log("外面的")
  },
   click2: function () {
 
    console.log("中间的")
  }

事件传递参数:(重点******)

当视图层发生事件时,某些情况需要事件携带一些参数到执行的函数中,这个时候可以通过 data-属性 来完成

1.格式:data-属性的名称

2.获取:e.currentTarget.dataset.属性的名称       (除了currentTarget还有Target)

自定义组件

1.创建自定义组件

类似于页面,一个自定义组件由 json 、wxml 、wxss 、js 4个文件组成

声明组件

首先需要在 json 文件中进行自定义组件声明

{
  "component": true,
}

注册组件

在自定义组件的js文件中,需要使用component()来注册组件,并提供组件的属性定义、内部数据和自定义方法

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    name: {
      type: String,
      value: "你好"
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    title:"ssss"
  },

  /**
   * 组件的方法列表
   */
  methods: {
    click:function(e){
      this.triggerEvent("icre", { "index": 323 }, {})  #注意一定要写这个,icre相当于触发事件,可以通过icre知道使用自定义组件,后面的index是传的值
    }
  }
})

自定义组件一般都创建commpents,然后再右击这个目录选择创建commpent,重命名

2.使用自定义组件

首先要在需要使用的json文件中进行引用声明

比如在test下使用,那么在test.json中先写

 

 3.组件将事件传给页面

组件的wxml  (设置一个按钮,绑定一个事件click,点击按钮就加1)

<button bind:tap="click"  data-ss="123">按钮</button>

组件的js    (在methods中写事件函数)

methods: {
    click:function(e){
      console.log(e)
      this.triggerEvent("icre", { "index": 323 }, {})  #这里的icre相当于是给使用标记的页面做个标记,后面跟的是参数index
    }

  }

页面    

<view></view>
{{num}}
<tes name="是的" bind:icre="click"></tes>  #通过icre和自定义组件绑定

页面js

click:function(e){    #click事件函数,自定义组件的按钮点击一次数字就加1
    console.log(e)    
      this.setData({
        num:this.data.num+1
      })
  }

自定义组件中传递的index参数,在页面js中console.log(e)中detail


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序按钮固定在页面底部遮住页面显示内容问题发布时间:2022-07-18
下一篇:
微信小程序-默认选中状态发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap