vue.js 1.0中用v-for遍历出的li中的@click事件在移动端无效

Posted 2020-10-10 山高我为峰

在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

具体的配置还可以查看 https://github.com/ustbhuangyi/better-scroll