亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

• 兩個前提：

  • 在pages.json中取消原生導(dǎo)航
    

  • 在manifest.json文件中配置定位服務(wù)
    

• 代碼

<template>
    <view class="container">
        <view class="top" :style="{height:statusBarHeight+'px',width:windowWidth+'px'}"></view>
        <view class="box-bg" :style="{height:navbarHeight+'px'}" @click="getLocation">
            <image src="/static/dingwei.png"></image>
            <text style="color: white;">{{locationName}}</text>
            <span style="color: white;" class="iconfont icon-xiala"></span>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                // 設(shè)置狀態(tài)欄默認(rèn)值高度為20
                statusBarHeight: 20,
                // 設(shè)置導(dǎo)航欄的默認(rèn)值為45
                navbarHeight: 45,
                // 設(shè)置手機(jī)寬度默認(rèn)值為375
                windowWidth: 375,
                // topHeigth:0,
                locationName: '請選擇'
            }
        },
        methods: {
            getLocation() {
                // console.log("點(diǎn)擊事件");
                uni.chooseLocation({
                    // 成功的回調(diào)函數(shù)
                    success: (res) => {
                        console.log(res);
                        // 地理位置字符串大于10時截取前面的字符串即可
                        res.name.length > 10 ? this.locationName = res.name.substring(0, 9) + '...' : this
                            .locationName = res.name
                    },
                    // 失敗回調(diào)函數(shù)
                    fail: (res) => {
                        console.log(res);
                    }
                })
            }
        },
        created() {
            // 同步獲取系統(tǒng)（手機(jī)）信息
            const info = uni.getSystemInfoSync();
            // 動態(tài)設(shè)置狀態(tài)欄的高度
            this.statusBarHeight = info.statusBarHeight;
            // 動態(tài)設(shè)置手機(jī)寬度
            this.windowWidth = info.windowWidth;
            // 獲取膠囊的位置
            const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
            // console.log(info);
            // 動態(tài)設(shè)置導(dǎo)航欄的位置
            this.navbarHeight = (menuButtonInfo.bottom - this.statusBarHeight) + (menuButtonInfo.top - this
                .statusBarHeight);
        }
    }
</script>
<style lang="scss">
    .top {
        background: linear-gradient(100deg, #00d5ff, #00aaff);
    }
    .box-bg {
        background: linear-gradient(100deg, #00d5ff, #00aaff);
        padding: 5px 10rpx;
        display: flex;
        gap: 10rpx;
        place-items: center;
        image {
            width: 50rpx;
            height: 50rpx;
            background-color: antiquewhite;
            border-radius: 510rpx;
        }
    }
</style>

• 效果