小程序实现左右切换滑动列表思路

最新推荐文章于 2025-12-30 08:40:53 发布

原创

最新推荐文章于 2025-12-30 08:40:53 发布 · 1.8k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #左右滑动切换列表 #下拉刷新 #上拉加载

本文介绍如何在小程序中实现左右滑动切换列表的功能，每个列表支持上拉加载和下拉刷新。通过组件及触摸事件监听，优化滑动效果，确保列表平滑切换。同时，提供代码实现，包括wxml布局、wxss样式优化和js功能实现。

实现目标

可左右滑动切换列表；
点击分类菜单切换到相应的列表；
每个列表都可以上拉加载及下拉刷新；

结果展示

在这里插入图片描述

思路

通过使用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>
</view>