uniapp click和bindtap

uniapp中，click和bindtap都是用于绑定触发事件的指令。它们的主要区别在于click是基于原生DOM的事件，而bindtap是基于小程序框架的事件。

当点击原生DOM元素时，可以使用click指令来绑定点击事件。例如：

<button click="handleClick">点击我</button>

这里，当用户点击按钮时，会执行handleClick方法。

而在小程序中，由于小程序是基于框架的，使用click会导致高频触发问题，因此可以使用bindtap指令来绑定点击事件。例如：

<button bindtap="handleTap">点击我</button>

这里，同样是当用户点击按钮时，会执行handleTap方法。bindtap的使用方式和click很相似，但是它是基于小程序框架的事件，更加稳定。

除了click和bindtap之外，在uniapp中还有其他的事件指令，如longpress、touchstart、touchmove等。根据不同的需求，可以选择合适的事件指令来实现交互效果。

相关问题

bindtap="integral900Click">900 转uniapp写法

在uni-app中，可以使用类似以下的方式将bindtap事件转换为uni-app中的事件：

<template>
  <view @tap="integral900Click">900</view>
</template>

<script>
export default {
  methods: {
    integral900Click() {
      // 处理点击事件的逻辑
    }
  }
}
</script>

其中，@tap是uni-app中用于绑定点击事件的方式。在对应的方法integral900Click中，可以编写相应的逻辑来处理点击事件。

uniapp map实现打点和点击定位弹窗功能

1. 打点功能实现：

首先，在页面中引入uniapp的map组件：

<template>
  <view class="map">
    <unicomponent ref="uniMap" type="map" :latitude="latitude" :longitude="longitude" :markers="markers"></unicomponent>
  </view>
</template>

然后在script中定义data数据：

export default {
  data() {
    return {
      latitude: 0,
      longitude: 0,
      markers: []
    }
  }
}

接着，在mounted生命周期中调用getCenterLocation方法获取当前地图中心点的经纬度，并将其赋值给data中的latitude和longitude：

mounted() {
  this.$refs.uniMap.getCenterLocation({
    success: (res) => {
      this.latitude = res.latitude;
      this.longitude = res.longitude;
    }
  })
}

接下来，我们可以通过uniapp的map组件的bindtap事件来实现打点功能。首先，在data中定义一个变量count，用于计算点击地图的次数：

data() {
  return {
    latitude: 0,
    longitude: 0,
    markers: [],
    count: 0
  }
}

然后，在map组件上绑定bindtap事件：

<unicomponent ref="uniMap" type="map" :latitude="latitude" :longitude="longitude" :markers="markers" @tap="onTap"></unicomponent>

最后，在onTap方法中实现打点功能：

onTap(e) {
  this.count++;
  const marker = {
    id: this.count,
    latitude: e.detail.latitude,
    longitude: e.detail.longitude,
    title: `点${this.count}`,
    iconPath: '/static/images/marker.png',
    width: 40,
    height: 40
  }
  this.markers.push(marker);
}

2. 点击定位弹窗功能实现：

首先，在页面中引入uniapp的button组件用于触发定位：

<template>
  <view class="map">
    <view class="button" @click="getLocation">定位</view>
    <unicomponent ref="uniMap" type="map" :latitude="latitude" :longitude="longitude" :markers="markers"></unicomponent>
  </view>
</template>

然后，在script中实现getLocation方法：

methods: {
  getLocation() {
    uni.getLocation({
      type: 'gcj02',
      success: (res) => {
        this.latitude = res.latitude;
        this.longitude = res.longitude;
        this.showPopup();
      }
    })
  },
  showPopup() {
    uni.showModal({
      title: '当前位置',
      content: `经度：${this.longitude}\n纬度：${this.latitude}`
    })
  }
}

getLocation方法中调用uniapp的getLocation方法获取当前位置的经纬度，并将其赋值给data中的latitude和longitude。接着，调用showPopup方法弹出当前位置的经纬度。

至此，我们就完成了uniapp中map组件的打点和点击定位弹窗功能的实现。