使用场景:在页面中,通过拖动图标,可以在手机窗口中随处移动,且不超出手机窗口范围。
movable-area 的可移动区域,注意:movable-area 必须设置width和height属性,不设置默认为10px
movable-view 可移动的视图容器,在页面中可以拖拽滑动,详情查看小程序官方文档
官方之处:movable-view目前只能在movable-area里面移动。如果你需要在手机可视区域移动,那请尝试将movable-area撑满整个可视区域。
HTML:
JS:
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;
}
JS:
onLoad: function(options) {
let that = this
wx.getSystemInfo({
success: function (res) {
that.setData({
screenHeight: res.windowHeight,
screenWidth: res.windowWidth
})
},
})
},
HTML:
兜兜转转,回到原点。
movable-area由于优先级过高,导致的点击事件无法穿透性问题。
那么将movable-area 置于最外层标签,将页面中的内容都放置在movable-area 内容中。
同时将页面中的内容高度设置为窗口高度,设置overflow-y: scroll;使页面可以滑动。
可以到达页面可以上拉页面,同时浮动图标也可以在窗口中到处移动。
HTML:
主要内容。。。。
通过查看小程序社区,有很多关于无法触发 onReachBottom 事件的解决方案。将外面层 movable-area 注释掉,则 class 为 container 的那个 view 标签可以触发上拉触底事件。
那么问题来了,为了图标到处移动和页面可以实现触发点击事件,因此添加的在最外层添加 movable-area 标签,却导致无法触发页面上拉触底事件。
除了页面的上拉触底事件之外,scroll-view同样可以到达上拉加载更多效果。小程序官方文档
主要内容。。。
bindDownLoad: 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
})
},
回到顶部:
JS:
backTop: function() {
// 控制滚动
this.setData({
scrollTop: 0
})
},