实现目标
- 可左右滑动切换列表;
- 点击分类菜单切换到相应的列表;
- 每个列表都可以上拉加载及下拉刷新;
结果展示
思路
通过使用scroll-view
组件来实现顶部的菜单列表、多个列表的左右滑动实现父组件及滚动列表,同时监听触摸相关事件来处理左右滑动整个列表而不是滑一部分移动一部分、对列表上下滚动和左右滑动的优化及配合translateY
实现scroll-view
组件的上拉加载和下拉刷新。
代码实现
基本的wxml文件实现布局:
<view class="page-con">
<scroll-view class="nav-list" scroll-x="{
{true}}" scroll-into-view="{
{navList[activeNavIndex].name}}" scroll-with-animation="true" scroll-anchoring="true">
<view id="{
{item.name}}" class="nav-item {
{activeNavIndex === index ? 'active' : ''}}" wx:for="{
{navList}}" wx:key="index" bindtap="switchPage" data-navIndex="{
{index}}">{
{item.name}}</view>
</scroll-view>
<scroll-view class="list-con" scroll-x="{
{canSwitch}}" scroll-into-view="{
{navList[activeNavIndex].name}}" scroll-with-animation="true" scroll-anchoring="true">
<scroll-view id="{
{item.name}}" class="list-item" wx:for="{
{navList}}" wx:key="index" scroll-y="true" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" bindtouchcancel="touchCancel" bindscroll="listScroll" bindscrolltolower="bottomLoad" style="transform: translateY({
{
freshDistance}}px)">
<view class="top-fresh" hidden="{
{!item.isFresh}}"></view>
<view class="card-item" wx:for="{
{item.cardNum}}" wx:for-item="cardItem" wx:for-index="cardIndex" wx:key="cardIndex">{
{item.name}}-{
{cardIndex}}</view>
<view class="top-fresh" hidden="{
{!item.showLoading}}"></view>
</scroll-view>
</scroll-view>