E企盈营销工具技术服务商 热线:4006-838-530

微信小程序组件movablearea穿透性问题

E企盈直播平台营销卖货系统

使用场景:在页面中,通过拖动图标,可以在手机窗口中随处移动,且不超出手机窗口范围。movable-area 的可移动区域,注意:movable-area 必须设置width和height属性,不设置默认为10pxmovable-view 可移动的视图容器,在页面中可以拖拽滑动,详情查看小程序官方文档问题1:首次进入页面,拖动图片页面,图片随着鼠标移动。滚动页面后,再去移动图片,图片消失。滚动数据依旧变化,将movable-view 设为 z-index: 999 !important仍看不到图片。官方之处:movable-view目前只能在movable-area里面移动。如果你需要在手机可视区域移动,那请尝试将movable-area撑满整个可视区域。HTML:movable-view class=’navigation’ catchtap=’navigation’ catchtouchmove=’move’ style=’top:{{top}}px !important;left:{{left}}px !important; z-index: 999 !important’ inertia=”false”  image src=’../../images/common/scan@2x.png’ class=’float-icon’/image/movable-viewJS:Component({  data: {    top: 456,//初始显示坐标 单位px    left: 346,  },  methods: {    move(e) {//移动时触发的方法      let that = this;      that.setData({        top: e.changedTouches[0].pageY,//重置坐标        left: e.changedTouches[0].pageX      })    },  }})CSS:.navigation {    position: fixed;    width: 58rpx;    height: 58rpx;    border-radius: 50%;    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4);    display: flex;    justify-content: center;    z-index: 999;}.float-icon {  width: 58rpx;  height: 58rpx;}问题二:将movable-view 设置占满手机窗口,由于层级太高,导致页面点击事件失效。JS:onLoad: function(options) {    let that = this    wx.getSystemInfo({      success: function (res) {        that.setData({          screenHeight: res.windowHeight,          screenWidth: res.windowWidth        })      },    })  },HTML:  movable-area style=”width:{{screenWidth}}px;height:{{screenHeight-50}}px;”    movable-view x=”{{x}}” y=”{{y}}” direction=”all”      image src=’../../images/common/scan@2x.png’/image    /movable-view  /movable-area问题三:解决movable-area优先级太高问题,通过z-index 将movable-area 设置为 -1。页面上的可以实现点击事件,但是可移动的浮动图标在页面的最底层,导致无法移动浮动的图标。兜兜转转,回到原点。movable-area由于优先级过高,导致的点击事件无法穿透性问题。那么将movable-area 置于最外层标签,将页面中的内容都放置在movable-area 内容中。同时将页面中的内容高度设置为窗口高度,设置overflow-y: scroll;使页面可以滑动。可以到达页面可以上拉页面,同时浮动图标也可以在窗口中到处移动。HTML:movable-area style=”width:{{screenWidth}}px;height:{{screenHeight-40}}px;”  view class=’container’ style=’height:{{screenHeight-40}}px;overflow-y:scroll;’    主要内容。。。。    movable-view x=”{{x}}” y=”{{y}}” direction=”all”      image src=’../../images/common/scan@2x.png’/image    /movable-view  /view/movable-area问题四:虽说浮动的图标可以到处移动之后,又产生了新的问题:对于列表信息,上拉加载更多无法触发 onReachBottom 事件。有一种刚把一个坑填了,又挖了一个坑给自己。通过查看小程序社区,有很多关于无法触发 onReachBottom 事件的解决方案。将外面层 movable-area 注释掉,则 class 为 container 的那个 view 标签可以触发上拉触底事件。那么问题来了,为了图标到处移动和页面可以实现触发点击事件,因此添加的在最外层添加 movable-area 标签,却导致无法触发页面上拉触底事件。除了页面的上拉触底事件之外,scroll-view同样可以到达上拉加载更多效果。小程序官方文档movable-area style=”width:{{screenWidth}}px;height:{{screenHeight}}px;”   scroll-view scroll-top=”{{scrollTop}}” scroll-y=”true” style=”height:{{screenHeight}}px;” bindscrolltolower=”bindDownLoad” bindscroll=”scroll”    主要内容。。。    movable-view style=’ position: fixed;’ x=”{{x}}” y=”{{y}}” direction=”all”      image src=’../../images/common/scan@2x.png’ bindtap=’scan’/image    /movable-view  /scroll-view/movable-areabindDownLoad: function() {  if (this.data.page == this.data.totalPages || this.data.page this.data.totalPages){    this.setData({      moreData: false    })    return;  }  this.setData({    page: this.data.page + 1  })  this.getRecommend(‘state’)},通过 bindscroll 滚动触发,来实时计算滚动位置 scrollTop。当页面滚动了一定的距离,即 scrollTop 大于一定值之后,我们将显示回到顶部的图标。scroll(e){  var scrollTop = e.detail.scrollTop  var backTopValue = scrollTop 200 ? true : false  this.setData({    backTopValue: backTopValue  })},回到顶部:view class=’goTop’ hidden='{{!backTopValue}}’ bindtap=”backTop”  image src=’../../images/common/backtop@2x.png’/image/viewJS:backTop: function() {  // 控制滚动  this.setData({    scrollTop: 0  })},

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序组件movablearea穿透性问题
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏