WeChatウィジェットの下部タブ/ナビゲーションバーの実装方法

今日はこの文章を書かなければなりません.ひどいですね.微信ウィジェットの下部タブ/ナビゲーションバーの実現方法!でもまとめて言えば、私が何を経験したかは言わない.のまず、私の一連の改革を経て書いたコードです.

//nav_tp.wxml
<template name="nav">
  <view class="nav_container">
    <navigator wx:for="{{navbar}}" data-idx="{{index}}" url="{{item.url}}" open-type="redirect" class="function-text {{currentTab==index ? 'present' : ''}}">{{item.name}}navigator>
  view>
template>

//nav_tp.wxss
/*     css*/

.nav_container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 50px;
  padding: 0;
  /*      padding  0*/
  background-color: #e44;
  position: fixed;
  bottom: 0;
  text-align: center;
}

.function-text {
  padding: 0 10px;
  margin: 9px auto 7px;
  font-size: 20px;
  color: #fff;
  line-height: 32px;
}

.present {
  border-bottom: 2px solid #fff;
}

//common.js
var navbar=[
  {
    name: '   ',
    url: "/pages/home/home"
  },
  {
    name: "   ",
    url: "/pages/snatch/snatch"
  },
  {
    name: "    ",
    url: "/pages/myPage/mine"
  }
]
//  ，        s，         ，   ，       
module.exports = {
  navbar: navbar
}

次にインポート

//     js    
var common=require("../common.js");

Page({
  data: {
    navbar: common.navbar,
    currentTab: 0//         0，1，2，      
  }
})

//     css  
 @import "../template/nav_tp.wxss"; 

//     html  
<import src="../template/nav_tp.wxml"/>

<template is="nav" data="{{navbar,currentTab}}">template> 

上は私が実現する方法で、それから間もなく私は発見します!!!アプリであればこれを書いてくれましたjsonの中で配置してokになって、あなたもホームページを見ることができます

//app.json
  "tabBar": {
    "borderStyle":"#e44",
    "backgroundColor":"#e44",
    "color":"#000",
    "selectedColor":"#ff0",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "   ",
        "iconPath":"image/give.png",
        "selectedIconPath":"image/give-hl.png"
      },
      {
        "pagePath": "pages/snatch/snatch",
        "text": "   ",
        "iconPath": "image/snatch.png",
        "selectedIconPath": "image/snatch-hl.png"
      },
      {
        "pagePath": "pages/myPage/mine",
        "text": "    ",
        "iconPath": "image/mine.png",
        "selectedIconPath": "image/mine-hl.png"
      }
    ]
  }

ただし、タブがないからタブがあるまでwxを使うことに注意してください.switchTab. OK、この物語は私たちにAPIをもっと見なければならないことを教えてくれました.