微信小程序开发之——使用模板时如何区分点击的是哪一个

发表于 分类于 ， ， 阅读时长 ≈ 3 分钟

一 概述

一个页面中，使用模板创建两个按钮，分别点击两个按钮时，查看日志无法区分点击的是哪一个

二 按钮模板

2.1 模板布局文件(template-button.wxml)

1
2
3
4
5
<template name="dlhTemplate">
  <view class="dlh" bindtap="buttonTap">
  <button >{{buttonContent}}</button>
</view>
</template>

2.2 模板样式(template-button.wxss)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.dlh {
  width: 100%;
  margin: 60rpx 0rpx 0rpx 0rpx;
  padding: 10rpx 0rpx;
  box-sizing: border-box;
}

.dlh button:first-child {
  width: 100%;
  color: #fff;
  font-size: 44rpx;
  background: #D19900;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.27);
  border-radius: 20rpx;
}

三 布局中使用多个模板

3.1 页面中使用

3.3.1 页面布局(index.wxml)

1
2
3
4
5
<import src="../template/template-dlh-button.wxml"></import>
<view>
  <template is="dlhTemplate" data="{{buttonContent:'按钮一'}}"></template>
  <template is="dlhTemplate" data="{{buttonContent:'按钮二'}}"></template>
</view>

3.3.2 页面样式(index.wxss)

1
2
3
4
@import "../template/template-dlh-button.wxss";
view {
  padding: 0rpx 40rpx;
}

3.3.3 点击事件

1
2
3
4
buttonTap:function(options){
    //debugger;
    console.log(options);
},

3.3.4 按钮两次点击事件的日志

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
//第一次
{
	type: "tap", timeStamp: 592889, target: {…}, currentTarget: {…}, mark: {…}, …}
	changedTouches: [{…}]
	currentTarget: {id: "", offsetLeft: 17, offsetTop: 25, dataset: {…}}
	detail: {x: 140, y: 60.25}
	mark: {}
	mut: false
	target: {id: "", offsetLeft: 17, offsetTop: 29, dataset: {…}}
	timeStamp: 592889
	touches: [{…}]
	type: "tap"
	_userTap: true
	__proto__: Object
}
//第二次
{
	type: "tap", timeStamp: 594008, target: {…}, currentTarget: {…}, mark: {…}, …}
	changedTouches: [{…}]
	currentTarget: {id: "", offsetLeft: 17, offsetTop: 99, dataset: {…}}
	detail: {x: 120, y: 117.25}
	mark: {}
	mut: false
	target: {id: "", offsetLeft: 17, offsetTop: 103, dataset: {…}}
	timeStamp: 594008
	touches: [{…}]
	type: "tap"
	_userTap: true
	__proto__: Object
}

3.2 如何区分

template-button.wxml模板中，给按钮添加data-value，根据data-value判断

1
2
3
4
5
<template name="dlhTemplate">
  <view class="dlh" bindtap="buttonTap">
  <button data-value="{{buttonContent}}">{{buttonContent}}</button>
</view>
</template>

3.3 添加data-value后两次按钮的点击

3.4 获取点击的按钮，进行处理

3.4.1 获取点击的按钮的值

1
2
3
4
5
6
7
8
9
10
11
12
13
buttonTap: function (options) {
    debugger;
    console.log(options);
    console.log(1);
    switch (options.target.dataset.value) {
      case "按钮一":
        console.log("按钮一");
        break;
      case "按钮二":
        console.log("按钮二");
        break;
    }
  },

3.4.2 处理结果(打印内容)