小程序悬浮按钮,悬浮导航球
一个开源的悬浮按钮组件,小程序原生支持。
一直很喜欢华为的导航按钮,能够完美适合大屏手机,自由停放位置,不论是左手习惯还是右手习惯,都很方便(可能我手比较小,左右上角够不着)。
支持功能
- 支持自由拖动,停放
- 支持自定义事件(单击,双击,长按)
- 支持自定义导航球中间的文字/图片
开发难点
使用wxs
悬浮球的开发思路比较简单,一个view,样式position:fixed
,支持拖动。在web开发中,我们能够比较容易实现这样的功能。要想在小程序中实现高性能的交互动画(touch类),一定要了解如何使用页面的wxs
这个残疾JS来操作对象(调试很麻烦,js极度残疾)
<wxs module="tool">
function tStart(e, ins){}
function tMove(e, ins){
e.instance.setStyle('transform: translate3d(...)')
// e.instance指向当前操作对象
// setStyle 设置该对象的style样式
}
function tEnd(e, ins){}
module.exports = {
tStart: tStart,
tMove: tMove,
tEnd: tEnd
}
</wxs>
<view catch:touchstart="{{tool.tStart}}" catch:touchmove="{{tool.tMove}}" ... />
这里使用catch,而不是使用bind来绑定事件,事件指向wxs
的方法。考虑到悬浮导航球是作为工具在其他场景中使用,为了不会污染touch事件,或者导致页面不必要的滚动。
位移距离
手机宽高不一致,即x轴的运动距离小于y轴运动距离(单位时间),假定手机宽高比为1:2,x轴运动1px,y轴则运动了2px,我们可以设置一定的系数,使得拖动效果符合预期。
监听事件
最终的事件响应一定是在page页面(或者组件内部)实现事件监听,wxs有一套事件调用机制
function tStart(e, ins){
ins.callMethod('onTouchStart', e)
// 调用当前组件/页面在逻辑层(App Service)定义的函数。funcName表示函数名称,args表示函数的参数
}