uni-app开发中的各种问题处理

1、关于自定义导航栏中的刘海屏适配问题:

官方提供了一个CSS变量可以直接引用:

var(--status-bar-height)

该变量自动匹配设备平台状态栏高度

此变量可以用calc() 加上其他单位数值来使用

具体参数和说明:官方使用自定义导航栏注意事项

2、swiper中高度无法自适应时,采用动态获取节点赋值为外层swiper组件

<swiper :indicator-dots="true" :style="{height:listHeight+'px'}" :autoplay="false" :interval="3000" :duration="1000"></swiper>
  var _self;
    export default {
        data() {
            return {
                listHeight:215
            }
        },
        onLoad() {
            _self=this;
            _self.getEleHeight('.swiper-item');
        },
        onShow() {
            
        },
        methods: {
            getEleHeight(list){
                let info = uni.createSelectorQuery().select(list);
              info.boundingClientRect(function(data) { //data - 各种参数
                  if(data != null){
                        _self.listHeight = data.height;
                    }else{
                        setTimeout(function(){
                            _self.getEleHeight('.swiper-item');
                        },300)
                    }
              }).exec()
            }
            
        }
    }

猜你喜欢

转载自www.cnblogs.com/nanyang520/p/11758187.html