uni-app開發中的各類問題處理

時間 2019-11-12

標籤 uni app 開發各類問題處理简体版

原文原文鏈接

一、關於自定義導航欄中的劉海屏適配問題：css

官方提供了一個CSS變量能夠直接引用：html

var(--status-bar-height)後端

該變量自動匹配設備平臺狀態欄高度api

此變量能夠用calc() 加上其餘單位數值來使用緩存

具體參數和說明：官方使用自定義導航欄注意事項app

二、swiper中高度沒法自適應時，採用動態獲取節點賦值給外層swiper組件ui

uni.createSelectorQuery()後加.in(this)能夠防止app端出錯

<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().in(_self).select(list);
        　　　  　info.boundingClientRect(function(data) { //data - 各類參數
        　　　  　    if(data != null){
                        _self.listHeight = data.height;
                    }else{
                        setTimeout(function(){
                            _self.getEleHeight('.swiper-item');
                        },300)
                    }
        　　    }).exec()
            }
            
        }
    }

三、橫向scroll-view隨子元素寬度自適應this

關鍵在於給scroll-view的直接下一層view設置以下css:url

　　width:auto;spa

　　display: inline-block;

　　white-space: nowrap;

                <scroll-view scroll-x="true" class="scroll_box">
                    <view class="list">
                        <view class="item" v-for="(item,index) of 4" :key="index">
                           
                        </view>
                    </view>
                </scroll-view>

.scroll_box{
    width: 100%;
    height: auto;
}

.list{
    width: auto;
    height: 100upx;
    display: inline-block;
    white-space: nowrap;
}

.item{
    width:320upx;
    display: inline-block;
    height: 100%;
}

四、部分組件向上滑動超出屏幕時固定在頂部，仿餓了麼吸頂

給該組件設置css定位元素position的值爲sticky，能夠結合top和left值來調節位置。

五、關於tabbar的一些狀況

建議使用配置的tabbar，自定義的view沒有緩存機制。

原生tabbar其實不少功能，參考讀完如下知識點能實現大部分需求：

tabbar文檔API方法：https://uniapp.dcloud.io/api/ui/tabbar

tabbar官網詳解：https://uniapp.dcloud.io/collocation/pages?id=tabbar

六、保存圖片到本地

真機親測至少安卓有用

                uni.showModal({
                    title: '提示',
                    content: '肯定保存到相冊嗎',
                    success: function (res) {
                        if (res.confirm) {
                            
                            uni.downloadFile({
                                    url: _self.ewmImg,//圖片地址
                                    success: (res) =>{
                                        if (res.statusCode === 200){
                                            uni.saveImageToPhotosAlbum({
                                                filePath: res.tempFilePath,
                                                success: function() {
                                                    uni.showToast({
                                                        title: "保存成功",
                                                        icon: "none"
                                                    });
                                                },
                                                fail: function() {
                                                    uni.showToast({
                                                        title: "保存失敗",
                                                        icon: "none"
                                                    });
                                                }
                                            });
                                        } 
                                    }
                                })
                            
                            
                        } else if (res.cancel) {
                            
                        }
                    }
                });