博客> 微信小程序template返回多种点击事件
微信小程序template返回多种点击事件
2019-12-15 19:58 评论:0 阅读:118 IT喃
ios
一、背景:使用了template,但是要返回不同的点击事件

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

  <view class='swiperChoose'>
    <swiper class='swiperDoor2' interval='0.5'>
      <block wx:for='{{areaArr}}' wx:key='index'>
        <swiper>
          <view catchtap='longdistanceOpenDoor' data-index='{{index}}'>
            <template is='chooseDoorTemp' data='{{...item,index}}'>
          </view>
        </swiper>
      </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

收藏
0
sina weixin mail 回到顶部