Code-Implementierung des WeChat-Applets zur Anpassung der unteren Tarbar

不言
Freigeben: 2018-08-10 14:41:34
Original
6078 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Code-Implementierung der unteren Tarbar des WeChat-Applets. Ich hoffe, dass er für Freunde hilfreich ist.

Schauen Sie sich zunächst das Verzeichnis an
Code-Implementierung des WeChat-Applets zur Anpassung der unteren Tarbar Die Tabbar-Vorlage wird im Ordner
template gespeichert.
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>
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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
}
Nach dem Login kopieren

Damit ist die Komponentenänderung abgeschlossen und anschließend wird erklärt, wie man sie verwendet.
Wir laden den Stil zunächst in app.wxss

@import "/template/template.wxss";
Nach dem Login kopieren
  • im Indexordner

index.wxml

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

index.js

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

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

news.wxml ist dasselbe wie index.wxml
news.js ist wie folgt Empfohlen:


WeChat-Applet-Beispiel: Erkennen Sie den Effekt von top Tab-Wechsel und Schiebe-Wechsel, wenn sich die Navigationsleiste mitbewegt (Code) Code-Implementierung des WeChat-Applets zur Anpassung der unteren Tarbar

WeChat-Applet-Beispiel: Code-Implementierung, um den aktuellen Stadtstandort zu erhalten und den geografischen Standort erneut zu autorisieren

Das obige ist der detaillierte Inhalt vonCode-Implementierung des WeChat-Applets zur Anpassung der unteren Tarbar. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage