Code implementation of WeChat applet customizing the bottom tarbar-Mini Program Development-php.cn

Code implementation of WeChat applet customizing the bottom tarbar

不言

Release： 2018-08-10 14:41:34

Original

6082 people have browsed it

The content of this article is about the code implementation of customizing the bottom tarbar of the WeChat applet. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First take a look at the directory
Code implementation of WeChat applet customizing the bottom tarbar
The tabbar template is stored in the template folder.
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>

Copy after login

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;
}

Copy after login

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
}

Copy after login

This completes the component modification, and then explains how to use it.
We first load the style into app.wxss

@import "/template/template.wxss";

Copy after login

in the index folder

index.wxml

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

Copy after login

index.js

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

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

Copy after login

news.wxml is the same as index.wxml
news.js is as follows

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

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

})

Copy after login

The effect is as shown
Code implementation of WeChat applet customizing the bottom tarbar

Related Recommended:

WeChat Mini Program Example: To achieve the effect of top tab switching and sliding switching, the navigation bar will move with it (code)

WeChat Mini Program Example: Code implementation to obtain the current city location and re-authorize the geographical location

The above is the detailed content of Code implementation of WeChat applet customizing the bottom tarbar. For more information, please follow other related articles on the PHP Chinese website!