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

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 --
-- Jingdong Mall uni-app Product classification page （ On ） --

• Accompanying, 【 Small program project development – Jingdong Mall 】uni-app Product classification page （ On ）

One 、 Render the second and third level classifications on the right

stay Above, 【 Small program project development – Jingdong Mall 】uni-app Product classification page （ On ）5.1 Chapter interface data format You can see , Our data , Under the primary classification , The secondary classification is stored , The secondary classification stores the tertiary classification , Nested storage .

1.1 Dynamically render the secondary classification page

• stay data Node definition data cateList2

    data() {
    
      return {
    
        // Current device available height 
        windowHeight: '',
        //  Classification page data 
        cateList: [],
        // active  Index judgment 
        active: 0,
        //  Secondary classification data 
        cateList2: [],
      };
    },

• Data is requested in the function getCateList For the assignment （ The default is the first data , Dynamic data changes in active

      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()
        //  First level classification assignment  
        this.cateList = res.message
        //  Second level classification assignment 
        this.cateList2 = this.cateList[0].children
      }
    }

• stay active Activate item function activeTap It is also dynamically data bound

methods: {
    
      //  Touch event binding 
      activeTap(options) {
    
        //  Method 1 of parameter transmission ：
        // this.active = options.target.dataset.active
        //  Parameter transfer method 2 
        this.active = options
        //  Dynamically modify the secondary list 
        this.cateList2 = this.cateList[options].children
      },

effect ：

Two 、 Render secondary classification UI structure

• structure

    <!--  On the right side container -->
      <scroll-view scroll-y="true" class="scroll-view-right" :style="{height: windowHeight + 'px'}">
        <view class="cate-level2" v-for="(item,index) in cateList2" v-bind:key="index">
          <!--  title  -->
        <view class="cate-level2-title">{
    {
    '/ ' + item.cat_name + ' /'}}</view>           <!-- / {
    {
    item.cat_name}} / -->
        <!--  Project container  -->
        <view>
          <view class="cate-level2-list" v-for="(prd,prdindex) in item.children" v-bind:key="prdindex">
            <view class="cate-level2-prd">
              <image v-bind:src="prd.cat_icon" mode="widthFix"></image>
            </view>
          </view>
        </view>
        </view>
      </scroll-view>

• style

  .cate-level2-title {
    
    font-weight: 700;
    padding: 2px;
    font-size: 14px;
  }

effect ：

3、 ... and 、 Render three levels of classification UI structure

Be careful ： In style image Properties of components mode Try not to use , The style will be difficult to adjust

• structure

  <!--  On the right side container -->
      <scroll-view scroll-y="true" class="scroll-view-right" :style="{height: windowHeight + 'px'}">
        <view class="cate-level2" v-for="(item,i2) in cateList2" v-bind:key="i2">
          <!--  Title of secondary classification item  -->
          <view class="cate-level2-title">{
    {
    '/ ' + item.cat_name + ' /'}}</view> <!-- / {
    {
    item.cat_name}} / -->
          <!--  Three level classification list  -->
          <view class="cate-level3-list">
            <!--  Three level classification item term  -->
            <view class="cate-level3-list-item" v-for="(prd,i3) in item.children" v-bind:key="i3">
              <!--  Pictures of three-level classification items  -->
              <image v-bind:src="prd.cat_icon"></image>
              <!--  Text of the three-level classification item  -->
              <text>{
    {
    prd.cat_name}}</text>
            </view>
          </view>
        </view>
      </scroll-view>

• style

  .scroll-view-right {
    

    background-color: #fff;

    .cate-level2-title {
    
      font-weight: 700;
      padding: 2px;
      font-size: 14px;
      text-align: center;
    }

  }

  .cate-level2 {
    
    padding: 10rpx;
    padding-bottom: 20rpx;
  }

  //  Three level classification style 
  .cate-level3-list {
    
    display: flex;
    //  Allow word wrap 
    flex-wrap: wrap;

    .cate-level3-list-item {
    
      //  One third of the whole 
      width: 33.33%;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      justify-content: space-around;
      align-items: center;

      image {
    
        width: 160rpx;
        height: 160rpx;
        margin-bottom: 5rpx;
      }

      text {
    
        font-size: 25rpx;
      }
    }

  }

effect ：

Four 、 Switch the first level classification to reset the scroll bar position

• stay data Node definition data scrollTop

Be careful ： Yes scrollTop The value remains unchanged before and after assignment There will be no effect , If the default is 0, Function dynamic assignment is also 0, Then the component will default to 0, It is deemed that there is no change , The solution here is to 0,1 change （1 Pixels default to top , A little deviation that users can't see ）

data() {
    
      return {
    
        // Current device available height 
        windowHeight: '',
        //  Classification page data 
        cateList: [],
        // active  Index judgment 
        active: 0,
        //  Secondary classification data 
        cateList2: [],
        //  Scroll bar position  
        scrollTop: 1 
      };
    },

• by scroll-view Dynamic binding scroll-top Property value

 <!--  On the right side container -->
 <scroll-view scroll-y="true" class="scroll-view-right" :style="{height: windowHeight + 'px'}" v-bind:scroll-top="scrollTop">

• Switch level 1 Classification , Dynamic setting scrollTop

//  Touch event binding 
 activeTap(options) {
    
   //  Method 1 of parameter transmission ：
   // this.active = options.target.dataset.active
   //  Parameter transfer method 2 
   this.active = options
   //  Dynamically modify the secondary list 
   this.cateList2 = this.cateList[options].children
   //  Reset scroll bar position   Dynamic change 
   this.scrollTop = this.scrollTop === 0 ? 1 : 0
 },

5、 ... and 、 Click the three-level classification to jump to the product page

• Binding event functions

<!--  Three level classification item term  -->
<view class="cate-level3-list-item" v-for="(prd,i3) in item.children" v-bind:key="i3" v-on:click="gotoGoodsList(prd)">

• Define function jump page , And pass the parameters goods id

gotoGoodsList: prd => {
    
    uni.navigateTo({
    
      url: '/subpackages/goods_list/goods_list?cat_id=' + prd.cat_id
    })

effect ：

6、 ... and 、 Commit and merge of branches

• git status notes ： View the current file status
• git add . notes ： Submit all files to the staging area
• git commit -m " Complete the development of the classification page " notes ： Submit to the local repository
• git push -u origin cate notes ： Submit to remote warehouse cate Branch
• git branch notes ： View current branch
• git checkout master notes ： Switch to main branch
• git merge cate notes ： Merge cate Branch
• git push notes ： Upload the main branch to the remote warehouse
• git branch -d cate notes ： Local cate Branch

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