[applet project development -- Jingdong Mall] classified navigation area of uni app

Welcome to
Magic house ！！

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

Column content （ Before using the following articles strong Suggest Eat the article first ）
-- 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 --

Achieve the goal ：

One 、 encapsulation uni.$showMsg()

• Development scenarios

In the project , We often need to retrieve data many times , And when the data request fails , You often need to call uni.showToast({ /* Configuration object */ }) Method to prompt the user . here , You can encapsulate one globally uni.$showMsg() Method , To simplify the uni.showToast() Method call .

The specific transformation steps are as follows ：
stay main.js Project entry file , by uni Mount one $showMsg() Method ,$ Represents a custom mount function

On the function, the assignment parameter is used =, stay showToast Function is a dictionary , The assignment inside is :

//  mount  uni Request data message prompt   Method  ( Default )
uni.$showMsg = function(title = ' Data loading error ...', duration = 1500,icon = 'fail' ) {
    
  uni.showToast({
    
    title,
    duration,
    icon
  })
}

The encapsulated code be used for home page ,

 onLoad() {
    
      //  Retrieval method , Get the data of the carousel 
      this.getSwiperList()
    },
    methods: {
    
      async getSwiperList() {
    
        // '/'  The root directory is in main.js File configuration  baseUrl 
        const res = await uni.$http.get('/api/public/v1/home/swiperdata')
        //  Data retrieval failed 
        if (res.data.meta.status != 200) return uni.$showMsg()

        //  Data to be called   assignment 
        this.swiperList = res.data.message
        uni.$showMsg(' Data request successful !', 'success')
      }
    }
#  One 、 Get classified navigation data 
 Response data reference 

```cpp
{
    
    "message": [
        {
    
            "image_src": "https://www.zhengzhicheng.cn/pyg/banner1.png",
            "open_type": "navigate",
            "goods_id": 129,
            "navigator_url": "/pages/goods_detail/main?goods_id=129"
        },
        {
    
            "image_src": "https://www.zhengzhicheng.cn/pyg/banner2.png",
            "open_type": "navigate",
            "goods_id": 395,
            "navigator_url": "/pages/goods_detail/main?goods_id=395"
        },
        {
    
            "image_src": "https://www.zhengzhicheng.cn/pyg/banner3.png",
            "open_type": "navigate",
            "goods_id": 38,
            "navigator_url": "/pages/goods_detail/main?goods_id=38"
        }
    ],
    "meta": {
     "msg": " To be successful ", "status": 200 }
}

Two 、 Get classified navigation data

• stay data Node definition navList data

   data() {
    
      return {
    
        //  Carousel chart array 
        swiperList: [],
        // Category navigation array 
        navList: []
      };

• stay method Define the data retrieval function getNavList()

async getNavList(){
    
        //  Call data 
        const res =  await uni.$http.get('/api/public/v1/home/catitems')
        //  If the call fails   Return an error message and exit 
        if(res.data.meta.status != 200 ) return uni.$showMsg()
        //  assignment 
        this.navList =  res.data.message
        uni.$showMsg(' Data loaded successfully ','success')
      }
}

• In the life cycle function onload Call function getNavList()

 onLoad() {
    
    //  Retrieval method , Get the data of the carousel 
    this.getSwiperList(),
    //  Get classified navigation data 
    this.getNavList()
  },

Successfully retrieved

3、 ... and 、 Classified navigation UI structure

Attribute nodes that need cyclic labels need to be preceded by : The prompt is followed by a variable or variable expression

3.1 Don't step on the big pit ！！！

• Tai Keng 1 ： Use vue-for Dynamic looping chart array , Cyclic dynamic binding requires that the label attribute node be preceded by :（: yes v-bind: Abbreviation , That is, dynamically binding data , Then there are variables or variable expressions , If there is no colon, it is a string , At this time, the cycle cannot display the effect normally 、）
• Keng two ： stay UI Rendering template The template must have a label view Wrap it all up , Otherwise, the following error will be reported :
  Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.
  This is because there must be one in the template The root node , Take this root node as the entry , Recursively traverse each Leaf （ Child tags ）
  

<!--  Templates   -->
<template>
  <view>
    <!--  Rendering the carousel UI structure  -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <!--  similar python for i,j in object  Get the corresponding item i And index j -->
      <swiper-item v-for="(item,i) in swiperList" :key="i">
        <navigator class="swiper-item" :url="'/subpackages/goods_detail/goods_detail?good_id=' + item.goods_id">
          <image :src="item.image_src"></image>
        </navigator>
      </swiper-item>
    </swiper>
  
  <view class="nav_list">
    <view class="nav_item" v-for="(item,index) in navList" :key="index">
      <image :src="item.image_src" class="nav_image"></image>
    </view>
  </view>
  
  </view>
</template>


<!--  style  -->
  <style lang="scss">
    .nav_list {
    
      display: flex;
    }
    .nav_item{
    
      display: flex;
      width: 25%;
      height: 200rpx;
      justify-content: center;
      align-items: center;
    }
      
    .nav_image {
    
      width: 150rpx;
      height:150rpx;
    }
  </style>

During development, the page can be copied to the column , Develop style and structure

effect ：

Four 、 Click the classification option to jump to the classification page

Antecedents feed ：

monitor DOM（document object model) The incident happened in vue Use in v-on:, Listening for events in an applet development tool is bind[’ state ‘] , Such as ：bindtap, But due to binding events v-on: Often need to be used , So use @ As v-on: Abbreviation （ As mentioned earlier v-bind: Is the same : narrow , This is dynamic rendering data , Small program development tools are based on mustache grammar { {}} Rendering data

Because of the need to Option to determine whether it is a classification option , therefore Can not simply say view Change it to navigator, You need to listen for click events , Do more complicated operations .

// Method 
 methods: {
    
      //  Classified navigation --  classification 
      navClickHandelr(item){
    
        if (item.name === ' classification ') {
    
          uni.switchTab({
    
            url: "/pages/cate/cate"
          })
        }
      },

<!--UI structure --!>
 <view class="nav_list">
 <!-- The ginseng item--!>
    <view class="nav_item" v-for="(item,index) in navList" :key="index" v-on:click="navClickHandelr(item)">
      <image :src="item.image_src" class="nav_image"></image>
    </view>
  </view>

effect ：

Successful implementation ！

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