Ajar anda langkah demi langkah cara menyesuaikan bar navigasi bawah applet WeChat

Bagaimana untuk menyesuaikan bar navigasi bawah applet WeChat? Artikel berikut akan memperkenalkan kepada anda kaedah pelaksanaan khusus untuk menyesuaikan bar navigasi bawah. Saya harap ia akan membantu anda!

WeChat menyokong bar navigasi tersuai untuk mencapai bar navigasi bawah yang fleksibel Penerangan ringkas diberikan dalam dokumen rasmi, tetapi tidak terlalu spesifik. pelaksanaan kod khusus mengikut langkah, kami akan membantu anda melengkapkan pelaksanaan khusus untuk menyesuaikan bar navigasi bawah. [Cadangan pembelajaran berkaitan: Tutorial Pembangunan Program Mini]

Memperkenalkan colorui

https://github.com/weilanwl/ColorUI

Lawati tapak web ini dan muat turun perpustakaan komponen colorui

Selepas memuat turun, letakkan folder colorui dalam folder demo ke dalam applet anda Dalam projek

sediakan import

@import 'colorui/main.wxss';
@import 'colorui/icon.wxss';
@import 'colorui/animation.wxss';

dan letakkan kod di atas ke dalam app.wxss Dalam fail ( Isi laluan kod di atas mengikut laluan sebenar anda)

colorui telah berjaya diperkenalkan Saya menggunakan komponen gaya colorui di sini , atau anda boleh menulis bahagian bawah sendiri Gaya bar navigasi boleh

Buat komponen bar navigasi bawah tersuai

Kami mula-mula mencipta folder komponen tersuai **tab-tersuai- bar, **Ingat, sesuaikan navigasi bawah Nama folder lajur mestilah ini dan tidak boleh ditukar kepada apa-apa lagi, jika tidak applet tidak akan dikenali.

Kemudian kami mencipta dua halaman (rumah, saya) di bawah Halaman, yang digunakan sebagai dua halaman bertukar untuk bar navigasi

tetapan fail app.json

Jika anda tidak menggunakan tetapan bar navigasi lalai program mini, anda perlu menetapkan atribut tersuai tabBar dalam app.json file For true

Kod khusus adalah seperti berikut:

"tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "images/icon/basics.png",
        "selectedIconPath": "images/icon/basics_cur.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/icon/component.png",
        "selectedIconPath": "images/icon/component_cur.png"
      }
    ]
  },

Perlu diperhatikan di sini bahawa senarai juga perlu ditetapkan PagePath dalam senarai mengkonfigurasi yang khusus halaman tab yang perlu anda konfigurasikan. Di sini saya hanya menyediakan dua tab, jadi dua dikonfigurasikan selepas mengkonfigurasi beberapa tab, tidak ada yang boleh hilang atau berkurangan mengikut keperluan anda sendiri.

Tulis logik kod khusus bar navigasi

Pelaksanaan khusus komponen bar navigasi

1 tetapan data komponen

**// custome-tab-bar/index.js**
/**
   * 组件的初始数据
   */
  data: {
    selected: 0,
    list: [{
        "pagePath": "/pages/home/home",
        "text": "首页",
        "iconPath": "/images/icon/basics.png",
        "selectedIconPath": "/images/icon/basics_cur.png"
      },
      {
        "pagePath": "/pages/my/my",
        "text": "我的",
        "iconPath": "/images/icon/component.png",
        "selectedIconPath": "/images/icon/component_cur.png"
      }
    ]
  }

Anda boleh melihat di sini bahawa tetapan adalah lebih kurang sama seperti yang terdapat dalam app.json, tetapi data senarai sebenar sebenarnya diperoleh di sini dan bukannya app.json kunci untuk melaksanakan komponen tersuai. Jadi, anda mungkin mempunyai soalan, kerana app.json tidak digunakan, mengapa anda perlu menetapkannya dalam app.json. Ini adalah keperluan standard program mini, dan kami hanya boleh mematuhinya.

2. Pelaksanaan kod halaman navigasi komponen

<!--custom-tab-bar/index.wxml-->
<view class="cu-bar tabbar">
  <view wx:for="{{list}}" wx:key="index" class="action" data-index="{{index}}" data-path="{{item.pagePath}}" bindtap="switchTab">
    <view class="cuIcon-cu-image">
      <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
    </view>
    <view class="text-green">{{item.text}}</view>
  </view>
</view>

Berikut ialah gaya colorui yang digunakan berdasarkan membandingkan bit indeks setiap bahagian data dalam senarai nilai yang dipilih. Kesan penukaran gaya dicapai melalui acara penukaran switchTab untuk mencapai penukaran halaman tab.

3. Pelaksanaan kod acara penukaran Komponen

/**
   * 组件的方法列表
   */
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
    
      wx.switchTab({
        url
      })
      this.setData({
        selected: data.index
      })
    }
  }

Panggil kaedah wx.switchTab yang disediakan oleh WeChat untuk melengkapkan lompatan url dan rekod nilai indeks yang dipilih pada masa yang sama.

Selepas menulis ini, kod untuk komponen kami selesai Kemudian halaman tertentu juga mesti menyediakan logik yang sepadan untuk penukaran butang

4 🎜>

Tetapkan nilai yang dipilih melalui fungsi kitaran hayat halaman onShow Kerana halaman saya ialah tab kedua, nilai indeks ditetapkan kepada 1. Komponen tersuai WeChat mempunyai antara muka getTabBar baharu, yang boleh mendapatkan tersuai. kandungan di bawah halaman semasa Dengan mentakrifkan contoh komponen tabBar, anda boleh menetapkan nilai yang dipilih dalam komponen. Halaman utama juga mempunyai tetapan yang sama, dan nilai indeks boleh dilonjak mengikut situasi sebenar.

// pages/my/my.js
/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("onShow")
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 1
      })
    }
  },

Pembentangan kesan akhir

Melalui pelaksanaan kod di atas, keseluruhan bar navigasi bawah tersuai direalisasikan, pelaksanaan keseluruhannya agak mudah. Mari kita lihat kesannya

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Video Pengaturcaraan

! !

Atas ialah kandungan terperinci Ajar anda langkah demi langkah cara menyesuaikan bar navigasi bawah applet WeChat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!