在vue.js使用v-for遍历出的li中的@click事件在移动端无效，在网页端可以执行，代码如下
<template>
<div class="rating-section" ref="ratingSection">
<div>
<div class="comprehensive">
<div class="score">
<div class="mark">{{seller.score}}</div>
<div class="text">综合评分</div>
<div class="compare">高于周边商家{{seller.rankRate}}%</div>
</div>
<div class="service">
<div class="service-item">
<span class="lable-text">服务态度</span>
<div class="star-container">
<star :size="12" :score="seller.serviceScore"></star>
</div>
<span class="inline-score">{{seller.serviceScore}}</span>
</div>
<div class="service-item">
<span class="lable-text">菜品评价</span>
<div class="star-container">
<star :size="12" :score="seller.foodScore"></star>
</div>
<span class="inline-score">{{seller.foodScore}}</span>
</div>
<div class="service-item">
<span class="lable-text">送达时间</span>
<span class="delivery">{{seller.deliveryTime}}分钟</span>
</div>
</div>
</div>
<div class="rating-container">
<div class="setter">
<rating-select :options="options"></rating-select>
</div>
<div class="rating-setting" @click="onlyContentClick">
<span class="icon-check_circle" :class="{'highlight':onlyContent}"></span>
<span class="text">只看有内容的评价</span>
</div>
<div class="rating-list">
<ul>
<li class="item-rating" v-for="item in ratings">
<div class="avart">
<img :src="item.avatar">
</div>
<div class="content">
<div class="username">{{item.username}}</div>
<div class="user-score">
<div class="score">
<star :size="12" :score="item.score"></star>
</div>
<span v-show="item.deliveryTime>0">{{item.deliveryTime}}分钟送达</span>
</div>
<div class="text">{{item.text}}</div>
<div class="thumbs-up">
<span class="split" :class="[{'icon-thumb_down':item.rateType===0},{'icon-thumb_up':item.rateType===1}]"></span>
<span class="thumb-item split" v-for="r in item.recommend">{{r}}</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</template> <script>
import BScroll from 'better-scroll';
import RatingSelect from '../ratingSelect/ratingSelect.vue';
import star from '../star/star.vue';
const ERROR_OK = 0;
export default{
data () {
return {
ratings: [],
onlyContent: false,
options: [
{
text: '全部',
count: 57,
type: 'positive'
}, {
text: '满意',
count: 47,
type: 'positive'
}, {
text: '不满意',
count: 10,
type: 'negative'
}]
};
},
created () {
this.loadData();
},
props: {
seller: {
type: Object,
default () {
return {};
}
}
},
components: {star, RatingSelect},
methods: {
onlyContentClick () {
this.onlyContent = !this.onlyContent;
},
loadData () {
this.$http.get('/getRatings').then(res => {
if (res.body.code === ERROR_OK) {
this.ratings = res.body.result;
this.$nextTick(() => {
if (!this.ratingScroll) {
this.initScroll();
} else {
this.ratingScroll.refresh();
}
});
}
});
},
initScroll () {
this.ratingScroll = new BScroll(this.$refs.ratingSection, {
click: true //better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true，better-scroll 会派发一个 click 事件
});
}
}
};
</script> <style scoped lang="stylus" rel="stylesheet/stylus">
.rating-section
position absolute;
top 176px;
bottom 0px;
overflow hidden;
width 100%;
font-size 0;
background-color rgb(243, 245, 247);
.comprehensive
display flex;
padding 18px 0;
background-color #FFF;
border-bottom 1px solid rgba(7, 17, 27, .1);
.score
padding 0px 16px;
border-right 1px solid rgba(7, 17, 27, .1);
text-align center;
.mark
margin-bottom 6px;
line-height 28px;
font-size 24px;
color rgb(255, 153, 0);
.text
margin-bottom 8px;
line-height 12px;
font-size 12px;
color rgb(7, 17, 27);
.compare
margin-bottom 6px;
line-height 10px;
font-size 10px;
color rgba(7, 17, 27, .6);
.service
flex 1;
padding-left 16px;
.service-item
margin-bottom 8px;
line-height 18px;
font-size 12px;
.lable-text
color rgb(7, 17, 27);
.inline-score
color rgb(255, 153, 0);
.delivery
color rgb(147, 153, 159);
.star-container
display inline-block;
&:last-child
margin-bottom 0;
.rating-container
margin-top 18px;
background-color #fff;
border-top 1px solid rgba(7, 17, 27, .1);
.setter
padding 0 18px;
border-bottom 1px solid rgba(7, 17, 27, .1);
.rating-setting
padding 12px 18px;
font-size 0;
color rgb(147, 153, 159);
.icon-check_circle
margin-right 4px;
font-size 24px;
&.highlight
color #00c850;
.text
font-size 12px;
line-height 24px;
vertical-align top;
.rating-list
padding 18px 18px 0px 18px;
border-top 1px solid rgba(7, 17, 27, .1);
.item-rating
display flex;
padding 18px 0;
font-size 12px;
border-bottom 1px solid rgba(7, 17, 27, .1);
&:first-child
padding-top 0;
.avart
margin-right 12px;
img
width 28px;
height 28px;
border-radius 50%;
.content
font-size 10px;
line-height 12px;
.username
color rgb(7, 17, 27);
.user-score
color rgb(147, 153, 159);
.score
display inline-block;
.text
margin-bottom 7px;
font-size 12px;
line-height 18px;
color rgb(7, 17, 27);
.thumbs-up
.split
margin-right 8px;
&:last-child
margin-right 0;
.icon-thumb_up
color #00a0dc;
.icon-thumb_down
color rgb(183, 187, 191);
.thumb-item
display inline-block;
padding 0px 6px;
margin-bottom 4px;
line-height 16px;
font-size 9px;
color rgb(147, 153, 159);
border-radius 2px;
background-color rgb(255, 255, 240, .1);
border 1px solid rgba(7, 17, 27, .1);
</style>
应该是你使用了better-scroll的原因，默认它会阻止touch事件。所以在配置中需要加上click: true