Uniapp学习之部分细节问题

1.banner大图下方的空白

在图片image外包裹一层view,同时类名与image相同

修改前修改后

2.设置滚动条隐藏,出现ios不生效的问题

设置隐藏滚动条,第一种方法是全局设置"scrollIndicator": "none",但这种情况下安卓系统下真机调试是隐藏的,IOS系统,所以需要使用第二种方法

在app.vue或者你的common.css里加上

::-webkit-scrollbar {  
    display: none;  
    width: 0 !important;  
    height: 0 !important;  
    -webkit-appearance: none;  
    background: transparent;  
}

指路官网论坛答主隐藏 scroll-view 组件的滚动条 - DCloud问答

3.在swiper主体区域放置各项组建后,仅显示头部一部分

原因: swiper-item有默认的高度,需要设置容纳主体内容的高度,这里因为uniapp兼容性问题,如果直接计算可视区域的高,设置swiper的height,在IOS系统中有bug

解决方法:通过uni.createSelectorQuery()获取节点信息,即可在swiper-item主体组件们外套一个view,获取其高度值,再设置swiper的height

 注意: 使用uni.createSelectorQuery()需要在生命周期mounted后进行调用uni.createSelectorQuery() | uni-app官网

bug提醒:如果组件内容需要动态渲染,则该方法失效

解决方法:用uni.getSystemInfo获取视口高度,多余内容通过上拉加载显示系统信息的概念 | uni-app官网

4.导航条部分topBar无法点击

如:当前topBar在女装内衣,无法点击右侧的国际名品

 解决方法: 设置scroll-into-view,使导航条当前选择的topBar一直在最前面

 注意: scroll-into-view的值是子元素的id,id不能是以数字开头

scroll-view | uni-app官网