Comment implémenter des onglets dans les mini-programmes WeChat

L'application des onglets dans les mini-programmes WeChat est visible partout. Cet article vous présentera la mise en œuvre des onglets dans les mini-programmes WeChat.

Idées

• J'ai déjà écrit un onglet basé sur swiper. Il y a un composant swiper dans le mini programme. Il ne fait aucun doute que le composant swiper. est utilisé ici

• Le composant swiper dans l'applet a un problème car il ne peut pas adapter la hauteur en fonction du contenu, vous devez donc obtenir la hauteur de l'appareil via wx.getSystemInfoSync pour définir la hauteur du swiper

• Le contenu de l'élément swiper dans le composant swiper de l'applet ne peut pas défiler après avoir dépassé la zone visible, donc une autre vue de défilement du composant est utilisée ici.

La fonction du composant swiper dans le mini programme est encore relativement limitée et doit être optimisée.

Solution

1. Définissez d'abord les données dans js

 data: {
    tabs: ['菜单一', '菜单二'],// 导航菜单栏
    curIdx:0,// 当前导航索引
    scrollHeight:0, //滚动高度 = 设备可视区高度 -  导航栏高度
    list:[],// 内容区列表
  },

Remplissez les données dans la fonction onLoad

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let list=[];
    for (let i=1;i<=30;i++){
      list.push(i)
    }
    this.setData({
      list: list
    });
  },

2 . Rendre la navigation en boucle en WXML

<!-- 导航栏开始 -->
<view class="swiper-tab">
  <view wx:for="{{tabs}}" wx:key class="swiper-tab-item {{curIdx==index?&#39;swiper-active&#39;:&#39;&#39;}}" data-current="{{index}}" catchtap="clickTab">
    <text>{{item}}</text>
  </view>
</view>

3. Définir le style de navigation actif actuel

/*初始化样式*/
view, text, picker, input, button, image{
  display: flex;
  box-sizing: border-box;
}
/* 导航样式*/
.swiper-tab {
  position: relative;
  width: 100%;
  height: 100rpx;
  justify-content: center;
  align-items: center;
}

.swiper-tab-item {
  background-color: #f3f3f3;
  width: 50%;
  height: 80rpx;
  justify-content: center;
  align-items: center;
}
.swiper-active{
  background-color: rgb(129, 190, 247);
  color: #fff;
}

4 La zone d'affichage du contenu

utilise le swiper. composant dans la zone d'affichage du contenu. Le nombre d'éléments de balayage doit être cohérent avec la longueur du tableau d'onglets

<!-- 内容开始 -->
<swiper class="swiper_content" current="{{curIdx}}"   bindchange="swiperTab" style=&#39;height:{{scrollHeight}}px&#39;>
  <swiper-item>
    <scroll-view class="scroll-y" scroll-y style=&#39;height:{{scrollHeight}}px&#39; bindscrolltolower="onReachBottom">
    <view wx:for="{{list}}" wx:key>
      <text> 内容一{{item}}</text>
    </view>
        </scroll-view>
  </swiper-item>
  <swiper-item>
    内容二
  </swiper-item>
</swiper>

小程序中的swiper组件有个问题就是不能根据内容自适应高度，所以要通过[wx.getSystemInfoSync][4]获取设备高度设置swiper高度
小程序中的swiper组件中swiper-item内容超出可视区后无法滚动显示，所以这里要用到另一个组件[scroll-view][5]。
Nous obtenons la largeur et la hauteur. de l'appareil via getSystemInfoSync dans la fonction onShow pour définir la hauteur du composant swiper et la hauteur de la vue de défilement

  onShow: function () {
    // 100为导航栏swiper-tab 的高度
   this.setData({
     scrollHeight: wx.getSystemInfoSync().windowHeight - (wx.getSystemInfoSync().windowWidth / 750 * 100),
   })
  },

5 Cliquez sur la barre de navigation pour changer de contenu

  //点击切换
  clickTab: function (e) {
    this.setData({
      curIdx: e.currentTarget.dataset.current
    })
  },

6. le contenu pour changer de barre de navigation

  //滑动切换
  swiperTab: function (e) {
    this.setData({
      curIdx: e.detail.current
    });
  },

7. Zone défilante Faites défiler vers le bas pour actualiser les données

  /**
 * 页面上拉触底事件的处理函数
 */
  onReachBottom: function () {
    // 更新列表
    let list = this.data.list;
    console.log(list)
    let lens = list.length
    for (let i = lens; i < lens+30; i++) {
      list.push(i)
    }
    this.setData({
      list: list
    });
  
  },

Un bel onglet est terminé. Cas complet

Ce qui précède représente l'intégralité du contenu de cet article. Pour des informations plus intéressantes, veuillez prêter attention au site Web chinois php.

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!