Implémentation du code de l'applet WeChat en personnalisant la barre tar inférieure-Développement de mini-programmes-php.cn

Implémentation du code de l'applet WeChat en personnalisant la barre tar inférieure

不言

Libérer： 2018-08-10 14:41:34

original

6102 Les gens l'ont consulté

Le contenu de cet article concerne l'implémentation du code de personnalisation de la barre tar inférieure de l'applet WeChat. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Jetez d'abord un œil au répertoire
Implémentation du code de lapplet WeChat en personnalisant la barre tar inférieure Le modèle de barre d'onglets est stocké dans le dossier
modèle.
template/template.wxml

<template name="tabBar">
<view class="tabBar">
  <block wx:for="{{tabBar}}" wx:for-item="item" wx:key="tabBar">
    <view class="tabBar-item">
      <navigator open-type="redirect" url="{{item.pagePath}}">
        <view><image class="icon" src=&#39;{{item.iconPath}}&#39;></image></view>
        <view class="{{item.current== 1 ? &#39;tabBartext&#39; :&#39;&#39;}}">{{item.text}}</view>
      </navigator>  
    </view>
  </block>
</view>
</template>

Copier après la connexion

template.css

.icon{
  width:54rpx;
  height: 54rpx;
}
.tabBar{
  width:100%;
  position: fixed;
  bottom:0;
  padding:10rpx;
  margin-left:-4rpx;
  background:#F7F7FA;
  font-size:20rpx;
  color:#8A8A8A;
  box-shadow: 6rpx 6rpx 6rpx 6rpx #aaa;
}

 .tabBar-item{
  float:left;
  width:25%;
  text-align: center;
  overflow: hidden;
}
/*当前字体颜色*/
.tabBartext{
  color:red;
}

Copier après la connexion

template.js

//初始化数据
function tabbarinit() {
 return [
      { "current":0,
        "pagePath": "/pages/index/index",
        "iconPath": "/imgs/home.png",
        "selectedIconPath": "/imgs/home_on.png",
        "text": "主页"
      },
      {
        "current": 0,
        "pagePath": "/pages/news/news",
        "iconPath": "/imgs/message.png",
        "selectedIconPath": "/imgs/message_on.png",
        "text": "资讯"

      },
      {
        "current": 0,
        "pagePath": "/pages/category/category",
        "iconPath": "/imgs/category.png",
        "selectedIconPath": "/imgs/category_on.png",
        "text": "分类"
      },
      {
        "current": 0,
        "pagePath": "/pages/buy/buy",
        "iconPath": "/imgs/buy.png",
        "selectedIconPath": "/imgs/buy_on.png",
        "text": "购物"
      }
    ]

}
//tabbar 主入口
function tabbarmain(bindName = "tabdata", id, target) {
  var that = target;
  var bindData = {};
  var otabbar = tabbarinit();
  otabbar[id][&#39;iconPath&#39;] = otabbar[id][&#39;selectedIconPath&#39;]//换当前的icon
  otabbar[id][&#39;current&#39;] = 1;
  bindData[bindName] = otabbar
  that.setData({ bindData });
}

module.exports = {
  tabbar: tabbarmain
}

Copier après la connexion

Cela termine le changement de composant, puis je vous l'expliquera. Comment l'utiliser.
Nous chargeons d'abord le style dans app.wxss

@import "/template/template.wxss";

Copier après la connexion

dans le dossier index

index.wxml

<import src="../../template/template.wxml"/>
<template is="tabBar" data="{{tabBar:bindData.tabBar}}"/>

Copier après la connexion

index.js

const app = getApp()
var template = require(&#39;../../template/template.js&#39;);
Page({
  data: {

  },
  onLoad: function () {
    template.tabbar("tabBar", 0, this)//0表示第一个tabbar
  },
})

Copier après la connexion

news.wxml est le même que index.wxml
news.js est le suivant

const app = getApp()
var template = require(&#39;../../template/template.js&#39;);
Page({
  data: {  },

  onLoad: function () {
    template.tabbar("tabBar", 1, this)//1表示第二个tabbar
  },

})

Copier après la connexion

L'effet est comme indiqué ci-dessous
Implémentation du code de lapplet WeChat en personnalisant la barre tar inférieure