首页 > 移动平台 > 详细

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

时间:2021-06-22 22:18:58      阅读:51      评论:0      收藏:0      [点我收藏+]
<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);    //滑动隐藏不影响点击显示/隐藏       
   }
 
 
 

 

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!