微信小程序列表滑动影响解析

场景说明

我们经常会遇到左边是一个分类，右边是内容列表，这时，一个页面中有左右两个列表。经过实践测试会出现，一下几个问题：

1. 两个滑动列表互相影响，即滑动一个时另一个也会跟着动
2. 微信小程序页面的生命周期函数 onreachBottom没法触发

我们用下面这个案例解析

• onreachBottom没法触发问题

onReachBottom只有在页面被充满时，并且滑动到页面底部时才会触发。

大部分未触发的原因时某个盒子内容可以滚动，但是这个盒子有固定的尺寸，页面并没有被充满。所以没有触发 onreachBottom。

• 两个滑动列表互相影响

就上面这个图片为例，当我们滑动左边的列表，当左边的列表滑动到底部的时候，我们继续往下滑动左边的列表，就会发现，右边的列表在往下滑动，左边的列表因为已经到底部了，所以不动。

当我们往上滑动左边的列表，直到列表顶部，我们继续滑动时，就会发现，左边的列表不懂，右边的列表，会往上滑动。

这就是微信 小程序两个列表的滑动影响问题。

产生原因： 当左边列表滑动到底部，继续滑动左边列表时，小程序会检测屏幕上可以往下滑动的列表并往下滑动。 当往上滑动左边的列表时，同上。

总结

这算是微信小程序的一个小bug吧，当页面不充满，onreachbottom无法触发我们就没有办法做移动端的分页。

而两个列表的滑动影响可能让客户误以为我们程序不严谨。

以上demo代码

• wxml

<view class="page-box">
  <view class="header-banner">
    <image src="../1.jpeg" mode="aspectFill"></image>
  </view>

  <view class="classify-box">
    <view class="left-nav">
      <view class="left-nav-item" wx:for="{{20}}">{{item}}</view>
    </view>
    
      <view class="right-con">
        <view class="right-con-item" wx:for="{{40}}">这是内容{{item}}</view>
      </view>
    
  </view>
</view>

• wxss

.page-box {
  height:100%;
  /* overflow: hidden; */
}

.header-banner {
  height: 200px;
}

.header-banner image {
  width: 100%;
  height: 200px;
}

.classify-box {
  height: calc(100vh - 220px);
  margin-top: 20px;
  display: flex;
 
}

.left-nav {
  height: 100%;
  width: 100px;
  overflow: scroll;
}

.left-nav-item {
  border-bottom: 1px solid #ccc;
  text-align: center;
  padding: 10px 0;
}

.right-con {
  height: 100%;
  overflow: scroll;
  flex-basis: calc(100vw - 110px);
  margin-left: 10px;
}

.right-con-item {
  text-align: center;
  padding: 30px 0;
  border: 1px solid #666;
}

• json

{
  "usingComponents": {},
  "onReachBottomDistance": 20
}

• js

const app = getApp()

Page({
  data: {

  },
  onLoad: function () {
    console.log('代码片段是一种迷你、可分享的小程序或小游戏项目，可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题和 Bug 等。可点击以下链接查看代码片段的详细文档：')
    console.log('https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html')
  },
  onReachBottom: function(){
    console.log("reach bottom");
  }
})