Comment le mini programme peut-il obtenir l'effet de faire défiler la liste de haut en bas ? L'article suivant vous présentera la méthode de développement de l'applet WeChat pour faire défiler la liste de haut en bas. J'espère que cela vous sera utile !

1. Contexte

Je travaille actuellement sur un petit programme pour mon entreprise. L'une des conceptions est que lorsque la liste défile de haut en bas, les barres d'onglets en haut seront liées entre elles. la barre d'onglets est cliquée. à ce moment, les données de la liste sont également liées.

Ce qui suit est un rendu de l'implémentation?:

La zone d'en-tête en haut ne défile pas avec la liste?; La zone située sous la zone d'en-tête appartient à la zone de défilement.

2. Implémentation

2.1 Introduction du principe

La mise en ?uvre de ce lieu repose principalement sur le composant natif scroll-view de l'applet WeChat.

à l'aide de son attribut scroll-into-view, vous pouvez cliquer sur la barre d'onglets en haut pour faire défiler la page jusqu'à la position de liste spécifiée?;

Utilisez l'événement bindscroll pour conna?tre la distance de défilement de la page actuelle et créer des onglets en fonction de la distance de défilement. Opération de commutation?;

2.1 Code de mise en page

Parlons d'abord de la disposition générale de l'interface, qui est principalement divisée en deux parties, la zone d'en-tête fixe + la zone de liste déroulante.

Lorsque la barre de titre de la zone de liste déroulante défile sur une certaine distance, elle doit également être fixée en haut.

Implémentation du code?:

<!--index.wxml-->
<view class="list">

<!--頂部固定區(qū)域-->
<view style="height: 88rpx;width: 100%;background-color: burlywood;text-align: center;">頭部區(qū)域</view>

<!--可滾動區(qū)域-->
<scroll-view scroll-y="true" style="width: 100%; height: {{scrollAreaHeight}}px;" bindscroll="scroll" scroll-into-view="{{scrollToItem}}" scroll-with-animation="true"  scroll-top="{{scrollTop}}">

   <!--水平滾動的tab欄-->
  <scroll-view scroll-x="true" style="height: 88rpx;width: 100%;">
  <view class="head-area {{float ? &#39;head-float&#39; : &#39;&#39;}}" >
    <view class="head-area-item {{curSelectTab === index ? &#39;head-area-item-select&#39; : &#39;&#39;}}" wx:for="{{appGroupList}}" bindtap="tabClick" data-index="{{index}}">
    {{item.name}}
  </view>
  </view>

  </scroll-view>

<!--數(shù)據(jù)列表-->
<view class="list-group" style="height: {{listGroupHeight}}px;">
  <view class="list-group-item" id="v_{{index}}" wx:for="{{appGroupList}}" data-index="{{index}}">
    <view class="group-name">
      {{item.name}}
    </view>
    <view class="group-children" >
      <view wx:for="{{item.children}}" class="group-children-item" style="width: {{itemWidth}}px;">
      <image src="{{item.url}}"></image>
      <view>{{item.name}}</view>
    </view>
    </view>

  </view>
</view> 
</scroll-view>

</view>

Il y a plusieurs points à surveiller dans le code de mise en page?:

1. scrollAreaHeight calcul de la hauteur de la zone de défilement. --- Obtenez la hauteur de la fenêtre de l'appareil actuel moins la hauteur de la zone fixe supérieure

2 Si la barre d'onglets horizontale est en haut. --- En fonction de la distance de défilement de la page, si la distance de défilement est supérieure ou égale à la hauteur de la barre d'onglets horizontale, elle sera déplacée vers le haut

3. Définissez l'id="v_{?; {index}}" identifiant de la liste de données, puis cliquez sur la barre d'onglets. Le défilement jusqu'à la position spécifiée est implémenté en fonction de cet identifiant.

2.2 Code de style

/**index.wxss**/
.list{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.head-area{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 88rpx;
  width: 100%;
  padding: 0 10;
}

.head-area-item{
  display: flex;
  height: 88rpx;
  text-align: center;
  width: 150rpx;
  align-items: center;
  justify-content: center;
}

.head-area-item-select{
  color: #09bb07;
}

image{
  width: 88rpx;
  height: 88rpx;
}

.list-group{
  display: flex;
  width: 100%;
  height: 1000%;
  flex-direction: column;
}

.list-group-item{
  display: flex;
  width: 100%;
  background-color: #aaa;
  flex-direction: column;
}

.group-name{
  height: 88rpx;
  display: flex;
  text-align: center;
  align-items: center;
  margin-left: 20rpx;
}

.group-children{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.group-children-item{
  height: 160rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.head-float{
  position: fixed;
  top: 88rpx;
  background-color: #ffffff;
}

2.3 Code logique

// index.js
Page({
  heightArr: [],
  //記錄scroll-view滾動過程中距離頂部的高度
  distance: 0,
  data: {
    appGroupList:[
      {name:"分組01",children:[{"name":"測試0","url":"/images/bluetooth.png"},
      {"name":"測試1","url":"/images/bluetooth.png"},
      {"name":"測試2","url":"/images/bluetooth.png"},
      {"name":"測試3","url":"/images/bluetooth.png"},
      {"name":"測試4","url":"/images/bluetooth.png"},
      {"name":"測試5","url":"/images/bluetooth.png"},
      {"name":"測試6","url":"/images/bluetooth.png"},
      {"name":"測試7","url":"/images/bluetooth.png"}]},
      {name:"分組02",children:[{"name":"測試0","url":"/images/bluetooth.png"},
      {"name":"測試1","url":"/images/bluetooth.png"},
      {"name":"測試2","url":"/images/bluetooth.png"},
      {"name":"測試3","url":"/images/bluetooth.png"},
      {"name":"測試4","url":"/images/bluetooth.png"},
      {"name":"測試5","url":"/images/bluetooth.png"},
      {"name":"測試6","url":"/images/bluetooth.png"},
      {"name":"測試7","url":"/images/bluetooth.png"}]},
      {name:"分組03",children:[{"name":"測試0","url":"/images/bluetooth.png"},
      {"name":"測試1","url":"/images/bluetooth.png"},
      {"name":"測試2","url":"/images/bluetooth.png"},
      {"name":"測試3","url":"/images/bluetooth.png"},
      {"name":"測試4","url":"/images/bluetooth.png"},
      {"name":"測試5","url":"/images/bluetooth.png"},
      {"name":"測試6","url":"/images/bluetooth.png"},
      {"name":"測試7","url":"/images/bluetooth.png"}]},
      {name:"分組04",children:[{"name":"測試0","url":"/images/bluetooth.png"},
      {"name":"測試1","url":"/images/bluetooth.png"},
      {"name":"測試2","url":"/images/bluetooth.png"},
      {"name":"測試3","url":"/images/bluetooth.png"},
      {"name":"測試4","url":"/images/bluetooth.png"},
      {"name":"測試5","url":"/images/bluetooth.png"},
      {"name":"測試6","url":"/images/bluetooth.png"},
      {"name":"測試7","url":"/images/bluetooth.png"}]},
      {name:"分組05",children:[{"name":"測試0","url":"/images/bluetooth.png"},
      {"name":"測試1","url":"/images/bluetooth.png"},
      {"name":"測試2","url":"/images/bluetooth.png"},
      {"name":"測試3","url":"/images/bluetooth.png"},
      {"name":"測試4","url":"/images/bluetooth.png"},
      {"name":"測試5","url":"/images/bluetooth.png"},
      {"name":"測試6","url":"/images/bluetooth.png"},
      {"name":"測試7","url":"/images/bluetooth.png"}]},
    ],
    itemWidth: wx.getSystemInfoSync().windowWidth / 4,
    scrollAreaHeight:wx.getSystemInfoSync().windowHeight - 44,
    float:false,
    curSelectTab:0,
    scrollToItem:null,
    scrollTop: 0, //到頂部的距離
    listGroupHeight:0,
  },

  onReady: function () {
    this.cacluItemHeight();
  },

  scroll:function(e){
    console.log("scroll:",e);
    if(e.detail.scrollTop>=44){
      this.setData({
        float : true
      })
    } else if(e.detail.scrollTop<44) {
      this.setData({
        float : false
      })
    }
    let scrollTop = e.detail.scrollTop;
    let current = this.data.curSelectTab;
    if (scrollTop >= this.distance) {
      //頁面向上滑動
      //列表當(dāng)前可視區(qū)域最底部到頂部的距離 超過 當(dāng)前列表選中項距頂部的高度（且沒有下標(biāo)越界），則更新tab欄
      if (current + 1 < this.heightArr.length && scrollTop >= this.heightArr[current]) {
        this.setData({
          curSelectTab: current + 1
        })
      }
    } else { 
      //頁面向下滑動
      //如果列表當(dāng)前可視區(qū)域最頂部到頂部的距離 小于 當(dāng)前列表選中的項距頂部的高度，則切換tab欄的選中項
      if (current - 1 >= 0 && scrollTop < this.heightArr[current - 1]) {
        this.setData({
          curSelectTab: current - 1
        })
      }
    }
    //更新到頂部的距離
    this.distance = scrollTop;
  },

  tabClick(e){
    this.setData({
      curSelectTab: e.currentTarget.dataset.index,
      scrollToItem: "v_"+e.currentTarget.dataset.index
    })
  },

  //計算每一個item高度
  cacluItemHeight() {
    let that = this;
    this.heightArr = [];
    let h = 0;
    const query = wx.createSelectorQuery();
    query.selectAll(&#39;.list-group-item&#39;).boundingClientRect()
    query.exec(function(res) {
      res[0].forEach((item) => {
        h += item.height;
        that.heightArr.push(h);
      })
      console.log(that.heightArr);
      that.setData({
        listGroupHeight: that.heightArr[that.heightArr.length - 1 ]
      })
    })
  },
})

Il y a deux endroits principaux dans le code logique :

1 cacluItemHeight calcule le tableau de hauteur de l'élément dans la liste et enregistre le résultat final du calcul dans le tableau heightArr .

La valeur de chaque élément du tableau heightArr est accumulée en fonction de l'élément précédent.

2. Déterminez la direction de défilement actuelle dans le défilement, déterminez la direction actuelle en fonction du défilement, puis définissez l'onglet actuellement sélectionné en fonction de la distance de défilement.

D'accord, c'est tout. Sur la base du contenu ci-dessus, vous pouvez essentiellement obtenir les effets de liaison de défilement et de liaison d'onglets souhaités.

【Recommandations d'apprentissage associées?: Tutoriel de développement de mini-programmes】

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!