网站建设相关制度,南京前十名传媒广告公司,品牌运营,地方生活门户网站话不多说#xff0c;先上效果图 这个功能实现思路:
首先先拿到这一张整图(快捷#xff0c;精确)然后获取整个导航栏高度(自定义导航栏,非自定义导航栏忽略这一步)获取三个点的做偏移量#xff0c;把高度和偏移量给到一个定位到盒子#xff0c;这个盒子里就放这个图片…话不多说先上效果图 这个功能实现思路:
首先先拿到这一张整图(快捷精确)然后获取整个导航栏高度(自定义导航栏,非自定义导航栏忽略这一步)获取三个点的做偏移量把高度和偏移量给到一个定位到盒子这个盒子里就放这个图片然后给这个盒子再使用transform设置偏移量调整到一个合适的位置 下面是代码步骤 view classtip :style[{ top: nav_height px }]!-- view styleheight:80rpx;background-color: yellow;/view放置别的模块 --view classcare-box v-ifdropToastview :class[care,] :style[{left:dropOffsetpx}] click.stop(){} :animationanimationDataimage classcare-bgc srcxxx.png /view classclose-box click.stopcloseCare/view/view/view/view// 获取顶部导航栏getNav(){const system wx.getSystemInfoSync()const res uni.getMenuButtonBoundingClientRect()const statusHeight res.top //胶囊距离顶部const navHeight res.height //胶囊高度// 胶囊顶部距离状态栏的距离等同于胶囊底部与页面顶部的距离const spacing res.top - system.statusBarHeight// 页面纵标的起始位置const pageStart res.bottom spacing// 根据需要多几个px偏移量this.nav_height pageStart 3 pxconsole.log(pageStart)}// 获取三个点中间的那个左偏移量getOffSet() {const rect wx.getMenuButtonBoundingClientRect();const drop Math.floor(rect.width/2/2)this.dropOffset rect.left drop}, .tip {position:fixed;left:0;right:0;z-index: 999;}.care-box {position: relative;width: 100%;display:flex;transform: translateY(10rpx);.care {position: absolute;bottom:0;transform: translate(-55%,90%);opacity:0;margin-right:12rpx;.care-bgc {width: 286rpx;height: 83rpx;}.close-box {position: absolute;z-index: 11;top: 10rpx;right: 0rpx;width: 50rpx;height: 40rpx;}}}end !
