Some recent potholes encountered in development

  • The hierarchy of form components
  • How do form components prevent bubbling
  • How does input in a fixed container pop the keyboard

The hierarchy of form components


The form component level of the applet is very high, and we need to add an ICON to the form, but we can’t make it trigger the event to respond to

As shown in Figure 1, the icon of the drop-down menu, our solution is to bind the Focus event to the input, and the icon serves as a float layer for display only

As shown in Figure 2, the password form, the icon must be clickable, and the solution here is to align the two structures side by side

Prevents input from bubbling

<view bind:tap="onTap" class="container">
    <input bindinput="onBindInput" type="text"/>
</view>
Copy the code

The solution

<view bind:tap="onTap" class="container">
    <input bindinput="onBindInput" type="text" catch:tap="empty"/>
</view>
Copy the code

Input has a tap operation that bubbles to the underlying Container, causing the onTap response of the container to execute. In this case, we need to solve the problem of the input tap bubbling. In the solution, we need to build an empty method that responds to the catch:tap event of the input. The bubble problem is solved

How does input in a fixed container pop the keyboard

<view class="container" style="position: fixed; bottom: 0">
    <input bindinput="onBindInput" type="text"/>
</view>
Copy the code

The Container component appears at the bottom of the screen, and when you click the Input component, the keyboard pops up to cover the Input box

correction

<view class="container" style="position: fixed; bottom: 0; {{mystyle}}">
    <input bindinput="onBindInput" bindkeyboardheightchange="onkeybord" type="text"/>
</view>
Copy the code
Page({
    data: {
        mystyle: ' ',
    },
    
    onkeybord(e){
        let detail = e.detail
        let kbHeight = detail.height
        if (kbHeight === 0) {
          this.setData({
              mystyle: ' '})}if (kbHeight && kbHeight > 0) {
            this.setData({
                mystyle: `bottom: ${kbHeight- 40}px; `}}}})Copy the code

The following small program DEMO contains pull-down menus, generic filter lists, index lists, Markdown (including tables), scoring components, fruit slot machines, folding panels, two-column classification navigation (left and right), scratch cards, calendars, and other components