触摸实现拖动上拉和下滑显示菜单以及屏蔽微信的由XXX提供

移动端触摸后实现拖动上拉和下滑

// dom
<div class="view-site" :style="'bottom:' + setBottom + 'px'"><divclass="view-site__top"@touchstart.self="touchViewSiteHeight"@touchmove.self="touchViewSiteHeight"@touchend.self="touchViewSiteHeight">div>
div>

// 数据
data () {return {// 设置底部位置setBottom: -370,setBottomMsg: {fixedBottom: -370, // 固定高度，根据项目rem之类的可能会变动startClientY: 0, // 开始触摸时的clientYclientY: 0, // 当前Y值differenceY: 0 // 差值}}
},
methods: {// 触摸实现拖动的上划下拉功能touchViewSiteHeight (event) {if (event.type === 'touchstart') {this.setBottomMsg.clientY = event.changedTouches[0].clientYthis.setBottomMsg.startClientY = event.changedTouches[0].clientY} else if (event.type === 'touchmove') {this.setBottomMsg.differenceY = event.changedTouches[0].clientY - this.setBottomMsg.clientYthis.setBottomMsg.clientY = event.changedTouches[0].clientYthis.setBottom =parseInt(this.setBottom - this.setBottomMsg.differenceY) > 0? 0: parseInt(this.setBottom - this.setBottomMsg.differenceY) < this.setBottomMsg.fixedBottom? this.setBottomMsg.fixedBottom: parseInt(this.setBottom - this.setBottomMsg.differenceY)} else {if (this.setBottomMsg.startClientY - event.changedTouches[0].clientY > 0) {this.setBottom = 0this.showViewSiteDialog = true} else {this.setBottom = this.setBottomMsg.fixedBottomthis.showViewSiteDialog = false}}}
}

这里要注意，要隐藏浏览器自带的下拉刷新，或者微信的下拉由XXX提供

mounted () {document.body.addEventListener('touchmove',function (evt) {if (!evt._isScroller) {evt.preventDefault()}},{ passive: false })// fix:窗口自适应各个手机this.setBottom = this.setBottomMsg.fixedBottom = window.innerWidth / 750 * this.setBottom
},

// css
.view-site {position: fixed;bottom: 0;width: 100%;background-color: #fff;border-radius: 20px 20px 0px 0px;font-size: 28px;box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.4);padding-top: 86px;padding-bottom: 52px;
}
.view-site__top {width: 100%;height: 86px;position: absolute;top: 0;left: 0;
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！