亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

ime2016 2016-12-16 23:29:03
如題,在vue.js使用v-for遍歷出的li中的@click事件在移動端無效,在網頁端可以執行,代碼如下:<code> <template> ????<div?class="goods"?> ????????<div?class="menu-wrapper"?v-el:menu-wrapper>? ????????????<ul> ????????????????<li?v-for="item?in?goods"?@click="selectMenu($index)"?class="menu-item"?:class="{'current':currentIndex?===?$index}"> ????????????????????<span?class="text"> ????????????????????????<span?v-show="item.type?>?0"?class="icon"></span>{{item.name}} ????????????????????</span> ????????????????</li> ????????????</ul> ????????</div> ????????<!--v-el:foo??為DOM元素注冊一個索引,方便通過所屬實例的$els訪問這個元素?,?這里不能使用駝峰命名?--> ????????<div?class="foods-wrapper"?v-el:food-wrapper> ????????????<ul> ????????????????<li?class="foods-list?food-list-hook"?v-for="item?in?goods"> ????????????????????<h1?class="title">{{item.name}}</h1> ????????????????????<ul> ????????????????????????<li?class="food-item"?v-for="food?in?item.foods"> ????????????????????????????<div?class="icon"> ????????????????????????????????<img?:src="food.icon"?alt=""?height=57?width=57> ????????????????????????????</div> ????????????????????????????<div?class="content"> ????????????????????????????????<h2?class="name">{{food.name}}</h2> ????????????????????????????????<p?class="desc">{{food.description}}</p> ????????????????????????????????<div?class="extra"> ????????????????????????????????????<span?class="count">月售{{food.sellCount}}份</span><span>好評率{{food.rating}}%</span> ????????????????????????????????</div> ????????????????????????????????<div?class="price"> ????????????????????????????????????<span?class="new">¥{{food.price}}</span> ????????????????????????????????????<span?class="old"?v-show="food.oldPrice">¥{{food.oldPrice}}</span> ????????????????????????????????</div> ????????????????????????????</div> ????????????????????????</li> ????????????????????</ul> ????????????????</li> ????????????</ul> ????????</div> ????</div> </template> <script> ????import?BScroll?from?'better-scroll' ????const?ERR_OK?=?0; ????export?default?{ ????????props:{ ????????????seller:{ ????????????????type:Object ????????????} ????????}, ????????data(){ ????????????return?{ ????????????????goods:[], ????????????????listHeight:[], ????????????????scrollY:0 ????????????} ????????}, ????????created(){ ????????????this.$http.get('/api/goods').then((response)?=>?{ ????????????????response?=?response.body ????????????????if(response.errno?===?ERR_OK){ ????????????????????this.goods?=?response.data ????????????????????this.$nextTick(()?=>?{ ????????????????????????this._initScroll() ????????????????????????this._calculateHeight() ????????????????????}) ????????????????????console.log(response.data) ????????????????} ????????????}) ????????}, ????????computed:{ ????????????currentIndex(){ ????????????????for?(var?i?=?0;?i?<?this.listHeight.length;?i++)?{ ????????????????????let?height1?=?this.listHeight[i] ????????????????????let?height2?=?this.listHeight[i+1] ????????????????????if(!height2?||?(this.scrollY>=height1?&&?this.scrollY?<?height2)){ ????????????????????????return?i ????????????????????} ????????????????} ????????????} ????????}, ????????methods:{ ????????????_initScroll(){ ????????????????this.menuScroll?=?new?BScroll(this.$els.menuWrapper,{}) ????????????????this.foodScroll?=?new?BScroll(this.$els.foodWrapper,{ ????????????????????probeType:3 ????????????????}) ????????????????this.foodScroll.on('scroll',?(pos)?=>?{ ????????????????????this.scrollY?=?Math.abs(Math.round(pos.y)) ????????????????}) ????????????}, ????????????_calculateHeight(){ ????????????????let?foodList?=?this.$els.foodWrapper.getElementsByClassName('food-list-hook') ????????????????let?height?=?0 ????????????????this.listHeight.push(height) ????????????????for?(var?i?=?0;?i?<?foodList.length;?i++)?{ ????????????????????let?item?=?foodList[i] ????????????????????height+=item.clientHeight ????????????????????this.listHeight.push(height) ????????????????} ????????????}, ????????????selectMenu(index){ ???????????? ????????????????console.log(index) ???????????????? ????????????????let?foodList?=?this.$els.foodWrapper.getElementsByClassName('food-list-hook') ????????????????let?el?=?foodList[index] ????????????????this.foodScroll.scrollToElement(el,?300) ????????????} ????????} ????}; </script> </code>
查看完整描述

2 回答

?
書_齋

TA貢獻1條經驗 獲得超0個贊

vue 也是剛在學 ,對于移動端的 不是有個?

vue-touch 插件

來做點擊事件,你試看看

查看完整回答
反對 回復 2016-12-18
  • 2 回答
  • 0 關注
  • 9894 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號