[applet project development -- Jingdong Mall] user defined search component of uni app (Part 1)

Welcome to
Magic house ！！

The article contains columns
-- 2022 Wechat applet Jingdong Mall actual battle --

Column content
-- uni-app Project structures, --
-- Jingdong Mall uni-app To configure tabBar & Window style --
-- Jingdong Mall uni-app Developed subcontracting configuration --
-- Jingdong Mall uni-app Developed rotation chart --
-- Jingdong Mall uni-app The classified navigation area --
-- Jingdong Mall uni-app Home floor products --
-- Jingdong Mall uni-app Product classification page （ On ） --
-- Jingdong Mall uni-app Product classification page （ Next ） --

One 、 Introduce and create search Branch （ the selected readings *）

• git checkout -b search notes ： Create a branch and jump

Two 、 Custom search component UI structure

2.1 stay component Create components on the directory

2.2 Define custom components UI structure

For the search icon ,uni The official gave us the corresponding components

These official components are in the file uni_modules Catalog I'm off , It can be used directly

• Templates

<template>
  <view>
    <!--  Search box container  -->
    <view class="search-container">
      <!--  Search box inner box  -->
      <view class="search-box">
        <!--  Use uni-ui  Icon components provided  -->
        <uni-icons type="search" size="17"></uni-icons>
        <text class="search-content"> Search for </text>
      </view>
    </view>

  </view>
</template>

• style

<style lang="scss">
  .search-container {
    
    height: 100rpx;
    background-color: #ff1e0a;
    display: flex;
    align-items: center;
    //  Up and down  0  spacing ,  about 20 spacing 
    padding: 0rpx 20rpx;

    .search-box {
    
      background-color: #ffffff;
      border-radius: 100rpx;
      height: 72rpx;
      width: 100%;
      display: flex;
      //  The overall block level elements are horizontally centered 
      justify-content: center;
      //  The internal elements of the project are centered 
      align-items: center;
      .search-content {
    

        text-align: center;
        font-size: 30rpx;
        margin-left: 10rpx ;
      }
    }
  }
</style>

effect ：

2.3 Solve a small problem bug

When sliding three-level classification , You will find that the display is incomplete , And the search box can be slid , This is because we are scroll-view Sliding components The height set in is Available height of mobile phone , And then The search box component takes up part of the height , Corresponding , The bottom will also reduce some of the height , So we can subtract the corresponding height of the search box when setting the height of its sliding component

The heights are as follows

• Revised as follows （ subtract 50px)：

onLoad() {
    
  //  Call the height data of the mobile phone 
  const {
    
    windowHeight: Hight
  } = uni.getSystemInfoSync()
  this.windowHeight = Hight - 50  //  Subtract the height of the search box 
  //  Retrieve classified data 
  this.getCateList()
},

Successfully solved

3、 ... and 、 Encapsulate custom component properties and click event

3.1 Custom properties

Enhance the commonality of components through custom attributes （ Custom background color , Fillet degree ）

• stay props Node definition data ( Similar to in native applets properties attribute ,
• props Is the communication between parent components , and data Is the private data of the component , Cannot pass parameters directly ）
• The default value is default attribute

  props: {
    
      //  The background color 
      bgcolor: {
    
        type: String,
        default: '#ff1e0a'
      },
      //  Fillet size 
      radius: {
    
        type: Number,
        default: 100
      }
    },

• Dynamically bind in components style, Enter key value pairs

 <!--  Search box container  -->
    <view class="search-container" :style="{'background-color': bgcolor}">
      <!--  Search box inner box  -->
      <view class="search-box" :style="{'broder-radius': radius + 'rpx'}">

• When using this component , We can pass it on , Set the background color and circle angle , Such as
  （ Be careful ： In the component pass parameter , Parameters are enclosed in double quotation marks ·"" If the parameter string , Then the string form should be ' character string ', Otherwise, it will be difficult to find the error

 <!--  Custom search component  -->
  <my-search v-bind:bgcolor="'pink'" v-bind:radius="10"></my-search>

effect ：

3.2 click Event binding

Click this component to jump to the search page , According to our previous thinking, we naturally want to bind a handler for this component , So this method is not feasible ？

• We bind an event handler , And print after the event is triggered ok：

<my-search v-on:click="gotosearch"></my-search>

//  Search box click event 
      gotosearch: () => {
    
        console.log('ok')
      },

You can see no effect ：

• reason ：

Currently, it is bound to the custom component click Event handler , however The custom component itself does not provide click event , So the binding is invalid ,
So why in a regular component , Such as view Yes. , This is because the official has encapsulated these conventional components click event , So you can tie it directly , Custom components are not encapsulated , So even if it is bound, it cannot be realized

• solve

In custom components , We can container for the outermost component view Bind one click event （ principle ： Packaged with official components click Click event judgment to trigger ）

And use... In the event binding function this.$emit Call the parent component binding function

<!--  Search box container  -->
    <view class="search-container" :style="{'background-color': bgcolor}" v-on:click="searchBoxHander">
			······
   </view>

 //  Search box click event 
      searchBoxHander() {
    
        console.log('~~~~~')
        this.$emit('click')
      },

Four 、 Navigation jump and ceiling effect

4.1 Navigation jump

• Create search （search) page （ Create... In subcontracting ）
  

• In the component binding function gotosearch Jump to the page when programming

    //  Search box click event 
      gotosearch(){
    
        uni.navigateTo({
    
          url: '/subpackages/search/search'
        })
      },

effect ：

4.2 Ceiling effect

• Ceiling effect ： Keep the top , Does not disappear with sliding

In the category page due to the whole UI The height of the structure is not Out of page ( Sliding height + Search box height = Available height ), So there is no need to configure the ceiling effect , Configure the home page here

Home configuration

• UI structure

<!--  Custom components  -->
    <view class="search-box">
      <my-search v-on:"gotosearch"></my-search>
    </view>

• Jump page time handler

 //  Jump to the custom navigation page 
      gotosearch(){
    
        uni.navigateTo({
    
          url:'/subpackages/search/search'
        })

• adopt Style to achieve ceiling effect ( important ）

 .search-box {
    
    position: sticky; // sticky  Sticky 
    //  Keep the top 
    top: 0;
    //  Raise the level , Avoid being covered by the rotation chart 
    z-index: 999;
  }

effect ：

Personal summary （ the selected readings *）

The following is just a personal summary of my study , Please forgive me for not writing well .
Because I am a monk halfway , Only a little html,css, Just learn the native applet directly , Until then uni-app, So the foundation is not good , Encountered in a native applet bindtap,bindchange, These event handlers are a bit confusing , Subconsciously as a function , But in fact, it is officially packaged to be used directly in components , The original appearance should be bind:tap = “ Function name ”, there bind Binding event means binding event , And the event is tap（ Custom name ）, The event has been encapsulated inside the official component , So learn later Parent and child components Communication time , I'm still wondering , bind: sync = ” Function name “, Why say yes Custom events bind:sync, And used in sub assemblies this.triggerEvent( Triggering event ）, Is the event that triggers the component sync（ And can be transferred to ）, stay uni-app in this.emit Triggering event . for example click, In the official component, you should judge whether to click. If you click, then call ’this.$emit’ Trigger event function .

To sum up, you need to implement binding to custom components click event , In the custom component structure The outermost container is bound click event , Use official encapsulated event handling , And then in click Event site Binding function this.$emit Call the parent component to call the function

   Thanks for reading , Your praise and collection are the biggest motivation for me to create ！