미니 프로그램에서 목록을 위아래로 스크롤하는 효과를 어떻게 얻을 수 있나요? 다음 기사에서는 목록을 위아래로 스크롤할 수 있는 WeChat 애플릿을 개발하는 방법을 소개하겠습니다. 도움이 되기를 바랍니다.

작은 프로그램에서 목록 스크롤의 상하 연결 효과를 달성하는 방법에 대한 간략한 설명

1. 배경

현재 회사에서 작은 프로그램을 만들고 있는데, 목록을 위아래로 스크롤하면 상단의 탭바가 서로 연결되는 디자인입니다. 탭 바를 클릭하면 목록 데이터도 연결됩니다.

다음은 구현 렌더링입니다.

작은 프로그램에서 목록 스크롤의 상하 연결 효과를 달성하는 방법에 대한 간략한 설명

상단의 헤더 영역은 목록과 함께 스크롤되지 않습니다. 헤드 영역 아래 영역은 스크롤 영역에 속합니다.

2. 구현

2.1 원리 소개

이 곳의 구현은 주로 WeChat 애플릿의 기본 scroll-view 구성 요소에 의존합니다.

scroll-into-view 속성을 사용하여 상단의 탭 표시줄을 클릭하면 지정된 목록 위치로 페이지를 스크롤할 수 있습니다.

binscroll 이벤트를 사용하여 현재 페이지의 스크롤 거리를 파악하고 이를 기반으로 탭을 만듭니다. 스크롤 거리

2.1 페이지 레이아웃 코드

먼저 인터페이스의 전체 레이아웃에 대해 이야기해 보겠습니다. 인터페이스는 주로 고정 헤드 영역 + 스크롤 가능 목록 영역의 두 부분으로 나뉩니다.

스크롤 가능한 목록 영역의 제목 표시줄도 일정 거리만큼 스크롤한 후 상단에 고정되어야 합니다.

코드 구현:

<!--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>

로그인 후 복사

레이아웃 코드에서 주의해야 할 몇 가지 사항이 있습니다.

1. 스크롤 영역의 scrollAreaHeight 높이 계산. --- 현재 기기의 창 높이에서 상단 고정 영역의 높이를 뺀 값을 구합니다

2. 가로 탭바가 상단에 있는지 여부. --- 페이지의 스크롤 거리를 기준으로 스크롤 거리가 가로 탭바의 높이보다 크거나 같을 경우 상단으로 이동합니다.

3. {index}}" 데이터 목록의 ID를 지정한 후 탭바를 클릭하면 지정된 위치로 스크롤이 이 ID를 기반으로 구현됩니다.

2.2 스타일 코드

/**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 논리 코드

// 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 ]
      })
    })
  },
})

로그인 후 복사

논리 코드에는 두 가지 주요 위치가 있습니다.

1 cacluItemHeight는 목록에 있는 항목의 높이 배열을 계산하고 최종 계산 결과를 heightArr 배열에 저장합니다.

heightArr 배열의 각 항목 값은 이전 항목을 기준으로 누적됩니다.

2. 스크롤에서 현재 스크롤 방향을 결정하고, 스크롤을 기준으로 현재 방향을 결정한 다음, 스크롤 거리를 기준으로 현재 선택된 탭을 설정합니다.

그렇습니다. 위 내용을 바탕으로 기본적으로 원하는 스크롤 연결 및 탭 연결 효과를 얻을 수 있습니다.

【관련 학습 추천: 미니 프로그램 개발 튜토리얼】

위 내용은 작은 프로그램에서 목록 스크롤의 상하 연결 효과를 달성하는 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!