uniapp樣式問題歸納總結

1.頭部導航欄下拉彈框

 

 

 

單純的下拉彈框，我們在很多組件中都可以找到，但是放在頭部導航的位置組件不常見，期初我也借用很多組件的方式展示，均已失敗告終，索性自己動手寫了一個。

 

HTML部分

<view class="selectBox">
            <view class="select" @tap="showPicker('selector')">
                <view class="sel-text">
                    <label>{{value}}</label>
                    <u-icon name="arrow-down-fill"></u-icon>
                </view>
            </view>
            <view class="map">
                <i class="iconfont icondituzhanshi"></i>
                <!-- <label>地圖展示</label> -->
            </view>
            <view class="fanHui" @tap="navigateBack">
                <i class="iconfont iconfanhui"></i>
            </view>
            <w-picker mode="selector" default-type="value" :default-props="defaultProps" themeColor="#2152BA" @confirm="onConfirm($event,'selector')"
             @cancel="onCancel" ref="selector" :value="value" :options="array"></w-picker>
        </view>

 

 【注】引入uniapp封裝下拉彈框

 

 JS部分

<script>
    import wPicker from '@/components/w-picker/w-picker.vue';
    export default {
        components: {
            wPicker
        },
        data() {
            return {
                value: '雨花街道',
                array: [{
                    name: '雨花街道'
                }, {
                    name: '軟件大道'
                }, {
                    name: '宏運大道'
                }],
                defaultProps: {
                    label: "name",
                    value: "index",
                },
            }
        },
        methods: {
            showPicker(type) {
                this.$refs[type].show();
            },
            onConfirm(res, type) {
                this.value = res.result;
                console.log(res)
            },
            navigateBack() {
                uni.navigateBack();
            }
        }
    }
</script>

 

CSS部分

【注】工作中用的是scss預處理，會出現一些變量，將變量改成自己項目中的顏色即可，例：background: $bg-color-fff;  改為：background: #fff;即可

.selectBox{
    width: 100%;
    height: 128upx;
    background: $bg-color-fff;
    padding: 40upx 28upx 0 28upx;
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0upx;
    z-index: 9999;
}
.select{
    display: flex;
    padding: 16upx 28upx;
}
.sel-tit{
    font-size: $fonts-16;
}
.sel-text{
    height: 60upx;
    line-height: 60upx;
    padding: 0 30upx;
    border-radius: 60upx;
    background: $bg-color-2152BA;
    margin-left: 20upx;
    color: $bg-color-fff;
}
.sel-text .u-icon{
    color: $bg-color-fff;
    margin-left: 16upx;
    font-size: $fonts-12;
}

 

重點來了！！！

這種方式對安卓、H5都沒問題，但是iOS頭部劉海屏會遮擋！

如何解決安卓和iOS兼容性問題？話不多說，直接上代碼

@media only screen and (min-height: 812px){
    .selectBox{
        position: fixed;
        top: 40upx;
    }
    .xmCont{
        margin-top: 188upx;
    }
}

媒體查詢，根據高度做兼容性處理

 

min-height: 812px是由iPhoneX的高度決定的，當最小高度時812時將進入媒體查詢。
【注】媒體查詢需要放在css文件的最后，不然會被之前的css樣式覆蓋。

2.數字彈框驗證

 

 思路：盒子最外層用背景圖片，里面用數字和符號用相同大小的圖片展示

 

HTML:

<!-- 驗證框 -->
            <view class="uni-mask" v-if="showYZ"></view>
            <view class="yzView" v-if="showYZ">
                <view class="tips">請在下面輸入算式的答案</view>
                <view class="numView">
                    <view class="num">
                        <image src="../static/img/icon/num-icon6.png"></image>
                        <image src="../static/img/icon/num-icon10.png"></image>
                        <image src="../static/img/icon/num-icon2.png"></image>
                        <image src="../static/img/icon/num-icon10.png"></image>
                        <image src="../static/img/icon/num-icon3.png"></image>
                        <image src="../static/img/icon/num-icon11.png"></image>
                    </view>
                    <view class="inputView">
                        <input type="text" value="" v-model="calResult"/>
                    </view>
                </view>
                <view class="confirmView">
                    <view class="cancel" @tap='hideYzView()'>取消</view>
                    <view class="confirm" @tap='GetCode()'>確認</view>
                </view>
            </view>
            <!-- 驗證框 end -->

 

CSS:

/* 驗證框 */
.yzView{
    width: 80%;
    height: 400upx;
    background-color: #fff;
    z-index: 1000;
    border-radius: 20upx;
    position: absolute;
    top: 360upx;
    left: 50%;
    margin-left: -40%;
}
.tips{
    padding-top: 40upx;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}
.confirmView{
    width: 100%;
    display: flex;
    border-top: 1px solid #EBEBEB;
    position: absolute;
    bottom: 0;
}
.confirmView view{
    width: 50%;
    text-align: center;
    height: 100upx;
    line-height: 100upx;
    font-size: 17px;
}
.cancel{
    color: #666;
}
.confirm{
    color: #fa8b15;
}
.confirm{
    border-left: 1px solid #EBEBEB;
}
.numView{
    display: flex;
    justify-content: center;
    padding: 70upx 0;
}
.num{
    width: 188upx;
    height: 64upx;
    line-height: 64upx;
    display: flex;
    align-items: center;
    background: url(~@/static/img/icon/numBg.png) no-repeat center center;
    background-size: 188upx 64upx;
}
.num image {
    width: 40upx;
    height: 40upx;
    vertical-align: middle;
}
.inputView{
    width: 154upx;
    height: 64upx;
    margin-left: 18upx;
    border: 1px solid #EBEBEB;
}
/* 驗證框 end */