微信小程序滑动穿透事件处理方案

滑动穿透事件处理：

亲测可行！

在下面这个图中只有箭头值的地方是滑动的区域，但是当用手滑动上部红色区域的时候下面的滑动区域也跟着滑动，这个效果不是我们希望的。

给上面红色区域添加这个事件catchtouchmove="move" 。然后在js中在实现这个方法 move: function(){},这样就可以了。

其实这个现象的出现就是事件冒泡传递过去了。catchtouchmove属性就是去掉冒泡的事件绑定，就像catchtap一样。

页面

<!--导航 taba按钮  -->
<view catchtouchmove="move" class='test'></view>
<scroll-view catchtouchmove="move" id='scroll' class='scroll' scroll-x="true">
    <view class="scroll_item scroll_item1">姓名</view>
    <view class="scroll_item scroll_item2">等级</view>
    <view class="scroll_item scroll_item3">货款</view>
    <view class="scroll_item scroll_item4">团队人数</view>
    <view class="scroll_item scroll_item5">展开</view>
</scroll-view>

<!--上拉加载  -->
<view catchtouchmove="move"  class='scroll_box'>
    <scroll-view class="scroll_y" scroll-y bindscrolltolower="loadMore">
        <view class='item_y'>
            <view class='view1'>11付继超付3594</view>
            <view class='view2'>美丽顾问</view>
            <view class='view3'>100000.00</view>
            <view class='view4'>1000</view>
            <view class='view5'>></view>
        </view>
        <view class='filling'></view>
    </scroll-view>
</view>

样式

page {
    background-color: #f0f0f0;
}
.test{
    width: 100%;
    height: 300rpx;
    background-color: red;
    z-index: 999;
    position: fixed;
    left: 0;
    top: 0;
}
.scroll_box{
    width: 100%;
    overflow: hidden;
     position: absolute;
    left: 0;
    z-index: 2;
    top: 300rpx; 
    padding: 10rpx 0rpx;
    height: 100%;
}
.scroll {
     position: fixed;
    left: 0;
    top: 200rpx; 
    width: 100%;
    white-space: nowrap;
    background-color: white;
    color: #999;
    font-size: 30rpx;
    z-index: 999;
}

.scroll .scroll_item {
    padding: 20rpx 30rpx;
    display: inline-block;
    
    text-align: center;
}
.scroll_item1{
    width: 150rpx;
}
.scroll_item2{
    width: 100rpx;
}
.scroll_item3{
    width: 60rpx;
}
.scroll_item4{
    width: 90rpx;
}
.scroll_item5{
    width: 40rpx;
}
.active {
    color: #66c300;
    border-bottom: 1px solid #66c300;
}

.scroll_y {
width: 100%;
white-space: nowrap;
    box-sizing: border-box;
}

.scroll_y .item_y {
    display: inline-block;
    padding: 0 20rpx;
    background-color: white;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    box-sizing: border-box;
    font-size: 30rpx;
}
.item_y view{
    display: inline-block;
    font-size: 24rpx;
    text-align: center;
}
.view1{
    width: 200rpx;
}
.view2{
    width: 160rpx;
}
.view3{
    width: 120rpx;
}
.view4{
    width: 150rpx;
}
.view5{
    width: 60rpx;
}
.item_y:last-child {
    margin-bottom: 105rpx;
}








/*
    填充
  */
.filling {
    width: 100%;
    height: 300rpx;
}

.modal .close {
    position: absolute;
    right: 20rpx;
    top: 10rpx;
    padding: 20rpx;
    font-size: 40rpx;
}

.modal .title {
    color: #222;
    border: 1repx solid #222;
    float: left;
    display: inline-block;
    padding-top: 10rpx;
}

.modal .picker {
    padding: 10rpx 0;
    line-height: 30rpx;
}

.modal .option {
    border-radius: 10rpx;
    vertical-align: middle;
    line-height: 47rpx;
    border: 1rpx solid #999;
    display: inline-block;
    border: 1repx solid #222;
    width: 300rpx;
    height: 50rpx;
}

/* 图标  */

.icon {
    position: absolute;
    right: 30rpx;
    z-index: 999;
    background-size: contain;
    width: 110rpx;
    display: inline-block;
    height: 110rpx;
    background-repeat: no-repeat;
}

.icon_search {
    bottom: 300rpx;
}

.icon_home {
    bottom: 150rpx;
}

js

/** 
 *  实例 ： ajax请求
 *  
 * @fjc
 */

// pages/ped-login/index.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
       
        top_height: ""
    },
    move: function(){},
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        _this = this;
       
       
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

        
    },

    /**
     * 生命周期函数--监听页面显示
     */

   
    loadMore: function () {
       
    },

   
})

  代码是比较长，直接复制就能够运行