Comment personnaliser le composant de la barre d'onglets du mini-programme pour obtenir le changement d'onglet inférieur

青灯夜游
Libérer: 2021-10-09 10:10:04
avant
4435 Les gens l'ont consulté

Cet article vous expliquera comment personnaliser le composant de la barre d'onglets dans la page du mini programme et réaliser le changement d'onglet inférieur.

Comment personnaliser le composant de la barre d'onglets du mini-programme pour obtenir le changement d'onglet inférieur

Demande récente, le brouillon de conception est tel qu'indiqué sur l'image

Comment personnaliser le composant de la barre donglets du mini-programme pour obtenir le changement donglet inférieur

Pour implémenter une barre de navigation inférieure spéciale, utilisez le composant de barre d'onglets personnalisé officiel, ajoutez la page d'onglet inférieure et changez l'écran de démarrage de l'image. [Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes]

Solution utilisant un carrousel swiper + un composant personnalisé

1. Écrivez le composant personnalisé jtab-bar

fichier wxml

<view class="jtab-bar">
  <view class="jtab-bar-item" wx:for="{{list}}" wx:key="index" data-index="{{index}}" bindtap="switchTab">
    <image wx:if="{{item.type === &#39;image&#39;}}" class="jcover-img-bigicon" 
      src="{{selected === index ? item.iconSelect : item.icon}}"></image>
    <view class="jtab-text" wx:else style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
  </view>
</view>
Copier après la connexion

fichier js

Component({
  data: {
    selected: 0,
    color: "#999999",
    selectedColor: "#032F82",
    list: [
      {
      type: &#39;text&#39;,
      text: "首页"
    }, 
    {
      type: &#39;image&#39;,
      icon: &#39;../../image/icon_map.png&#39;,
      iconSelect: &#39;../../image/icon_map_select.png&#39;,
      text: &#39;&#39;
    }, 
    {
      type: &#39;text&#39;,
      text: "我的"
    }]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      this.setData({selected: data.index})
      this.triggerEvent("setTab", data.index)
    }
  }
})
Copier après la connexion

wxss Deux images utilisées dans le fichier

.jtab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: white;
  display: flex;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0px -2rpx 2rpx rgba(153, 153, 153, 0.1);
}


.jtab-bar-item {
  text-align: center;
  flex: 1;
  height: 100rpx;
}

.jtab-bar-item .jtab-text {
  height: 100rpx;
  line-height: 100rpx;
}


.jcover-img-bigicon {
  position: fixed;
  bottom: 0rpx;
  width: 210rpx;
  height: 128rpx;
  padding-bottom: env(safe-area-inset-bottom);
  margin: 0 auto;
  right: 0;
  left: 0;
}
Copier après la connexion

 :

Comment personnaliser le composant de la barre donglets du mini-programme pour obtenir le changement donglet inférieur

Comment personnaliser le composant de la barre donglets du mini-programme pour obtenir le changement donglet inférieur

2. Le fichier

wxml

<view>
  <swiper class="jswipper-block" current="{{currentTab}}"  duration="{{100}}">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item catchtouchmove="swipperStop">
            <view class="swiper-item {{item}}">{{item}}</view>
          </swiper-item>
        </block>
      </swiper>
  <jtabbar bindsetTab="setTabbar"/>
</view>
Copier après la connexion

est utilisé dans la page catchtouchmove="swipperStop" est utilisé ici. le glissement manuel est interdit

fichier wxss

.jswipper-block {
  height: calc(100vh - 170rpx);
  background: #F7F8F9;
}
Copier après la connexion

fichier js

/**
   * 页面的初始数据
   */
  data: {
    background: [&#39;demo-text-1&#39;, &#39;demo-text-2&#39;, &#39;demo-text-3&#39;],
    currentTab: 0
  },

  setTabbar({detail}) {
    this.setData({currentTab: detail})
  },

  // 轮播图 禁止手动滑动 catchtouchmove="swipperStop"
  swipperStop(){
  },
Copier après la connexion

temporairement complété.

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéos de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:juejin.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal