1. 程式人生 > >vue.js 1.0中用v-for遍歷出的li中的@click事件在移動端無效

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

play 需要 data class import child exp ons rec

在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事件在移動端無效