评论

小程序悬浮按钮,悬浮导航球

一直很喜欢华为的导航按钮,能够完美适合大屏手机,自由停放位置,不论是左手习惯还是右手习惯,都很方便

一个开源的悬浮按钮组件,小程序原生支持。

一直很喜欢华为的导航按钮,能够完美适合大屏手机,自由停放位置,不论是左手习惯还是右手习惯,都很方便(可能我手比较小,左右上角够不着)。

支持功能

  • 支持自由拖动,停放
  • 支持自定义事件(单击,双击,长按)
  • 支持自定义导航球中间的文字/图片

开发难点

使用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表示函数的参数
}

wxs相关文档

GITHUB开源

DEMO及文档关注小程序

点赞 5
收藏
评论

5 个评论

  • Ken
    Ken
    03-06

    不错

    03-06
    赞同 1
    回复
  • 弓长张
    弓长张
    03-06
    不错
    03-06
    赞同 1
    回复
  • Admin²⁰²⁰
    Admin²⁰²⁰
    03-06

    有「球」必应

    给你的分享点赞

    03-06
    赞同 1
    回复
  • 做你的太阳ღ₅₂₀¹³¹⁴
    做你的太阳ღ₅₂₀¹³¹⁴
    03-19

    😂这个2年前做过了。。当时是做的点击然后旋转展开菜单。

    后来换成客服可以这样导出拖动。

    03-19
    赞同
    回复
  • haiger
    haiger
    03-06

    试了下demo滑动起来和手指触碰的位置会有一点误差,好像是越靠近上下两侧误差越大?

    话说为啥不用movable-view做呢

    03-06
    赞同
    回复 5
    • 天天修改
      天天修改
      03-06
      有点担心使用movable-view做容器会有问题
      03-06
      回复
    • 天天修改
      天天修改
      03-06
      有机会再试试
      03-06
      回复
    • 天天修改
      天天修改
      03-06
      那个不是误差,是调的一个系数值
      03-06
      回复
    • haiger
      haiger
      03-06回复天天修改
      请教下这么做有什么特别的用处吗
      03-06
      回复
    • 天天修改
      天天修改
      03-06
      我在开发工具上是正常的(没有系数),真机上y轴位移距离是手指y轴移动距离的一半(translate3d位移, top/left位移有精度不准的问题),我猜想引起问题的原因是translate的位移与对象原点,手指起点,手机长宽比存在一个比例系数
      03-06
      回复
登录 后发表内容