미니 프로그램에서 목록을 위아래로 스크롤하는 효과를 어떻게 얻을 수 있나요? 다음 기사에서는 목록을 위아래로 스크롤할 수 있는 WeChat 애플릿을 개발하는 방법을 소개하겠습니다. 도움이 되기를 바랍니다.
현재 회사에서 작은 프로그램을 만들고 있는데, 목록을 위아래로 스크롤하면 상단의 탭바가 서로 연결되는 디자인입니다. 탭 바를 클릭하면 목록 데이터도 연결됩니다.
다음은 구현 렌더링입니다.
상단의 헤더 영역은 목록과 함께 스크롤되지 않습니다. 헤드 영역 아래 영역은 스크롤 영역에 속합니다.
이 곳의 구현은 주로 WeChat 애플릿의 기본 scroll-view 구성 요소에 의존합니다.
scroll-into-view 속성을 사용하여 상단의 탭 표시줄을 클릭하면 지정된 목록 위치로 페이지를 스크롤할 수 있습니다.
binscroll 이벤트를 사용하여 현재 페이지의 스크롤 거리를 파악하고 이를 기반으로 탭을 만듭니다. 스크롤 거리
먼저 인터페이스의 전체 레이아웃에 대해 이야기해 보겠습니다. 인터페이스는 주로 고정 헤드 영역 + 스크롤 가능 목록 영역의 두 부분으로 나뉩니다.
스크롤 가능한 목록 영역의 제목 표시줄도 일정 거리만큼 스크롤한 후 상단에 고정되어야 합니다.
코드 구현:
<!--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 ? 'head-float' : ''}}" >
<view class="head-area-item {{curSelectTab === index ? 'head-area-item-select' : ''}}" 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를 기반으로 구현됩니다.
/**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;
}// 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('.list-group-item').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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
