[applet project development -- JD mall] uni app commodity classification page (first)

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 Floor data acquisition Render the page UI --

One 、 newly build cate Branch （ the selected readings *）

To create a branch , It is also a good habit of project development , In this way, the open projects are in good order
You can also skip this section , It does not affect the reading impression

In the root directory , Right click to open bash
be based on master Branch created locally cate Sub branches , Used to develop and cate Related functions ：

• Create a new branch cate And jump to the branch

git checkout -b cate

View branches （ There is * Represents the current branch ）

git branch

Two 、 Add compilation mode

Because what we want to develop is cate page , So we will modify the startup page in the applet compilation mode stay cate, So you don't have to click jump every time

3、 ... and 、 Render page basic structure

• Generate basic sliding page structure

<template>
  <view>
    <!--  Wrap the container  -->
    <view class="scroll-view-container">
      <!--  left container -->
      <scroll-view class="scroll-view-left" scroll-y="true" style="height: 300px;">
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
      </scroll-view>
      <!--  On the right side container -->
      <scroll-view scroll-y="true" class="scroll-view-right" style="height: 300px;">
        <view></view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
      </scroll-view>
    </view>
  </view>
</template>


<style lang="scss">
  .scroll-view-container {
    
    display: flex;
  }

  .scroll-view-left {
    
    width: 200rpx;
  }

  .scroll-view-right {
    }
</style>

effect ：

3、 ... and 、API Obtain data such as mobile phone model

• We need to put the whole scroll-view The height of the screen is the same as that of the mobile phone , We can call APIuni.getSystemSync(), Get the information of the mobile device （ Such as mobile phone model , Available height ）
  
  Be careful ： Is the usable window height , Not screen height （ barring navigationbar and tarbar）
  

stay onLoad() Lifecycle function calls API , And in data Node definition data , Assign the available window height to windowHeight

<script>
  export default {
    
    data() {
    
      return {
    
        // Current device available height 
        windowHeight: ''
      };
    },
    onLoad() {
    
      const {
    
        windowHeight: infoSys
      } = uni.getSystemInfoSync()
      this.windowHeight = infoSys
    }
  }

Label style dynamic binding

:style="{height: windowHeight + 'px'}"

effect ：

Four 、 beautify item term

• Method 1 （ Don't suggest ）：

For every one item Item plus class selector
Select the label with the mouse ,CTRL + D Choose all （ The new version is CTRL + E), Such as


In this class selector Modify the style

• Method 2 （ Suggest ）
  Use descendant selector , stay .scroll-view-right view{} Modify the style

Add active item style &.active( Used to configure the selected style ）

style

 .scroll-view-left view {
    
  text-align: center;
  line-height: 120rpx;
  background-color: lemonchiffon;
  font-size: 12px;
  //  Active item style   Descendant selector overrides class selector 
  // & Selector override   Where selector 
  &.active {
    
    background-color: lawngreen;
    //  Relative positioning   Move without changing the document layout 
    position: relative;
    //  Set the first element 
    &::before {
    
      //  The content is   A space 
      content: ' ';
      //  Block-level elements 
      display: block;
      background-color: #a00000;
      height: 60rpx;
      width: 6rpx;
      //  Absolute positioning   Move out of the normal document stream 
      position: absolute;
      //  Far left 
      top: 25%;
      left: 0;
    }
  }
 }
  .scroll-view-right view{
    
    text-align: center;
    line-height: 80rpx;
    background-color: aquamarine;
  }

Activation term

<view class="active">xxx</view>

effect ：

5、 ... and 、 Get classification page data

• data Defining data

<script>
  export default {
    
    data() {
    
      return {
    
        // Current device available height 
        windowHeight: '',
        //  Classification page data 
        cateList: []
      };
    },
    ```

• onLoad Lifecycle function calls Function fetch data

...
onLoad() {
    
      //  Call the height data of the mobile phone 
      const {
    
        windowHeight: infoSys
      } = uni.getSystemInfoSync()
      this.windowHeight = infoSys
      //  Retrieve classified data 
      this.getCateList()
    },
    ...

• method Definition Get function

  ...
 methods: {
    
      //  Get classified data 
      async getCateList() {
     // async  Asynchronous cannot use arrow functions 
        const {
    data:res} = await uni.$http.get('/api/public/v1/categories')
        //  Judge whether the assignment is successful 
        if (res.meta.status != 200) return uni.$showMsg()
        //  assignment 
        this.cateList = res.message
      }
    }
  }
</script>

To be successful

5.1 Interface data style

{
    
    "message": [
        {
    
            "cat_id": 1,
            "cat_name": " Big appliances ",
            "cat_pid": 0,
            "cat_level": 0,
            "cat_deleted": false,
            "cat_icon": "",
            "children": [
                {
    
                    "cat_id": 3,
                    "cat_name": " TV ",
                    "cat_pid": 1,
                    "cat_level": 1,
                    "cat_deleted": false,
                    "cat_icon": "",
                    "children": [
                    {
    
                        "cat_id": 5,
                        "cat_name": " Curved TV ",
                        "cat_pid": 3,
                        "cat_level": 2,
                        "cat_deleted": false,
                        "cat_icon": "full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
                    }]
                }
            ]
        }
    ],
    "meta": {
    
        "msg": " To be successful ",
        "status": 200
    }
}

6、 ... and 、 Dynamically render the first level classification page structure

Activation term active Realize the idea ：

stay data Node definition data active, Dynamic loop for classification The generated index is compared with , If it is the same, add a class to the corresponding index active, And click "help" for classification Bind the event handler and pass the index parameter to it , Dynamic modification active, as follows

• Method 1 ：
  Component parameters

<template>
  <view>
    <!--  Wrap the container  -->
    <view class="scroll-view-container">
      <!--  left container -->
      <scroll-view class="scroll-view-left" scroll-y="true" :style="{height: windowHeight + 'px'}">
        <!--  Judge whether to select -active -->
        <block v-for="(item,index) in cateList" v-bind:key="index">
          <!--  Method 1 of parameter transmission  -->
          <view v-bind:class="(active === index ?'active' : '')" v-on:click="activeTap" :data-active=index>{
    {
    item.cat_name}}</view>
        </block>
        
      </scroll-view>
      <!--  On the right side container -->
      <scroll-view scroll-y="true" class="scroll-view-right" :style="{height: windowHeight + 'px'}">
        <view>xxx</view>
      </scroll-view>
    </view>
  </view>
</template>


// function 

//  Touch event binding 
 activeTap(options){
    
   this.active = options.target.dataset.active
 },

• Method 2 ：
  Be careful ： The binding function directly passes parameters , This is in Native applets are not allowed Of , Native applets treat the whole as a function

  <template>
    <view>
      <!--  Wrap the container  -->
      <view class="scroll-view-container">
        <!--  left container -->
        <scroll-view class="scroll-view-left" scroll-y="true" :style="{height: windowHeight + 'px'}">
          <!--  Judge whether to select -active -->
          <block v-for="(item,index) in cateList" v-bind:key="index">
            <!--  Parameter transfer method 2   Function directly passes parameters   This is not possible in native applets  -->
            <!-- <view v-bind:class="(active === index ?'active' : '')" v-on:click="activeTap(index)" >{
    {
    item.cat_name}}</view> -->
          </block>
          
        </scroll-view>
        <!--  On the right side container -->
        <scroll-view scroll-y="true" class="scroll-view-right" :style="{height: windowHeight + 'px'}">
          <view>xxx</view>
        </scroll-view>
      </view>
    </view>
  </template>


//  function 
//  Touch event binding 
  activeTap(options){
    
    // this.active = options.target.dataset.active
    this.active = options
  },

effect ：

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