Go to the root of the WX-Database file, shift+ right mouse button, and open the PowerShell window

2. Customize tabBar

1. Set tabBar in app.json

Add “custom”: true, the original next label jump can not be used, and then customize
2. Click in the development guide, click “Preview in developer Tools” to enter the sample page, select custom tabBar to enter the small program, and then copy the file (custom-tab-bar) for your own use

3. Find the tarbar tag in vtant-appellate P, add van-tabbar and van-tabbar-item to the index. Json file in the custom-tab-bar file, and modify the path

{
  "component": true."usingComponents": {
    "van-tabbar": ".. /weapp/weapp/dist/tabbar/index"."van-tabbar-item": ".. /weapp/weapp/dist/tabbar-item/index"}}Copy the code

4. Reference the basic usage of tabbar to index.wxml and index.js

5. If you do not want to use the default format, modify it yourself. Let’s copy the contents of the list in app.json to the list in index.json

index.js

Component({
  data: {
    active: 0.list: [{
      "pagePath": "/pages/home/home"."text": "home"."iconPath": "/tabs/home.png"."selectedIconPath": "/tabs/home-active.png"}, {"pagePath": "/pages/message/message"."text": "message"."iconPath": "/tabs/message.png"."selectedIconPath": "/tabs/message-active.png"}, {"pagePath": "/pages/profile/profile"."text": "profile"."iconPath": "/tabs/profile.png"."selectedIconPath": "/tabs/profile-active.png"}},attached(){},methods: {
    switchTab(e) {
      // console.log(e)
      wx.switchTab({
        url:this.data.list[e.detail].pagePath
      })
    }
  }
})
Copy the code

6. Custom tabbae navigation bug fix (official bug, sometimes need to click twice after jumping back to the home page) (difficult)
- 1. Data in custon-tab-bar/index.js has active. The default value is 0, that is, the home page
- 2. Add the active value to the Home, Message, and Profile pages respectively
home.js(active: 0)

/** * lifecycle function -- listens for page display */
  onShow: function () {
    if (this.getTabBar() && typeof this.getTabBar === 'function') {
      this.getTabBar().setData({
        active: 0})}},Copy the code

message.js(active: 1)

  onShow: function () {
    if(this.getTabBar() && typeof this.getTabBar==='function') {this.getTabBar().setData({
        active:1})}},Copy the code

profile.js(active=2)

  onShow: function () {
    if(this.getTabBar() && typeof this.getTabBar==='function') {this.getTabBar().setData({
        active:2})}},Copy the code

Index. WXML (which uses custom ICONS)

<van-tabbar active="{{ active }}" bind:change="switchTab">
  <van-tabbar-item  wx:for="{{list}}" wx:key="index">// Customize the icon<image
      slot="icon"
      src="{{ item.iconPath }}"
      mode="aspectFit"
      style="width: 30px; height: 30px;"
    />
    <image
      slot="icon-active"
      src="{{ item.selectedIconPath }}"
      mode="aspectFit"
      style="width: 30px; height: 30px;"
    />
  </van-tabbar-item>
</van-tabbar>
Copy the code

3. Home page content

1. Request.js encapsulation in utils

module.exports = ({ url, method, data = {}, header = {} }) = > {
  const baseURL = 'http://127.0.0.1:3000'
  return new Promise((resolve, reject) = > {
    wx.showLoading({
      title: 'Loading... '.mask: true
    })
    wx.request({
      url: baseURL + url,
      method: method.toUpperCase() || 'GET'.data: method === 'GET' ? data : JSON.stringify(data),
      header:header|| {
        'Content-Type': 'application/json; charset=UTF-8'.'x-tiken': 'x-token'
      },
      dataType: 'json'.success: resolve,
      fail: reject,
      complete: () = > {
        wx.hideLoading()
      }
    })
  })
}
Copy the code

2. Connect interface request data (API /info.js)

const request = require('.. /utils/request')

export const getSilides=() = >{
  return request({
    method:'get'.url:'/slides'})}export const getCategories=() = >{
  return request({
    method:'get'.url:'/categories'})}Copy the code

3. Introduce methods to get data in home.js and get data

// pages/home/home.js
import {getSilides,getCategories} from '.. /.. /api/info'
Page({

  /** * initial data for the page */
  data: {
    slides: [].cates:[]
  },

  /** * lifecycle function -- listens for page loading */
  onLoad: function (options) {
    this.getSilides()
    this.getCategories()
  },
  getSilides(){
    getSilides().then(res= >{
      // console.log(res);
      this.setData({
        slides:res.data
      })
    })
  },
  getCategories(){
    getCategories().then(res= >{
      // console.log(res);
      this.cates=res.data
      console.log(this.cates); })},/** * lifecycle function - listen for the page to complete the first rendering */
  onReady: function () {},/** * lifecycle function -- listens for page display */
  onShow: function () {
    if(this.getTabBar() && typeof this.getTabBar==='function') {this.getTabBar().setData({
        active:0})}},/** * life cycle function - listen for page hiding */
  onHide: function () {},/** * life cycle function - listen for page unload */
  onUnload: function () {},/** * page-related event handlers -- listen for user pull actions */
  onPullDownRefresh: function () {},/** * the handler for the pull-down event on the page */
  onReachBottom: function () {},/** * Users click on the upper right corner to share */
  onShareAppMessage: function () {}})Copy the code

4. Render the data to the page

1. The round figure

In the documentation in the wechat public platform, find the Swiper in the view container in the component and copy the structure about swiper into home.wxml

2. Scratchable latex

Grid components can be found in Vant-pervasive P

Introduce components in home.json

    "usingComponents": {
     "van-grid": "@vant/weapp/grid/index"."van-grid-item": "@vant/weapp/grid-item/index"
   }
Copy the code

Copy the basic usage into home.wxml

 <van-grid>
  <van-grid-item icon="photo-o" text="Text" />
  <van-grid-item icon="photo-o" text="Text" />
  <van-grid-item icon="photo-o" text="Text" />
  <van-grid-item icon="photo-o" text="Text" />
</van-grid>
Copy the code

<view class="home">
  <swiper indicator-dots="{{true}}" class="slides">
      <swiper-item wx:for="{{slides}}" wx:key="*this">
      <view class="swiper-item {{item}}">
        <block wx:if="item.link">
          <image src="{{item.image}}" mode="aspectFill" />
          <navigator url="/pages/list/list"></navigator>
        </block>
        <block wx:else>
          <image src="{{item.image}}" mode="aspectFill" />
        </block>
      </view>
    </swiper-item>
  </swiper>
  <van-grid column-num="3" >
  <van-grid-item wx:key="index" icon="{{item.icon}}" text="{{item.name}}" wx:for="{{ cates }}" />
</van-grid>
</view>
Copy the code

5. Realize page hopping: Click the content in the ninth grid to jump to the List page

1. Add a list page to app.json

"pages": [
    "pages/home/home"."pages/message/message"."pages/list/list"."pages/profile/profile"].Copy the code

2. Bind the click event to the grid in home.wxml and define the function in hone

<van-grid column-num="3" >
  <van-grid-item wx:key="index" icon="{{item.icon}}" text="{{item.name}}" wx:for="{{ cates}}" bind:click="goDetail" data-id="{{item.id}}"/>
</van-grid>
Copy the code

  goDetail(e){
    console.log(e);
    wx.navigateTo({
      url: "/pages/list/list? id="+e.target.dataset.id
    })
  },
Copy the code

3. List page details

1. List Details page Title

1. The list page is composed of card components. You need to find card components in vuant-eappp and configure list.json

{
  "usingComponents": {
    "van-card": "/weapp/weapp/dist/card/index"}}Copy the code

2. Invoke the interface in THE API info to obtain the title information of the category

export const getCategoryById=(id) = >{
  return request({
    method:'get'.url:'/categories/'+id
  })
}
Copy the code

3. Introduce interface functions in list.js

import {getCategoryById} from '.. /.. /api/info'
Copy the code

4. Define functions in list.js to fetch data and store the retrieved data into arrays defined in data

  data: {
    id:0
  },

// Get classified content by id
  getCategoryById(){
    // getCategoryById(id).then(res=>{
    // console.log(res);
    // })
   getCategoryById(this.data.id).then(res= >{
    // console.log(res);
     wx.setNavigationBarTitle({
       title: res.data.name,
     })
   })
  },
Copy the code

2. List Details page Product information

1. Invoke the interface in INFO

export const getShops=({id,pageNo,pageSize}) = >{
  return request({
    method:'get'.url:`/shops? categoryId=${id}&_page=${pageNo}&_limit=${pageSize}`})}Copy the code

2. Introduce interface functions in list.js

import {getCategoryById,getShops} from '.. /.. /api/info'
Copy the code

3. Define a function in list.js to get the item details

 data: {
    id:0.pageNo:0.pageSize:7.shops: [].hasMore:false
  },

 // Get the goods
  getShops(){
    / / throttling
    if(this.data.hasMore! = =false) return 
    ++this.data.pageNo
    getShops({id:this.data.id,pageNo:this.data.pageNo,pageSize:this.data.pageSize}).then(res= >{
      this.data.hasMore=this.data.pageNo*this.pageSize>res.header['X-Total-Count']
      // console.log( this.data.hasMore);
      this.setData({
        shops:this.data.shops.concat(res.data)
      })
    })
  },
Copy the code

4. Render to page


<view class="list">
  <van-card
wx:for="{{shops}}"
wx:key="index"
  tag="{{item.tags}}"
  title="{{item.name}}"
  thumb="{{ item.images[0] }}"
>
  <view slot="desc">
    <view bindtap="makePhoneCall" data-phone="{{item.phone}}">Contact number: {{item.phone}}</view>
    <view>Address: {{item.address}}</view>
    <view>BusinessHours: {{item.businessHours}}</view>
    <view>Facilities: {{item. SupportService}}</view>
  </view>
</van-card>
</view>
Copy the code

5. Mock phone calls

  // Make a simulated phone call
  makePhoneCall(e){
    wx.makePhoneCall({
      phoneNumber: e.target.dataset.phone // This is an example, not a real phone number})},Copy the code

6. Load more

The data in the

hasMore:false
Copy the code

Define the function getMore

   // Load more
   getMore() {
     this.getShops()
   },
Copy the code

The page loads when it is pulled down

   /** * the handler for the pull-down event on the page */
   onReachBottom: function () {
     // Drop down to load more items
     this.getMore()
   },
Copy the code

All functions except those triggered by clicks are called in onLoad

  /** * lifecycle function -- listens for page loading */
onLoad: function (options) {
 // console.log(options.id);
 // this.getCategoryById(options.id)
 this.setData({
   id:Number(options.id)
 })
 this.getCategoryById()
 this.getShops()
},
Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Wechat applet _ local treasure

Go to the root of the WX-Database file, shift+ right mouse button, and open the PowerShell window

2. Customize tabBar

3. Home page content

1. Request.js encapsulation in utils

2. Connect interface request data (API /info.js)

3. Introduce methods to get data in home.js and get data

4. Render the data to the page

1. The round figure

2. Scratchable latex

5. Realize page hopping: Click the content in the ninth grid to jump to the List page

1. Add a list page to app.json

2. Bind the click event to the grid in home.wxml and define the function in hone

3. List page details

1. List Details page Title

2. List Details page Product information

Wechat applet _ local treasure

Go to the root of the WX-Database file, shift+ right mouse button, and open the PowerShell window

2. Customize tabBar

3. Home page content

1. Request.js encapsulation in utils

2. Connect interface request data (API /info.js)

3. Introduce methods to get data in home.js and get data

4. Render the data to the page

1. The round figure

2. Scratchable latex

5. Realize page hopping: Click the content in the ninth grid to jump to the List page

1. Add a list page to app.json

2. Bind the click event to the grid in home.wxml and define the function in hone

3. List page details

1. List Details page Title

2. List Details page Product information

Related Posts

import maps

RAX server rendering performance optimization revealed

TypeScript conditional type intensive reading and practice