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

问题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;    /*  这一层在所有下面,用于打底  */

        }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容