vue实现移动端滑动隐藏内容

时间：2021-06-22 22:18:58 收藏：0 阅读：51

<div class="popup">
     <span @click="ChangeOrders(index)" >点击显示</span><!--index是循环数组的下标  -->     
     <div class="ordermsg popuptext" v-if="msgShow==index">
        <span>选项一</span>
        <span>选项二</span>
        <span >选项三</span>
     </div>                         
</div>

data(){

return{
　　　　msgShow:-1
  }
}
methods:{

 ChangeOrders(index){
     this.msgShow = this.msgShow == index ? -2 : index;//判断条件，点击显示，再次点击隐藏
 },

handleScroll(){//滑动隐藏条件

this.msgShow=‘-2‘

}，

},

mounted(){

window.addEventListener("touchmove", this.handleScroll, true); //滑动隐藏不影响点击显示/隐藏

}

原文：https://www.cnblogs.com/rouyhx/p/14919829.html