vue.js 1.0中用v-for遍曆出的li中的@click事件在移動端無效

標籤：splay   stylus   事件   compare   circle   display   lan   js使用   服務態度   

在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

vue.js 1.0中用v-for遍曆出的li中的@click事件在移動端無效