[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
? Jingdong Mall 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 ） ?
? Jingdong Mall uni-app Custom search component （ On ） ?
? Jingdong Mall uni-app Custom search component （ in ） ?

List of articles

• One 、 newly build cate Branch （ the selected readings *）
• Two 、 Add compilation mode
• 3、 ... and 、 Render page basic structure
• 3、 ... and 、API Obtain data such as mobile phone model
• Four 、 beautify item term
• 5、 ... and 、 Get classification page data
• • 5.1 Interface data style
• 6、 ... and 、 Dynamically render the first level classification page structure

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

  xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx

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

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

  { {item.cat_name}}

    </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>
  

  // 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

      </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>
  

  // 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 ！?