微信小程序用户滑动体验处理

问题1：当页面出现弹出层，弹出层和底层均有滚动条，滚动弹出层，底层跟着滚动（滚动穿透）

处理：该问题原因是弹出层的滚动事件冒泡至底层组件，触发底层监听函数，故需要在弹出层阻止事件冒泡，在弹出层绑定事件catchtouchmote="{{cancelScrollPop}}"  //cancelScrollPop 可以为空函数，阻止滚动事件冒泡，问题解决。

问题2： scroll-view  组件如何在保证滚动功能正常的情况下不显示滚动条（纵向y）

处理：微信并没有提供隐藏滚动条样式的原生接口，解决此问题可以使用一个思路，scroll-view外再包一层包裹层，这一层的宽度和scroll-view宽度一致，横向内容溢出则隐藏，然后设置scroll-wrap的padding和scroll-left，使滚动条右边移动，移出包裹层的宽度范围，这个滚动条就被隐藏。

//wxml

<view class='scroll-wrap'>

    <scroll-view class="none-bar" scroll-y="{{true}}" scroll-left='1000'>

        ......

    </scroll-view>

</view>

//wxss

.scroll-wrap {

  width:590rpx;

  overflow-x: hidden;

}

.none-bar {

  padding-right: 1000px;

}

问题3：用户在屏幕上滑动，下拉会使整个页面跟着下滑而出现空白，如何使页面背景固定住

处理：如果页面内容正好一屏，可在最外层包裹添加样式

        .wrap-a{

            background-image: linear-gradient(-180deg, #7B6F86 0%, #4B4154 100%);   /* 渐变色背景 */

            position:fixed;

            left:0;

            top:0；

            bottom:0;

            right:0;

        }

        如果页面内容需要纵向滚动，则需要更改结构，使最外层包裹透明，背景写在一层用来打底的view上

        <view class="wrap-b">

            <view class="fixed-background"></view>

            ......

        <view>

       .wrap-b {

                 background-color: transparent;   /* 外包裹层透明，背景使用打底层背景 */

                 width: 100%;

                 min-height: 100%;

        }

        .fixed-background {

                background-image: linear-gradient(-180deg, #7B6F86 0%, #4B4154 100%);   /* 渐变色背景 */

                position: fixed;

                top: 0;

                left: 0;

                bottom: 0;

                right: 0;

                z-index: -1;    /*  这一层在所有下面，用于打底  */

        }