Небольшая программа, отправляющаяся в пит-трип — динамически устанавливаемая панель tabBar

внешний интерфейс GitHub Ресурсы изображений Icon

Недавно я сделал несколько проектов апплетов, и почти каждый проект будет использовать tabBar апплета. Давайте повеселимся сегодня с этим делом.

1. Первое знакомство с вами

Начнем с оригинального и самого простого варианта. Элементы конфигурации апплета уже подготовили для нас все о tabBar.Нам нужно только настроить содержимое tabBar в app.json в соответствии с форматом в документе, чтобы получить очень хороший tabBar.

tabBar: {
      list: [{
        pagePath: 'pages/main/index',
        text: '首页'
      }, {
        pagePath: 'pages/main/logs',
        text: '日志'
      }, {
        pagePath: 'pages/main/test',
        text: '测试'
      }]    
}

Да, это так просто, мы реализовали tabBar. И мы также можем установить цвет текста, фон, значок и т. д. прямо в элементе конфигурации. Это слишком просто, и вообще нет ощущения достижения 😏.

2. Умереть до выхода из ученичества

Когда я радостно набирал код, пришло произведение зла 😠.

«Теперь нам нужно добавить роль. Разные роли имеют разные разрешения, и вкладки внизу после входа в систему тоже разные».

"какие?!"

«Это легко для вас, верно? Это просто добавление суждения о характере и создание нескольких новых страниц».

 "Ты говоришь то, что говоришь 🤷‍♂️🤷‍♂️"

Поэтому я снова нажал на app.json. Эм? это не верно? app.json сам по себе является статическим конфигурационным файлом, и добиться динамических настроек вообще невозможно. Забудь, такая острая курица, я сам напишу.

3. Дом протекает, когда ночью идет дождь.

Поскольку конфигурация, предоставленная официалом, ненадежна, лучше сделать ее самостоятельно и иметь достаточно еды и одежды. Разве это не просто компонент tabBar, просто напишите стиль и используйте wx.reLaunch для перехода, так просто. Подумав над кодом, я все равно его не выкладываю.Ведь на гитхабе или других сайтах полно готовых кодов, которые написаны намного лучше меня.Мой код не будет установлен (диу) принудительно( рен).

Независимо от того, как проблема решена, отправьте код, позвоните домой и поужинайте с дамой, разве это не прекрасно? Однако, когда на следующий день я приехал в компанию, девушка-испытатель посмотрела на меня с улыбкой, и я инстинктивно почувствовал, что все не так просто.

«Почему ваша вкладка всегда мерцает при переключении?»

"Эм, это... не должно... не быть... большой проблемой, верно?"

"Но другие маленькие программы не имеют этой проблемы. Эта все мигает и продолжает мигать, и мои глаза ослепнут~~, братишка~~ Измени ее~~ ладно~~"

. . .

4. Деревня Минг Ю Уиллоу Темный Цветок

. . .

Правильно, позорно упал, давайте менять. Это точно в последний раз, и в дальнейшем есть ваш сет невозможно! ! (Тест: Кажется, в прошлый раз ты говорил то же самое~)

Забудь, кажется, что этот план ненадежен. Тогда если объединить несколько страниц в одну и переключаться в виде вкладки, то при клике заменяется только контент без перехода на страницу, и проблемы с мерцанием скоро не будет. Просто делай, что говоришь, код! !

<template>
  <view>
    <!-- 每个tab页的内容，如果页面太大可以分离出去，这里用简单的view表示tab页 -->
    <view wx:if="{{list[0].checked}}">首页</view>
    <view wx:if="{{list[1].checked}}">日志</view>
    <view wx:if="{{list[2].checked}}">测试</view>
    <!-- 底部tabBar -->
    <view class="bottom-tab">
      <repeat for="{{list}}" key="index" index="index" item="item">
        <view @tap="bindChange({{item}})" class="bottom-tab-inner">
          <view style="color: {{item.checked ? '#000000' : '#999'}}">{{item.text}}</view>        </view>      </repeat>    </view>  </view></template>

<script>
  import wepy from 'wepy'
  export default class Index extends wepy.page {
    data = {
      list: [{
        text: '首页',
        checked: true
      }, {
        text: '日志',
        checked: false
      }, {
        text: '测试',
        checked: false
      }]
    }
    methods = {
      bindChange (el) {
        this.list.forEach(item => {
          item.checked = (item.text === el.text)
        })
        this.$apply()
      }
    }
  }
</script>

<style lang="less" scoped>
  .bottom-tab{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 88rpx;
    border-top: 1px solid #666;
    display: flex;
    &-inner{
      flex-grow: 1;
      text-align: center;
      line-height: 88rpx;
    }
  }
</style>

Таким образом, базовая функция апплета tabBar реализована на UI, и на основе этого можно добавлять различный пользовательский контент, но все же есть небольшая проблема.Теперь текст верхней навигационной панели нельзя изменить при страница переключается. . Так что нам также нужно позвонитьwx.setNavigationBarTitleэто апи, поставьbindChangeС небольшим изменением:

bindChange (el) {
  this.list.forEach(item => {
    item.checked = (item.text === el.text)
  })
  wepy.setNavigationBarTitle({title: el.text})
  this.$apply()
}

Готово! ! !

Суммировать

Вещи, затронутые в этой статье, очень мелкие, просто реализация tabBar, Задача очень простая, и количество кода не так много, но это действительно заставило меня застрять на два дня. Но это также дало мне понять, что идея решения проблемы на самом деле важнее, чем реализация кода.Если направление не подходит, никакой объем работы не будет в два раза больше результата при половинных усилиях или даже наоборот .

Фронтенд Сяобай впервые пишет статью, его технологии ограничены, а литературный стиль средний, если вы видите какие-либо ошибки или неуместные места, пожалуйста, поправьте меня. Если вам посчастливилось помочь другим, это можно считать благословением.

      

        


Категории