微信小程序之绑定点击事件

微信小程序出来那
{
  "pages":[
  //在这里添加页面的路径
    "pages/index/index",
    "pages/logs/logs",
     "pages/home/home"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "乐动健身馆",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true

  },
  //添加标题栏
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"

    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志"

    },{
      "pagePath": "pages/home/home",
      "text": "我的"

    }
    ]
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

然后看看我们如何通过button来修改数据绑定:

这里写图片描述

很简单的操作,首先要在home.wxml来做设置:
  • 1
  • 2
<view>
//这里{{name}}!来修改所需要绑定的字符串
    <view>Hello {{name}}!</view>
    // bindtap 点击事件
    <button bindtap="changeName">点击我,换名字</button>
</view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  然后在home.js里边做配置:
  • 1
  • 2
var helloData ={
    name: 'wechat'
}
Page({
    data:helloData,
    changeName:function(e){
        this.setData({
            name:'杨磊'
        })
    }
})
么久了,趁着有时间自己研究一下,前阶段看一了一下,但是不允许个人注册,现在已经对个人开放了,所以爱好者们可以自己研究了。 首先,我们看一下如何添加底部的标签栏:在app.json里操作
### 微信小程序绑定点击事件并传递参数的方法 在微信小程序中,为了实现点击事件绑定与参数传递,通常采用`bindtap`属性来指定事件处理函数,并通过`data-xxx`自定义属性向该函数传递所需的数据。具体来说,在WXML文件内的组件上设置这些属性之后,可以在对应的JS文件里编写相应的事件处理器,从中提取出所需的参数。 #### WXML部分 ```html <view bindtap="handleTap" data-id="{{itemId}}" class="item">Item</view> ``` 这里展示了一个简单的视图元素,它绑定了名为`handleTap`的点击事件监听器,并且设置了`data-id`作为待传输的信息之一[^1]。 #### JS部分 ```javascript Page({ handleTap(event){ const itemId = event.currentTarget.dataset.id; console.log('Clicked item ID:', itemId); } }) ``` 上述JavaScript代码片段展示了如何获取由模板层传送过来的数据项ID。当用户触发关联的操作时,系统自动创建一个包含了交互细节的对象——即这里的`event`变量;而目标节点上的所有`dataset`成员则可通过访问此对象下的`currentTarget`属性获得[^2]。 值得注意的是,不同于某些框架允许直接在标记内声明额外参数的做法,微信小程序并不支持这种方式。因此,任何想要发送给回调函数之外的东西都应当借助于`data-*`前缀的形式附加至HTML标签之上[^3]。 另外,尽管存在一定的相似之处,但微信小程序的设计理念和技术栈区别于Vue.js等前端库/框架,所以在实际编码过程中要注意区分两者的差异性,以免造成不必要的混乱[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值