微信小程序浮动按钮_微信小程序浮动按钮的实现
赞
踩
需求
产品要求在每个页面上都加一个浮动按钮，上面一个电话图标，点击后给VIP联系人拨打电话。我想这个简单，一两个小时应该就实现了吧。于是我折腾了差不多两天。
初步构想
记得以前看小程序组件文档时有一个movable-view，可以拿来用一下。结果真正使用时才发现，movable-view外面需要套一个movable-area才可以。没关系，套上好了。
首先，建一个组件，叫phone好了，最外层是movable-area，里面是movable-view，再里面是一个普通view，加一个hover-class可以实现点击状态。把这个组件加个每一个页面上。
movable-view的移动范围是根据外层的movable-area来确定的，所以movable-area应该铺满全屏，但这样一来就把页面上其他内容全部挡住了。那就利用touchstart/touchend事件判断是浮动按钮是否被按下，按下的状态就设置movable-area大小为按钮大小，位置为按钮的位置(通过设置transform样式实现)，而没有按下的状态，再让它恢复成全屏大小，位置为(0,0)(transform:none).
试验了一下，初始位置调为左上角，第一次拖动是正常的，第二次拖就不对劲了。虽然第二次拖动movable-view的初始位置是正确的，但它的change事件中得到的坐标却是从(0,0)也就是被点击那一瞬间开始算的，虽说此时已经把movable-area的位置、大小恢复了。
通用方案
既然movable-view不好用，那就改成普通view算了，通过touchmove事件改变其位置，这样应该比较简单，虽说可能不如movable-view拖起来流畅。但对于支持下拉刷新的页面，拖动浮动按钮时，往往就下拉刷新了。此时即使catch页面上某些veiw的touchmove方法，也是不管用的。因为下拉刷新不是view的下拉，而是整个页面的下拉，也没有办法阻止冒泡什么的。自定义Modal的mask层也有同样的问题，但好在一般用户不会去拖动mask层，但浮动按钮却是必拖无疑问的。
如果可以忍的话，这个方案是可行的。但是，不能忍啊。于是我开始了无休止的纠结，甚至一度想干脆让这个浮动按钮直接固定在右下角算了。
最终实现
又经过长时间的反复试验，我发现movable-view直接用也是可以的，但直接用的话change事件不太灵敏，干脆不让它change，能不让页面下拉刷新也是好的。不过呢，direction设为none以后，它的表现和普通view一样，拖动时页面照样会下拉刷新。最后只得设成了vertical，这样会有一个小小的bug，让最终的方案不是那么完美。
下面是我的代码：
components/phone/index.wxml
components/phone/index.wxss
.make-phone-call-movable {
display: block;
position: fixed;
width: 108rpx;
height: 108rpx;
z-index: 1301;
}
.make-phone-call-movable.hidden {
display: none;
}
.make-phone-call {
background-color: #C00000;
background-image: url('data:image/png;base64,...');
background-repeat: no-repeat;
background-position: 28rpx 28rpx;
background-size: 52rpx 52rpx;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
top: 0;
width: 108rpx;
height: 108rpx;
z-index: 1301;
}
.make-phone-call-hover {
background-color: #B40000;
}
components/phone/index.js
const app = getApp()
const util = require('../../utils/util.js')
const POSITION_KEY = 'phoneCallButtonPosition'
Component({
properties: {
hasTabbar: {
type: Boolean,
value: false
}
},
data: {
name: '',
mobile: '',
rectangless: {
left: 8,
top: 8,
right: 313,
bottom: 486
},
touched: false,
left: 0,
top: 0
},
methods: {
onTouchMove(e) {
const currentX = e.touches[0].pageX
const currentY = e.touches[0].pageY
let left = this.lastLeft + currentX - this.lastX
let top = this.lastTop + currentY - this.lastY
left = Math.min(Math.max(left, this.data.rectangle.left), this.data.rectangle.right)
top = Math.min(Math.max(top, this.data.rectangle.top), this.data.rectangle.bottom)
this.setData({
left: left,
top: top
})
},
onTouchStart(e) {
this.lastX = e.touches[0].pageX
this.lastY = e.touches[0].pageY
this.lastLeft = this.data.left
this.lastTop = this.data.top
this.setData({
touched: true
})
},
onTouchEnd(e) {
this.setData({
touched: false
})
const leftDiff = Math.abs(this.lastLeft - this.data.left)
const topDiff = Math.abs(this.lastTop - this.data.top)
if (leftDiff === 0 && topDiff === 0) {
this.makePhoneCall()
} else {
this.playAnimation()
}
},
makePhoneCall() {
const name = this.data.name
const mobile = this.data.mobile
const language = app.globalData.language
if (!mobile) return
let message = util.getStrings('app', language).phone_call
message = message.replace(/{contact}/g, name)
util.showConfirmAlert(language, message, () => {
wx.makePhoneCall({
phoneNumber: mobile
})
})
},
getMobile() {
app.doGet('getMemberInfo', {}).then(res => {
let name = ''
let mobile = ''
if (res && res.contact) {
name = res.contact.name ? res.contact.name : '',
mobile = res.contact.mobile ? res.contact.mobile : ''
}
this.setData({
name: name,
mobile: mobile
})
}).catch(e => {
console.error(e)
this.setData({
name: '',
mobile: ''
})
})
},
getRectangle() {
const systemInfo = util.getSystemInfoSync()
const windowWidth = systemInfo.windowWidth
const windowHeight = systemInfo.windowHeight
const buttonSize = Math.round(windowWidth * 108 / 750)
const tabbarHeight = this.properties.hasTabbar ?
Math.round(windowWidth * 110 / 750) : 0
const margin = 8
const right = windowWidth - margin - buttonSize
const bottom = windowHeight - margin - tabbarHeight - buttonSize
this.setData({
rectangle: {
left: margin,
top: margin,
right: right,
bottom: bottom,
windowWidth: windowWidth,
windowHeight: windowHeight,
buttonSize: buttonSize,
tabbarHeight: tabbarHeight,
margin: margin
}
})
},
getPosition() {
const position = util.getStorageSync(POSITION_KEY)
this.getRectangle()
let left = this.data.rectangle.right
let top = this.data.rectangle.bottom
if (position) {
left = position.left
top = position.top
}
this.setData({
left: left,
top: top
})
},
playAnimation() {
const rectangle = this.data.rectangle
const lastLeft = this.data.left
const lastTop = this.data.top
let left = this.data.left
let top = this.data.top
left = left < (rectangle.windowWidth - rectangle.buttonSize) / 2 ?
rectangle.left : rectangle.right
top = top < rectangle.top + 20 ? rectangle.top :
(top > rectangle.bottom - 20 ? rectangle.bottom : top)
util.playAnimatoin(400, (value) => {
const currentLeft = lastLeft + (left - lastLeft) * value
const currentTop = lastTop + (top - lastTop) * value
this.setData({
left: currentLeft,
top: currentTop
})
})
const position = {
left: left,
top: top
}
util.setStorageSync(POSITION_KEY, position)
}
},
lifetimes: {
attached() {
this.getPosition()
this.getMobile()
}
},
pageLifetimes: {
show() {
this.getPosition()
this.getMobile()
},
resize(size) {
this.getRectangle()
}
},
})
wxss里的make-phone-call-hover样式没有用上，最后没有点击态了。js里的data/touched也没用上。
bug就是，这个浮动按钮可能被拖到上边缘以外，个人觉得尚能接受。目前在模拟器及安卓手机上运行良好。最后来张截图：
WechatIMG173.jpeg
