摘要：
Android和IOS微信内置浏览器中H5移动终端页面的形式不同，因此我统一使用触摸事件，而不是单击事件1。当触发触摸启动事件时，设置全局变量（名称可选）flag=1；2.触发touchmove事件时，设置flag＝0；3.当触发touchend事件时，判断标志值。当标志=1时，触发touchend事件中的功能。触发后，在末尾设置标志=1；这是我的代码缩写
H5移动端的页面在安卓和IOS微信内置浏览器中呈现的形式不一样,所以我统一采用touch事件代替click事件
1，touchstart事件触发的时候设置全局变量（名字随便取）flag = 1；
2，touchmove事件触发的时候设置 flag = 0；
3，touchend事件触发的时候判断flag值 当flag = 1 的时候触发touchend事件里面的函数，触发完以后在末尾再设置flag = 1;
下面是我的代码简写：
直接上代码吧
<template>
<div class="sitelist">
<p>站点下拉列表</p>
<div class="city">
<div class="city-wrapper city-wrapper-hook">
<div class="scroller-hook">
<div class="cities cities-hook">
<div v-for="(i,index) in value" :key="index">
<div class="title">{{i[label]}}</div>
<ul>
<li v-for="(item,is) in i[children]" :key="is" :data-name="item[label]" :data-id="item[relkey]"><span @touchend="touchUp(item)" @touchstart="chooseCity()" @touchmove="demochind">{{item[label]}}</span>
</li>
</ul>
</div>
</div>
</div>
<div @touchstart="touchIndex">
<ul style=" 100px;text-align: left;padding: 20px 0">
<li v-for="(i,ino) in value" :key="ino" :data-anchor="i[label]" class="item">{{i[label].substr(0, 1)}}</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name:"sitelist",
props: {
value: {
type: Array, // 数据源
default: []
},
label: {
type: String,
default: 'name'
},
children: {
type: String,
default: 'children'
},
relkey: {
type: String,
default: 'id'
}
},
data(){
return{
dd:1,
cityWrapper: document.querySelector('.city-wrapper-hook'),
cityScroller: document.querySelector('.scroller-hook'),
cities: document.querySelector('.cities-hook'),
shortcut: document.querySelector('.shortcut-hook'),
shortcutList: [],
scroll: null,
anchorMap: {},
touch: {},
flag:10,//防止误点击
}
},
mounted () {
this.initCities()
},
methods: {
demochind(){//++++
this.flag = 0;
},
chooseCity (city) {
this.flag = 1;//+++
let v = this
v.countTime = 0
v.countTimer = setInterval(function(e){v.countTime ++},1)
},
touchUp (item) {
//let v = this
//clearInterval(v.countTimer);
//console.log(v.countTimer);
//this.$emit('click', item);
if(this.flag==1){
this.flag = 1;//+++
this.$emit('click', item);
}else{
this.flag = 1;//+++
}
// if (v.countTime < 30) {
// this.isShowCitys = false
// // this.location = item[v.label]
// // this.submit.area_code = item[v.relkey]
// }
/*
let v = this
clearInterval(v.countTimer)
if (v.countTime < 30) {
this.isShowCitys = false
this.$emit('click', item)
// this.location = item[v.label]
// this.submit.area_code = item[v.relkey]
}
*/
},
initCities: function () {
let v = this
let y = 0;
var titleHeight = 28
var itemHeight = 44
v.value.forEach(function(e){
let label = e[v.label].substr(0, 1)
let len = e[v.children].length
v.anchorMap[label] = y
y -= titleHeight + len * itemHeight
})
v.shortcut = document.querySelector('.shortcut-hook')
v.cityWrapper = document.querySelector('.city-wrapper-hook')
v.shortcut.style.top = (v.cityWrapper.clientHeight - v.shortcut.clientHeight) / 2 + 'px';
v.scroll = new BScroll(v.cityWrapper, {
probeType: 3
})
v.scroll.scrollTo(0, 0);
},
touchIndex: function (e) {
console.log(e, 'e')
let v = this
let anchor = e.target.getAttribute('data-anchor')
console.log(anchor ,'anchor')
let firstTouch = e.touches[0]
console.log(firstTouch, 'firstTouch')
console.log(v.touch, 'v.touch')
v.touch.y1 = firstTouch.pageY
v.touch.anchor = anchor
v.scrollTo(anchor.substr(0,1))
},
scrollTo: function (anchor) {
let v = this
v.cityScroller = document.querySelector('.scroller-hook')
var maxScrollY = v.cityWrapper.clientHeight - v.cityScroller.clientHeight
var y = Math.min(0, Math.max(maxScrollY, v.anchorMap[anchor]))
if (typeof y !== 'undefined') {
v.scroll.scrollTo(0, y);
}
}
}
}
</script>
<style scoped>
.mycity {
text-align: center;
font-size: 12px;
margin: 20px 0;
}
.list-box {
padding: 0 43px;
}
.list-item {
height: 43px;
line-height: 42px;
border-bottom: 1px solid #ECECEC;
text-align: center;
}
.item {
list-style: none !important;
}
.list-item input {
border:none;
text-align: center;
outline: none;
}
.small-icon {
display: inline-block;
100%;
height: 100%;
vertical-align: top;
}
.city {
display: block;
}
.city .city-wrapper {
position: fixed;
top: 0;
bottom: 0;
100%;
z-index: 100;
background-color: #FFF
}
.city .city-wrapper .cities .title {
height: 28px;
padding-left: 16px;
line-height: 28px;
background-color: #f5f5f5;
font-family: Helvetica;
font-size: 16px;
color: #878787;
}
.city .city-wrapper .cities .item {
height: 44px;
padding: 0 16px;
line-height: 44px;
font-size: 14px;
color: #333
}
.city .city-wrapper .cities .item .name {
display: block;
position: relative;
}
.city .city-wrapper .cities .item .name:before,
.city .city-wrapper .cities .item .name:after {
display: block;
position: absolute;
border-top: 1px solid #e5e5e5;
left: 0;
100%;
content: ' ';
}
.city .city-wrapper .cities .item .name:before {
display: none;
top: 0;
}
.city .city-wrapper .cities .item .name:after {
display: block;
bottom: 0;
}
.city .city-wrapper .cities .item:active {
background-color: #f0f0f0;
}
.city .city-wrapper .cities .item:last-child .name:after {
display: none;
}
.city .city-wrapper .shortcut {
position: absolute;
z-index: 30;
40px;
right: 0;
font-family: Helvetica;
}
.city .city-wrapper .shortcut .item {
height: 12px;
padding-top: 6px;
padding-left: 24px;
text-align: center;
font-size: 14px;
color: #fa8919;
}
@media only screen and (max-height: 600px) {
.city .city-wrapper .shortcut .item {
padding-top: 3px;
}
}
.cities .cities-hook> div {
70%;
}
</style>