如題,在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>
添加回答
舉報
0/150
提交
取消