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

实现目标

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

结果展示

思路

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