Программа с вкладками апплета готова!

внешний интерфейс JavaScript Апплет WeChat Ресурсы изображений Icon

О тарбаре апплета WeChat, я думаю, вы не будете незнакомы В реализации мини-программы WeChat исходная панель вкладок относительно жесткая, недостаточно доработанная и часто не соответствует собственным требованиям.

  • Что делать в это время
    Этот план продолжается!

Давайте кратко поговорим о главной идее:
Настройте компонент значка шрифта и компонент панели вкладок, обратитесь к компоненту пользовательского значка шрифта на панели вкладок.

Сначала поговорим о преимуществах этой схемы:

  1. Измените изображение на шрифт, размер маленький, запрос уменьшен, а производительность улучшена.
  2. Определите свою собственную вкладку, вы можете удовлетворить свои собственные требования по всем аспектам деталей, с точностью до 1 пикселя.
  3. Компонент может изменить значок панели вкладок в соответствии со своими условиями (например, если вы нажимаете на страницу и хотите самостоятельно изменить стиль панели вкладок этой страницы) В общем, у него много свободы, хорошая точность и можно создать свою собственную панель вкладок, как вам нравится!

Ядром реализации этого решения по-прежнему является пользовательский компонент.

Итак, начните говорить здесь:
Пользовательский компонент состоит из 4 файлов json wxml wxss js.

  • Когда страница хочет сослаться на компонент, ей нужно всего лишь добавить следующее в конфигурацию json страницы.
{
//声明引用一个组件 配置好你的组件引用路径
  "usingComponents": {
    "icon": "../../components/icon/index"
  }
}
  • Затем добавьте тег компонента на страницу.
//这样就能够在你的页面中添加组件
<icon type="" color="" size=""/>

Если у вас все еще есть сомнения относительно определения компонентов, вы можете обратиться к этому документу:Официальная документация по пользовательским компонентам



Хорошо, давайте поговорим об этой программе формально:

  1. Сначала определите компонент значка шрифта, вБиблиотека икон АлиВыберите нужный шрифт и выберите код загрузки внутри.
    Здесь я выбираю схему _fontclass,
  2. Скопируйте содержимое из iconfont.css в index.wxss в созданный вами каталог значков.

3. Добавьте index.json в этот каталог.

{  
//声明这一组文件设为自定义组件
  "component": true,
  "usingComponents": {}
}
  1. Определите структуру компонента в index.wxml
<!-- 注意style里面的分号！ -->
<text class="iconfont icon-{{type}}" style="color:{{color}}; font-size:{{size}}rpx" ></text>
  1. Настройте его свойства в js
//这里定义了3个自定义属性他们通过{{}}与wxml中的数据连接起来
 Component({
  properties: {
    type: {
      type: String,
      value: ''
    },
    color: {
      type: String,
      value: '#000000'
    },
    size: {
      type: Number,
      value: '45'
    }
  }
})

На этом компонент значка шрифта готов.

Теперь начните второй шаг, получите компонент панели вкладок.

  1. Сначала добавьте конфигурацию в json
 {
  "component": true,
  //声明对字体图标组件的引用
  "usingComponents": {
    "icon": "../../components/icon/index"
  }
}
  1. написать структуру wxml
<view class="weibo-tabbar" >
//绑定回首页事件，此处的data-hi中的数据是为了传递到e.currentTarget.dataset.hi
//通过这个数据我们可以用来判断是否处于首页，然后在js中配置可以阻扰原地跳转
    <view class="item-left"  bindtap="goHome" data-hi="{{isIndex}}">
            <icon type="shouye" color="{{isIndex?'#000000':'#b1b1b1'}}" size="45"/>
            <text class="1" style="color:{{isIndex?'#000000':'#b1b1b1'}}">首页</text>
    </view>
    <block wx:if="{{isInner}}">
        <view class="item-right" style="color:#b1b1b1" bindtap="goShare">
        <icon type="fenxiang" color="gray" size="45"/>
            <text class="2">分享</text>
        </view>
    </block>
    <block wx:else>
        <view class="item-right"  bindtap="goInfo" data-hi="{{isIndex}}">
        <icon type="wode" color="{{isIndex?'#b1b1b1':'#000000'}}" size="45"/>
            <text class="2" style="color:{{isIndex?'#b1b1b1':'#000000'}}">我的</text>
        </view>
    </block>
</view>
  1. Перенастройте свойства и методы js
const app = getApp();
Component({
  properties: {
    isIndex: { // 是否主页            
      type: Boolean,
      value: false,
    },
    isInner: { //是否内部页面
      type: Boolean,
      value: false,
    },
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    goHome: (e) => {
      // 判断是否为主页面防止原地跳转
      if(!e.currentTarget.dataset.hi){
        wx.redirectTo({
          url: "/pages/index/index"
        })
      }
    },
    goShare: function () {
    },
    goInfo: (e) => {
        if(e.currentTarget.dataset.hi){
        wx.redirectTo({
          url: "/pages/info/info"
        })
      }
    }
  }
})
  1. настроить стиль wxss
.weibo-tabbar {
    bottom: 0;
    height: 97rpx;
    padding: 12rpx 0rpx;
    display: flex;
    width: 100%;
    position: fixed;
    background: #ffffff;
    box-sizing: border-box;
}
//产生优雅的0.5px边框
.weibo-tabbar::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: 0;
    left: 0;
    border-top: 1rpx solid rgba(177, 177, 177, 0.4);
    transform: scale(0.5);
    transform-origin: 0 0;
  }
  //这里用flex布局，移动端flex布局确实很爽
  .weibo-tabbar .item-left, .item-right{
   //这里有一处坑，若不不设置他的层级变大的话
   //你是点不到这个item按钮的，当然也不会产生触碰事件
    z-index: 999;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 20rpx;
    color: #b1b1b1;
}
.shouye, .wode {
    height: 45rpx;
    width: 45rpx;
}

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

//此处isIndex是给组件的属性传输值，别属性不添加即为默认属性值
<tabbar isIndex="true"></tabbar>

результат:

Ого, такая мелочь вышла после долгого просмотра!
На самом деле дорога проста
Освоение этого решения может адаптироваться ко всем необходимым вам панелям вкладок.
Его цвет, размер, положение можно контролировать самому, главное это решение.


Наконец, выделите некоторые из ям в нем
  1. Z-index уровня стиля кнопки должен быть увеличен
  2. Понимание значения атрибута и передачи {{}}
  3. style="color:{{color}}; font-size:{{size}}" Обратите внимание на ; внутри

Если вы считаете, что это хорошо, вы можете поставить большой палец вверх, чтобы поощрить его.

Категории