# 实现目标 1. 商品卡片点击右上角的时候，弹出遮罩层以及对话框 2. 当点击遮罩层/滑动窗口时的时候，对话框隐藏 3. 点击对话框选项后显示减少推荐信息 ![实现目标.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5fd5c0fa1ca742848f19078ae5358336~tplv-k3u1fbpfcp-watermark.image?) # 实现效果 ![实现效果.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/825cef0b280f4bf2bf31891723ed7949~tplv-k3u1fbpfcp-watermark.image?) # 具体实现思路和需要注意的点 1. 气泡对话框的实现主要分为三角形元素和矩形元素，通过y轴偏移拼接在一起形成对话框 2. 由于气泡对话框可能为上方弹出，或者下方弹出，因此三角形会存在上下两个。 ![气泡对话框.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ef5d6bd6c694b51a1d1b58f18a73f59~tplv-k3u1fbpfcp-watermark.image?) 3.左右两侧的对话框，由于右侧靠近屏幕边缘，因此矩形的X轴偏移量不一样。 ![右侧对话框.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2b897803ac5948c491c264c8d5ebe962~tplv-k3u1fbpfcp-watermark.image?) ![左侧对话框.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d923de860a44609be701b67021b82f8~tplv-k3u1fbpfcp-watermark.image?) ```css // 三角形元素样式 .triangle { width: 0rpx; height: 0rpx; border: 25rpx solid transparent; border-bottom: 25rpx solid #fff; } // 对话框矩形样式 .dialgo-div { height: 350rpx; width: 200rpx; background: #fff; transform: translate(var(--translateX),-2rpx); // 左右两列矩形的X轴偏移量不同，因此需要通过计算动态传入 border-radius: 10rpx; overflow: hidden; } .bottom-triangle { width: 0rpx; height: 0rpx; border: 25rpx solid transparent; border-top: 25rpx solid #fff; transform: translate(-15rpx, -5rpx);//偏移Y轴重合对话框，x偏移量，使三角形对准 "x" 图标 } ``` 4. 通过点击事件获取点击右上角x后获得event.detail内的x,以及y变量是相对页面元素整体的偏移量，并不是相对于屏幕的偏移量（页面元素高度可能会大于屏幕高度，因此获得的y可能会大于屏幕高度）。由于我事先弹出对话框时基于fixed布局，top和left变量是基于屏幕坐标，因此需要通过计算得出基于屏幕的top偏移量（x轴不溢出屏幕，因此可以直接应用x轴偏移量）。计算点击时相对于屏幕的偏移量，可以通过监听页面滚动方法***onPageScroll***获取当前页面滚动顶部部的y轴量，***使用点击处的y轴偏移量 - 当前页面顶部的y轴偏移量就可以得出当前点击元素相对于屏幕的y轴偏移量***，在***Page***下填入 ```js // debounce为防抖函数 onPageScroll:function(event) { const that = this; debounce(function(){ that.setData({ scrollTop: Math.ceil(event.scrollTop) }); }, 100)(); }, ``` **debounce**为防抖函数，由于**onPageScroll**会被频繁触发，为了避免拖动时频繁触发**setData**函数更新造成页面卡顿，而我们实际只需要拖动结束后获取这个值就行，所以引入了防抖函数，具体实现为 ```js /** * 防抖函数 * @param {*} fun 需要进行防抖的函数 */ export function debounce(fun, delay = 500, immediate= false) { let timer = null; // 保存定时器 return function(args) { let that = this; let _args = args; if(timer) clearTimeout(timer); if(immediate) { if(!timer) fun.apply(that,_args); // 定时器为空表示可以执行 timer = setTimeout(function() { timer = null;// 到时间后设置定时器为空 },delay); } else { // 如非立即执行，则重设定时器 timer = setTimeout(function() { fun.call(that,_args); },delay); } } } ``` 在***Page***页面获取到***scrollTop***后通过***prop***传入到组件中在点击事件中进行计算。 5. 计算对话框从上弹出还是下弹出，通过第四点，我们已经计算出了当前的对话框需要偏移的***left***和***top***值。如果***top***值加上对话框的高度大于整个屏幕的高度时，表示对话框溢出屏幕，此时就需要在上方弹出。获取屏幕信息的接口是***wx.getSystemInfoSync()*** 6. 底部的导航栏如果为系统原生，属于是最顶层元素，手写的遮罩层无法遮盖住导航栏，因此需要引入***wx.hideTabBar()*** 接口，当点击时隐藏底部导航栏，遮罩层消失时，重新显示，接口为***wx.showTabBar***。（有遮罩层置顶的处理方法欢迎提出） 7. 当页面进行滚动时，对话框及遮罩层也隐藏，因此在***Page***的滚动事件中再引入，当滚动时设置***isScrolling***为***true***，传入组件，在组件中监听***obeserver***，当变量改变为***true***的时候隐藏遮罩层以及对话框。 8. 遮罩层使用简单的fixed布局，设置***z-index***来进行遮盖。点击对话框选项后，显示减少推荐，使用简单**absolute**布局。 ![减少推荐.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0c92aeb3acfd4b0ba96a1e9dd338dd6a~tplv-k3u1fbpfcp-watermark.image?) # 组件完整代码 ***页面的onPageScroll函数*** ```js onPageScroll:function(event) { // 滚动时隐藏对话框和遮罩层 if(!this.data.isScrolling) { this.setData({ isSrolling: true }); } const that = this; debounce(function(){ that.setData({ scrollTop: Math.ceil(event.scrollTop), isSrolling: false }); }, 100)(); } ``` ***组件wxml*** ```js

上新时尚百搭双肩奶爸包多功能两用妈咪包防水休闲学生包可定制￥ 999.86

您的反馈已收到会减少此类内容的推荐 ``` ***组件wxss*** ```js .odd-card { width: 350rpx; height: 0rpx; background: #fff; border: 1px solid #E4E7ED; border-radius: 4px; position: absolute; left: 375rpx; top: 0rpx; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); transition: 2s all ease-in-out; overflow: hidden; } .even-card { width: 350rpx; height: 0rpx; background: #fff; border: 1px solid #E4E7ED; border-radius: 4px; position: absolute; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); transition: 2s all ease-in-out; overflow: hidden; } .info-panel { font-size: 28rpx; display: flex; flex-direction: column; height: 100rpx; } .info-title { padding-left: 2.5%; padding-right: 2.5%; width: 95%; font-size: 25rpx; overflow: hidden; text-overflow:clip; display: -webkit-box; -webkit-line-clamp: 2; /*限制文本行数*/ -webkit-box-orient: vertical; word-break: break-all; } .new-tag { font-size: 20rpx !important; } .price-tag { height: 0rpx; flex-grow: 1; font-size: 25rpx; display: flex; align-items: center; } .price-signal-container { width: 50%; color: red; text-align: center; } .price-signal { font-size: 20rpx; } .close-icon-container { position: absolute; top: 15rpx; left: 310rpx; font-size: 15rpx; text-align: center; } .close-icon-inside-container { height: 25rpx; width: 25rpx; } .popover-wrapper { position: fixed; width: 750rpx; height: 100vh; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.5); z-index: -1; display: none; opacity: 0; animation-name: hide; animation-duration: .3s; } .popover-wrapper-active { position: fixed; width: 750rpx; height: 100vh; top: 0px; left: 0px; opacity: 1; animation-name: show; animation-duration: .3s; animation-fill-mode: forwards; z-index: 1999; background: rgba(0, 0, 0, 0.5); } .cancel-cover { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background-color: rgba(256, 256, 256, 0.8); display: flex; justify-content: center; align-items: center; font-size: 25rpx; } .cancel-cover-deactive { display: none; } .cancel-text-container { width: 80%; } @keyframes show { from { opacity: 0; } to { opacity: 1; } } @keyframes hide { from { opacity: 1; } to { opacity: 0; } } .buble-dialog { display: none; animation: bubleShow .3s ease-in-out; animation-fill-mode: forwards; animation-direction: reverse; } .buble-dialog-open { --translateX: '0rpx'; position: fixed; z-index: 2000; display: block; animation: bubleShow .3s ease-in-out; animation-fill-mode: forwards; } @keyframes bubleShow { from { opacity: 0; } to { opacity: 1; } } .dialgo-div { height: 350rpx; width: 200rpx; background: #fff; transform: translate(var(--translateX),-2rpx); border-radius: 10rpx; overflow: hidden; } .triangle { width: 0rpx; height: 0rpx; border: 25rpx solid transparent; border-bottom: 25rpx solid #fff; transform: translateX(-15rpx); } .bottom-triangle { width: 0rpx; height: 0rpx; border: 25rpx solid transparent; border-top: 25rpx solid #fff; transform: translate(-15rpx, -5rpx); } .hidden-triangle { display: none; } .dialog-menu-item { color: #323233; height: 69rpx; font-size: 20rpx; width: 100%; border-bottom: 1px solid #ebedf0; display: flex; justify-content: center; align-items: center; transition: .2s background ease-in-out; } .dialog-menu-item:hover { background: #e1f3d8; transition: .2s background ease-in-out; } .dialog-menu-item:last-child { border-bottom: none; } ``` ***组件js*** ```js Component({ /** * 组件的属性列表 */ lifetimes: { attached() { let val = '-80rpx'; if(this.properties.index % 2) { val = '-148rpx' } this.setData({ translateX: val }) } }, properties: { index: { type: Number, value: 0, /* observer: function(newVal, oldVal) { let top = `${(newVal / 2 ) * 460}rpx`; let left = `25rpx`; if(newVal % 2) { top = `${(Math.floor(newVal / 2))* 410}rpx`; if(newVal == 1) { // console.log(top); } left = `375rpx`; } this.setData({ top: top, left: left }); }*/ observer: function (newValue, oldValue) { if ((newValue % 2)) { this.setData({ left: "375rpx" }) } } }, itemData: { type: Object, value: { imageUrl: '', top: '0rpx', left: '0rpx', realHeght: '450rpx' }, observer: function (newValue, oldValue) { this.setData({ top: newValue.top, left: newValue.left, realHeght: newValue.realHeight }) } }, scrollTop: { type: Number, value: 0, observer: function (newValue) { // console.log(newValue); } }, isSrolling: { type: Boolean, value: false, observer: function (newValue) { if (newValue && this.data.show) { wx.showTabBar({ animation: true, }) this.setData({ show: false }) } } } }, /** * 组件的初始数据 */ data: { left: `25rpx`, // 组件left值 top: '0rpx', //组件top值 realHeght: `450rpx`, // 组件真实高度 show: false, // 用于控制点击组件右上角x后，遮罩层和对话框是否显示 dialogTop: '300rpx', // 对话框的top坐标 dialogLeft: '350rpx', // 对话框的left坐标 dialogDirection: 'bottom', // 对话框显示的位置 translateX: '-80rpx', // 对话框的x偏移值，右边列显示对话框时需要向左偏移更多（-148rpx） isCanceled: false, menuItems: [ { text: '不感兴趣' }, { text: '品类不喜欢' }, { text: '已经买了' }, { text: '图片引起不适' }, { text: '涉及隐私' } ] }, /** * 组件的方法列表 */ methods: { // 组件右上角 x ，关闭点击事件 closeTap: function (event) { // 重复点击也关闭遮罩层 if(this.data.show) { wx.showTabBar({ animation: true, }); this.setData({ show: false, }); return ; } let result = wx.getSystemInfoSync(); // 获取系统信息 let windowHeight = Math.floor(result.windowHeight); // 获取系统窗户高度 let windowWidth = Math.floor(result.windowWidth); // 获取系统窗户宽度 let x = Math.floor(event.detail.x); // 获取点击的x坐标 let y = Math.floor(event.detail.y); // 获取点击的y坐标 // 计算当前元素（y坐标 - scrollTop) 获取当前元素在屏幕处的Y坐标，再加上弹出对话框的高度 // 如果所得数值大于当前屏幕的高度（或再减去81（底部导航栏高度）），证明数值溢出，则显示为顶部对话框，否则则显示为底部对话框。 let dialogDirection = (y - this.properties.scrollTop + windowWidth / 750 * 400) >= windowHeight - 81 ? 'up' : 'bottom'; //console.log({windowHeight}) //console.log({y:y - this.properties.scrollTop}) //console.log({event}) wx.hideTabBar(); // 隐藏底部 // 根据顶部对话框或底部对话框计算top的值 // 底部对话框的top值为当前窗口的绝对y坐标，计算方式为(点击坐标y值 - 当前页面的scrollTop) // 顶部对话框top值为底部对话框top值的基础上 - 对话框的高度； let tempTop = dialogDirection == 'up' ? `calc(${y - this.properties.scrollTop}px - 400rpx)` : `${y - this.properties.scrollTop}px`; this.setData({ dialogTop: tempTop, dialogLeft: `${x}px`, show: true, dialogDirection: dialogDirection }) }, // 遮罩层点击事件 wrapperTap: function (event) { this.setData({ show: false }); wx.showTabBar({ animation: true, }) }, // 菜单点击事件 menueTap: function() { /*this.triggerEvent('deleteItem',this.properties.index); this.setData({ show: false })*/ this.setData({ show: false, isCanceled: true }) } } }) ``` # 可优化遮罩层使用Vant组件自带的遮罩层，提供更优化的动画。完善点击取消后的动画。欢迎交流学习。创作不易，点个赞吧。