<script> import card from '@/components/card' export default { data () { return { userInfo: {}, commitInfo:[ { img:"http://img3.imgtn.bdimg.com/it/u=3067730600,935028889&fm=27&gp=0.jpg", name:"旺财", sonName:"今晚去吃饭吗?", time:"19:08", infoNum:"9", top:false, type:0 }, { img:"http://img1.imgtn.bdimg.com/it/u=1257196754,3171363795&fm=27&gp=0.jpg", name:"前端学习群", sonName:"hanber：异步与同步的问题", time:"02:08", infoNum:"99+", top:false, type:0 }, { img:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1672209094,624238697&fm=27&gp=0.jpg", name:"小学同学", sonName:"好久不见，最近好吗？", time:"02:08", infoNum:"9", top:false, type:0 }, { img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1312347818,1612941824&fm=200&gp=0.jpg", name:"老妈", sonName:"啥时候回家一趟呀？", time:"23:08", infoNum:"1", top:false, type:0 }, { img:"http://img2.imgtn.bdimg.com/it/u=1093392508,3329264726&fm=27&gp=0.jpg", name:"AD动漫群", sonName:"ghost:《你的名字》求资源", time:"02:08", infoNum:"99+", top:false, type:0 } ] } }, components: { card }, methods: { // 滑动开始 touchStart(e){ // 获取移动距离，可以通过打印出e，然后分析e的值得出 this.startX = e.mp.changedTouches[0].clientX; }, // 滑动结束 touchEnd(e,index){ // 获取移动距离 this.endX = e.mp.changedTouches[0].clientX; if(this.startX-this.endX > 10){ for(let i=0;i<this.commitInfo.length;i++){ this.commitInfo[i].type = 0 } this.commitInfo[index].type = 1 } else if(this.startX-this.endX < -10){ for(let i=0;i<this.commitInfo.length;i++){ this.commitInfo[i].type = 0 } } }, // 点击回复原状 recover(index){ this.commitInfo[index].type = 0 }, getUserInfo () { // 调用登录接口 wx.login({ success: () => { wx.getUserInfo({ success: (res) => { this.userInfo = res.userInfo } }) } }) }, // 置顶 top(index){ this.commitInfo[index].top = !this.commitInfo[index].top; this. recover(index); }, // 删除 delect(index){ this.commitInfo.splice(index,1); } }, created () { // 调用应用实例的方法获取全局数据 this.getUserInfo() } } </script>
总结
以上所述是小编给大家介绍的mpvue小程序仿qq左滑置顶删除组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: