weapp tabbar

Komponen bilah tab khusus applet WeChat (TabBar).

Mendukung ikon tanpa teks, ikon besar, ikon mengambang, dll.

Unduh kode sumber: https://github.com/tanggaowei/weapp-tabbar

Kode untuk komponen bilah tab khusus ada di direktori /commpents/tabbar dan dapat langsung disalin ke proyek lain untuk digunakan. Berikut penjelasan cara penggunaannya.

1. Komponen referensi

Di file json halaman yang perlu menggunakan bilah tab, gunakan item konfigurasi usingComponents untuk mereferensikan komponen bilah tab:

 {
  "usingComponents": {
    "tabbar": "/components/tabbar/tabbar"
  }
}

2. Tambahkan komponen

Sekarang tambahkan komponen di file wxml:

 <tabbar data="{{tabbar}}"></tabbar>

Kemudian tentukan data komponen pada file js, seperti tabbar:

 Page({
  data: {
    tabbar: {
      "color": "#999999",
      "selectedColor": "#7788dd",
      "borderStyle": "#dcdcdc",
      "backgroundColor": "#ffffff",
      "list": [{
          "key": "home",
          "iconPath": "/images/icon_home.png",
          "selectedIconPath": "/images/icon_home_active.png",
          "text": "首页"
        },
        {
          "key": "tag",
          "iconPath": "/images/icon_tag.png",
          "selectedIconPath": "/images/icon_tag_active.png",
          "text": "标签"
        },
        {
          "key": "new",
          "iconPath": "/images/icon_plus_big.png",
          "iconType": "big overflow circle shadow",
          "choose": "disable"
        },
        {
          "key": "notebook",
          "iconPath": "/images/icon_notebook.png",
          "selectedIconPath": "/images/icon_notebook_active.png",
          "text": "日记本"
        },
        {
          "key": "me",
          "iconPath": "/images/icon_me.png",
          "selectedIconPath": "/images/icon_me_active.png",
          "text": "我"
        }
      ]
    }
  }
})

Format data komponen bilah tab khusus sama dengan bilah tab asli program mini. Di sini kita fokus pada penggunaan atribut baru iconType dan choose .

iconType memiliki total 4 nilai: big , overflow , circle dan shadow . Keempat nilai tersebut dapat digunakan secara sendiri-sendiri maupun secara bersamaan. Pisahkan dengan spasi bila digunakan secara bersamaan (sebenarnya akan diisi atribut kelas dari tag yang bersangkutan). Fungsinya adalah sebagai berikut:

• big menggunakan ikon besar dan mengatur lebar dan tinggi ikon menjadi 95rpx, yang sama dengan tinggi bilah tab;
• overflow memindahkan ikon ke atas sehingga sebagian ditampilkan di luar bilah tab;
• Lingkaran memotong gambar ikon menjadi lingkaran;
• Bayangan menambahkan bayangan pada ikon.

Atribut pilih memiliki dua nilai: aktifkan dan nonaktifkan, dan nilai defaultnya adalah aktifkan. Jika disetel ke nonaktif, mengklik item label tidak akan mengubah status bilah label yang dipilih, namun peristiwa perubahan akan tetap terpicu.

3. Pantau peristiwa peralihan

Gunakan atribut bindchange untuk mengikat acara mendengarkan:

 <tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>

Kemudian implementasikan metode mendengarkan di Page():

  tabChange: function(e) {
    var key = e.detail.key
    if (key == 'new') {
      wx.navigateTo({
        url: '/pages/new/new',
      })
    } else {
      this.setData({
        choose_index: e.detail.index
      })
    }
  }

Metode listening akan mendapatkan dua data: e.detail.key dan e.detail.index . Diantaranya, e.detail.key sesuai dengan nilai kunci elemen array data tabbar.list, yang tidak sebaik home, tag, new, notebook, dan me di atas. e.detail.index sesuai dengan nomor urut elemen array, seperti 0, 1, 2, 3, 4.

4. Rencana praktis

1) Komponen khusus

Komponen khusus mirip dengan halaman dan memiliki templat wxml dan gaya wxss sendiri, yang memfasilitasi pemisahan logika dan tampilan, yang lebih baik daripada menggunakan templat secara langsung. Berikut ini contoh kode untuk beralih menggunakan komponen khusus di index.wxml:

 <home wx:if="{{choose_index==0}}"></home>
<tag wx:if="{{choose_index==1}}"></tag>
<notebook wx:if="{{choose_index==3}}"></notebook>
<me wx:if="{{choose_index==4}}"></me>

<tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>

Diantaranya, <home> , <tag> , <notebook> dan <me> adalah empat komponen khusus yang mengimplementasikan fungsinya masing-masing.

2) Gunakan templat

Efek peralihan juga dapat dicapai dengan menggunakan templat, tetapi kode logikanya mungkin perlu ditulis pada halaman yang sama. Misalnya:

 <import src='/template/home/home.wxml' />
<import src='/template/tag/tag.wxml' />
<import src='/template/notebook/notebook.wxml' />
<import src='/template/me/me.wxml' />

<template is="home" wx:if="{{choose_index==0}}"></template>
<template is="tag" wx:if="{{choose_index==1}}"></template>
<template is="notebook" wx:if="{{choose_index==3}}"></template>
<template is="me" wx:if="{{choose_index==4}}"></template>

<tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>

3) Navigasi dan lompat

Anda dapat menggunakan antarmuka wx.navigateTo() atau wx.redirectTo() dalam metode mendengarkan untuk berpindah konten halaman. Misalnya:

  tabChange: function(e) {
    var key = e.detail.key
    if (key == 'new') {
      wx.navigateTo({
        url: '/pages/new/new',
      })
    }
  }