微信小程序踩坑之scroll-view

问题

scroll-view分页与页面底部fixed同时使用,部分真机上不显示底部fixed里的内容

原因

  • 正常情况:
       iOS 下加了 **-webkit-overflow-scrolling: touch**,会控制页面产生回弹效果,使得滑动更流畅,体验感佳。当给元素设置**fixed**后,滑动几次后可滚动区域会卡主,不能在滑动,这时给元素增加个**z-index**值就可以了。
    
  • 当使用scroll-view时:
      scroll-view会将**fixed**属性默认转为absolute。其根本原因是**css3**的特性:**position:fixed** 会被**transform**的副作用降级为**absolute**。所以会导致**fixed**中内容被覆盖。
    

解决

1.保留fixed内容,用页面滚动刷新onPullDownRefresh。
2.将fixed元素放到scroll-view并级,使用absolute定位到底部。(在这里我使用的第二种方法,代码贴在下了)


	
	

.list_wrap{
    position: relative;
    overflow: hidden !important;
    box-sizing: border-box;
}
.fixed {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    box-shadow: 0px 2px 2px 1px #edf1f4;
    padding: 30rpx 30rpx 40rpx 30rpx;
    background: #fff;
}

大家自行参考,如有异议,欢迎大家指正,谢谢~

你可能感兴趣的:(微信小程序,小程序)