问题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; /* 这一层在所有下面，用于打底 */
}
网友评论