美文网首页
微信小程序template返回多种点击事件

微信小程序template返回多种点击事件

作者: 管乐_VICTOR | 来源:发表于2019-08-19 12:01 被阅读0次
一、背景：使用了template，但是要返回不同的点击事件

有个需求，就是在一个template添加点击事件，本来这个template上面的一个点击事件，还是写在home.wxml中的

  <view class='swiperChoose'>
    <swiper class='swiperDoor2' interval='0.5'>
      <block wx:for='{{areaArr}}' wx:key='index'>
        <swiper-item>
          <view  catchtap='longdistanceOpenDoor' data-index='{{index}}'>
            <template is='chooseDoorTemp' data='{{...item,index}}'/>
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>
二、分析：
1.这样写的话，相当于是在整个template上的点击事件；
2.没有相对应的传值方法可以传值过来；
三、处理：
1.不能在home.wxml中写，要写进template.wxml中才可以

可以直接在template.wxml中直接绑定点击事件

// 这里可以使用 catchtap或者bindtap
<view class='title' catchtap="chooseDoorName" data-index="{{index}}">
2.添加template.js
var temp = {
  /**
     * 点击选择
     */
  chooseDoorName:function () {
    console.log('doubidoubi');
  },
  openDoor: function() {
    console.log('点击点击');
  }
}

// 导出供外部使用
export default temp
3.在使用的home.js文件中
let chooseDoorClick = require('../../pages/chooseDoorTemp/chooseDoorTemp.js')
console.log('template test>>>', chooseDoorClick, typeof chooseDoorClick);
const app = getApp()
import tmpObj from '../../pages/chooseDoorTemp/chooseDoorTemp.js'
var indexObj = {

}
indexObj["openDoor"] = tmpObj.openDoor
indexObj["chooseDoorName"] = tmpObj.chooseDoorName
console.log(indexObj)

// 在下面的page()方法中，添加方法
page({
openDoor(e){
  console.log(e)
    console.log('dddddd')
  },
  chooseDoorName(e) {
    console.log(e)
    console.log('top')
  },
})
四、总结：

现在，你可以在openDoor()和chooseDoorName中获取到你想要获取的数据了。o(*￣︶￣*)o

相关文章