Eine kurze Diskussion darüber, wie man den Auf- und Ab-Verknüpfungseffekt beim Scrollen von Listen in kleinen Programmen erreicht

Wie kann das Miniprogramm den Effekt erzielen, in der Liste nach oben und unten zu scrollen? Der folgende Artikel stellt Ihnen die Methode zum Entwickeln eines WeChat-Applets vor, mit dem Sie in der Liste nach oben und unten scrollen können. Ich hoffe, er wird Ihnen hilfreich sein!

1. Ich arbeite derzeit an einem kleinen Programm für mein Unternehmen. Wenn die Liste nach oben und unten gescrollt wird, wird sie miteinander verknüpft Klicken Sie auf die Registerkartenleiste. Zu diesem Zeitpunkt werden auch die Listendaten verknüpft.

Das Folgende ist eine Darstellung der Implementierung:

Der Kopfbereich oben scrollt nicht mit der Liste; Der Bereich unterhalb des Kopfbereichs gehört zum Scrollbereich.

2. Implementierung

2.1 Prinzipielle Einführung

Die Implementierung dieses Ortes basiert hauptsächlich auf der nativen

Scroll-View

-Komponente des WeChat-Applets. Mit dem Scroll-in-View-Attribut können Sie auf die Tab-Leiste oben klicken, um die Seite zur angegebenen Listenposition zu scrollen.

Verwenden Sie das bindscroll-Ereignis, um die Scroll-Distanz der aktuellen Seite zu ermitteln und Tabs basierend darauf zu erstellen der Bildlaufabstand.

2.1 Seitenlayoutcode

Lassen Sie uns zunächst über das Gesamtlayout der Benutzeroberfläche sprechen, das hauptsächlich in zwei Teile unterteilt ist: den festen Kopfbereich + den scrollbaren Listenbereich.

Die Titelleiste des scrollbaren Listenbereichs sollte nach dem Scrollen um eine bestimmte Distanz ebenfalls oben fixiert sein.

Code-Implementierung:

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

<!--顶部固定区域-->
<view style="height: 88rpx;width: 100%;background-color: burlywood;text-align: center;">头部区域</view>

<!--可滚动区域-->
<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>

<!--数据列表-->
<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>

Im Layout-Code sind mehrere Punkte zu beachten:

1. scrollAreaHeight-Höhenberechnung des Bildlaufbereichs. --- Ermittelt die Fensterhöhe des aktuellen Geräts abzüglich der Höhe des oberen festen Bereichs

2 Ob sich die horizontale Tab-Leiste oben befindet. --- Basierend auf der Scroll-Distanz der Seite wird sie nach oben verschoben, wenn sie größer oder gleich der Höhe der horizontalen Tab-Leiste ist

3. {index}}" ID der Datenliste, und klicken Sie dann auf die Registerkartenleiste. Scrollen Sie zur angegebenen Position, um basierend auf dieser ID zu scrollen.

2.2 Stilcode

/**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 Logikcode

// 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) {
      //页面向上滑动
      //列表当前可视区域最底部到顶部的距离 超过 当前列表选中项距顶部的高度（且没有下标越界），则更新tab栏
      if (current + 1 < this.heightArr.length && scrollTop >= this.heightArr[current]) {
        this.setData({
          curSelectTab: current + 1
        })
      }
    } else { 
      //页面向下滑动
      //如果列表当前可视区域最顶部到顶部的距离 小于 当前列表选中的项距顶部的高度，则切换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 ]
      })
    })
  },
})

Es gibt zwei Hauptstellen im Logikcode:

1. cacluItemHeight berechnet das Höhenarray des Elements in der Liste und speichert das endgültige Berechnungsergebnis im heightArr-Array.

Der Wert jedes Elements im heightArr-Array wird basierend auf dem vorherigen Element akkumuliert.

2. Bestimmen Sie die aktuelle Scrollrichtung beim Scrollen, bestimmen Sie die aktuelle Richtung basierend auf dem Scrollen und legen Sie dann die aktuell ausgewählte Registerkarte basierend auf der Scrollentfernung fest.

Okay, das ist alles. Basierend auf dem oben genannten Inhalt können Sie grundsätzlich die gewünschten Scroll-Linkage- und Tab-Linkage-Effekte erzielen.

【Verwandte Lernempfehlungen:

Mini-Tutorial zur Programmentwicklung

】

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion darüber, wie man den Auf- und Ab-Verknüpfungseffekt beim Scrollen von Listen in kleinen Programmen erreicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!