An open source hover button component, small program native support.

I have always liked huawei’s navigation button, which is perfectly suitable for large-screen mobile phones. The free parking position is very convenient for both left hand and right hand (maybe I have small hands, so I can’t reach the left upper right corner).

Support functions

  • Support free drag, parking
  • Supports custom events (click, double click, and long press)
  • Supports custom text/picture in the middle of the navigation ball

The development of the difficulty

The use of WXS

Floating ball development idea is relatively simple, a view, style position:fixed, support drag. In Web development, we can implement this functionality relatively easily. In order to achieve high performance interactive animation in small programs (touch class), it is necessary to understand how to use the page WXS disabled JS to manipulate objects (debugging is troublesome, JS is extremely disabled)

<wxs module="tool">function tStart(e, ins){} function tMove(e, ins){ e.instance.setStyle('transform: translate3d(...) } function tEnd(e, ins){} module.exports = {tStart: tStart, tMove: tMove, tEnd: tEnd }</wxs>

<view catch:touchstart="{{tool.tStart}}" catch:touchmove="{{tool.tMove}}" . />
Copy the code

Instead of using bind, catch is used to bind events, which point to WXS methods. Considering that the floating navigation ball is used as a tool in other scenarios, in order not to contaminate the touch event or cause the page to scroll unnecessarily.

The displacement distance

The width and height of the mobile phone are inconsistent, that is, the movement distance of the X axis is less than the movement distance of the Y axis (unit time). Assuming that the width and height ratio of the mobile phone is 1:2, the movement of the X axis is 1px, and the movement of the Y axis is 2px, we can set a certain coefficient to make the dragging effect meet the expectation.

Listen for an event

The final event response must be event listening on the page (or inside the component), and WXS has an event invocation mechanism

function tStart(e, ins){
  ins.callMethod('onTouchStart', e)
  // Call the function defined by the current component/page in the logical layer (App Service). FuncName indicates the name of a function and args indicates the parameters of a function
}
Copy the code

WXS related documentation

Making open source

The following small program DEMO containsDrop-down menu, general filter list, index list, Markdown (including table), scoring component, fruit slot machine, folding panel, two-column category navigation (left and right), scratch card, calendarComponents such as