Classified navigation content slide of wechat applet practice [wechat]

1. First, let's configure the index.json file

{
"component": true,
"usingComponents": {},
"navigationBarTitleText": "Pet Encyclopedia"
}

2. Then add the style in the index.wxss file (the meaning and class of the style are not explained specifically)

/* pages/baike/index.wxss */
/* 1. Set the background color of the entire page */
page{
background:#f5f5f5;
/* Avoid white coverage when items on the left are not enough*/
}
/* 2.Main box */
.container {
width: 100%; /* 100% of screen width */
height: 100%; /* 100% of screen height */
background-color:#fff; / * background color*/
}
/* 3.Left box*/
.nav_left{
position:absolute; /* Use absolute positioning */
top:0px; /* Distance top margin: 0px */
left:0px; /* Distance left margin: 0px */
width: 25%; /* Width of each item */
background: #f5f5f5; / * the background color of the main box is gray*/
text-align: center; /* Text centered */
}
.nav_left .nav_left_items{
height: 15px; /* 40px high per item*/
padding: 15px 0; /* Top and bottom inner margins are 6px [increase height] right and left inner margins are 0px*/
border-bottom: 1px solid #dedede; / * set lower boundary*/
font-size: 14px; /* Set text size: 14px */
}
.nav_left .nav_left_items.active{
background: #fff;
color: #CC812B;
/*border-left: 3px solid #3385ff;*/
}
/* 4.Right box */

/* 4.1. Right column main box general settings */
.nav_right{
position: absolute; /* Use absolute positioning */
top: 0; /* Distance top margin: 0px */
left: 80px; /* Distance left margin: 80px */
width: 75%; /* Width of right main box */
height: 600px; /* Height of right main box */
padding: 10px; /* All four inner margins are 10px*/
box-sizing: border-box; /* Any inner margins and borders specified for the element will be drawn within the set width and height*/
background: #fff; / * right main box background color*/
}

/* 4.2. Each item in the right column */
.nav_right .nav_right_items{
float: left; /* Float left */
width: 50%; /* The setting width of each item is 33.33% */
height: 240rpx; /* The setting height of each item is 120px */
text-align: center; /* Set the prompt text below the picture to center */
}
.nav_right .nav_right_items image{
width: 240rpx; /* Set width for pictures */
height: 200rpx; /* Set height for pictures */
border-radius: 20rpx; /* Add a rounded border to the picture */
float: left;
}
.nav_right .nav_right_items text{
width: 240rpx;
height: 30rpx;
float: left;
font-size: 24rpx;
color: #666;
}
.nav_right_default{
margin-top: 50%;
text-align: center;
font-size: 24rpx;
color: #999;
}

3. Set index.wxml file

<view class="container">
<!--Left column-->
<view class='nav_left'>
<view class="nav_left_items {{curNav == item.id ? 'active' : ''}}" bindtap="switchRightTab" data-id="{{item.id}}" wx:for="{{cateList}}" wx:key="{{index}}">
{{ item.title }}
</view>
</view>
<!--End of left column-->
<!--Content on the right-->
<view class="nav_right">
<view class="nav_right_items" wx:for="{{petsList}}" wx:key="{{item.id}}" wx:if="{{petsList.length != 0}}">
<image src="{{item.cover}}" bindtap="getDetail" data-id="{{item.id}}"></image>
<text>{{item.title}}</text>
</view>
<view class="nav_right_default" wx:if="{{petsList.length == 0}}"> No content at present </view>
</view>
<!--End of content on the right-->
</view>

3.1 for the left classified navigation content, we use view to try to render the classified navigation list [cateList].

The interface of the cateList can be set by itself for debugging. My structure is as follows:

3.2 the content on the right side is also rendered with a view, and the picture and title are style controlled.

Click the event in the left navigation setting to change the content on the right. The content structure on the right is as follows:

4. Set the index.js file, which is mainly used for event control and jump triggering

const app = getApp();
var openid = wx.getStorageSync('openid');
Component({
  /**
   * Property list of component
   */
  properties: {

  },
  /**
   * Initial data of components
   */
  data: {
    curNav: 3,
    cateList: [],
    petsList: [],
  },
  /**
   * Method list for component
   */
  methods: {
    /* Set the current curNav for an item you click on   */
    switchRightTab: function(e) {
      let id = e.target.dataset.id;
      this.setData({
        curNav: id
      })
      this.getPetsList(id);
    },
    /**Enter article details */
    getDetail: function(e) {
      var id = e.currentTarget.dataset.id;
      wx.navigateTo({
        url: 'detail/detail?id=' + id,
        success: function(res) {
          // Transfer data to the opened page through eventChannel
          res.eventChannel.emit('acceptDataFromOpenerPage', {
          })
        }
      })
    },
    getPetsList: function(id) {
      var that = this;
      wx.request({
        url: app.config.serverCfg.domain.topic,
        data: {
          page: '1',
          size: '20',
          id: id
        },
        success(res) {
          that.setData({
            petsList: res.data.data,
          });
        }
      })
    },
    /*Request for classified data on page load*/
    onLoad: function(options) {
      var that = this;
      wx.request({
        url: app.config.serverCfg.domain.cate,
        data: {
          page: '1',
          size: '20'
        },
        success(res) {
          that.setData({
            cateList: res.data.data,
          });
          that.getPetsList(res.data.data[0]['id']);
        }
      })
    },
  }
})

4.1 the top app is to obtain some public information set by me. Openid obtains the openid data cached locally

4.2 cateList is an array of classification objects, and petsList is an array of content objects on the right

4.3 the switchRightTab method is to click the left classification to switch the content on the right

4.4 getDetail method is to click a right content and jump to the pet details page.

5. Source code download address:

Tags: Front-end JSON

Posted on Sat, 25 Apr 2020 07:13:34 -0700 by KindMan