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