weapp tabbar

مكون شريط علامات التبويب المخصص (TabBar) لبرنامج WeChat الصغير

يدعم الرموز بدون نص، والأيقونات الكبيرة، والأيقونات العائمة، وما إلى ذلك.

تنزيل كود المصدر: https://github.com/tanggaowei/weapp-tabbar

الكود الخاص بمكون شريط علامات التبويب المخصص موجود في الدليل /commpents/tabbar ويمكن نسخه مباشرة إلى مشاريع أخرى للاستخدام. فيما يلي وصف لكيفية استخدامه.

1. المكونات المرجعية

في ملف json الخاص بالصفحة التي تحتاج إلى استخدام شريط علامات التبويب، استخدم عنصر تكوين usingComponents للإشارة إلى مكون شريط علامات التبويب:

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

2. أضف المكونات

أضف الآن المكون في ملف wxml:

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

ثم حدد بيانات المكون في ملف js، مثل شريط التبويب:

 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": "我"
        }
      ]
    }
  }
})

تنسيق البيانات لمكون شريط علامات التبويب المخصص هو نفس شريط علامات التبويب الأصلي للبرنامج المصغر. نركز هنا على استخدام السمات الجديدة iconType choose .

يحتوي IconType على إجمالي 4 قيم: big ، overflow ، circle ، shadow . يمكن استخدام هذه القيم الأربع بشكل فردي أو في وقت واحد. افصل بينها بمسافات عند استخدامها في وقت واحد (في الواقع سيتم ملؤها في سمة الفئة للعلامة المقابلة). وظائفهم هي كما يلي:

• يستخدم Big أيقونات كبيرة ويضبط عرض الأيقونة وارتفاعها على 95rpx، وهو ما يساوي ارتفاع شريط علامات التبويب؛
• يحرك الفائض الرمز لأعلى بحيث يتم عرض جزء منه خارج شريط علامات التبويب؛
• الدائرة تقطع صورة الأيقونة إلى دائرة؛
• يضيف الظل ظلًا إلى الأيقونة.

تحتوي سمة الاختيار على قيمتين: تمكين وتعطيل، والقيمة الافتراضية هي تمكين. عند تعيينه على التعطيل، لن يؤدي النقر فوق عنصر التسمية إلى تغيير الحالة المحددة لشريط التسمية، ولكن سيستمر تشغيل حدث التغيير.

3. مراقبة تبديل الأحداث

استخدم سمة bindchange لربط حدث الاستماع:

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

ثم قم بتنفيذ طريقة الاستماع في 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
      })
    }
  }

ستحصل طريقة الاستماع على بياناتين: e.detail.key و e.detail.index . من بينها، e.detail.key يتوافق مع القيمة الرئيسية لعنصر مصفوفة البيانات tabbar.list، وهي ليست جيدة مثل الصفحة الرئيسية والعلامة والجديد والمفكرة أعلاه وأنا. يتوافق e.detail.index مع الرقم التسلسلي لعنصر المصفوفة، مثل 0، 1، 2، 3، 4.

4. الخطة العملية

1) المكونات المخصصة

تشبه المكونات المخصصة الصفحات ولها قوالب wxml وأنماط wxss الخاصة بها، مما يسهل فصل المنطق وطرق العرض، وهو أفضل من استخدام القوالب مباشرة. فيما يلي نموذج التعليمات البرمجية للتبديل باستخدام مكون مخصص في ملف 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>

من بينها، <home> و <tag> و <notebook> و <me> هي أربعة مكونات مخصصة تنفذ وظائفها الخاصة على التوالي.

2) استخدام القوالب

يمكن أيضًا تحقيق تأثير التبديل باستخدام القوالب، ولكن قد يلزم كتابة الكود المنطقي في نفس الصفحة. على سبيل المثال:

 <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) الملاحة والقفز

يمكنك استخدام واجهة wx.navigateTo() أو wx.redirectTo() في أسلوب الاستماع لتبديل محتوى الصفحة. على سبيل المثال:

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