快捷導(dǎo)航

淺析vue如何實(shí)現(xiàn)手機(jī)橫屏功能

更新時(shí)間：2024年03月15日 08:47:00 作者：代碼搬運(yùn)媛

在項(xiàng)目開(kāi)發(fā)中有時(shí)候需求需要手動(dòng)實(shí)現(xiàn)橫屏功能,所以這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)手機(jī)橫屏功能,需要的小伙伴可以參考一下

功能背景

有些需求需要手動(dòng)實(shí)現(xiàn)橫屏功能，比如點(diǎn)擊一個(gè)橫屏的圖標(biāo)將整個(gè)頁(yè)面90度翻轉(zhuǎn)，再點(diǎn)擊退出橫屏回到正常頁(yè)面。

實(shí)現(xiàn)思路

一拿到這個(gè)需求很可能就被嚇到了，但簡(jiǎn)單來(lái)說(shuō)，就是點(diǎn)擊橫屏按鈕跳轉(zhuǎn)一個(gè)新頁(yè)面，通過(guò) css樣式的翻轉(zhuǎn)樣式來(lái)實(shí)現(xiàn)，主要是計(jì)算橫屏的寬高比較麻煩，下面來(lái)看具體的代碼實(shí)現(xiàn)。

關(guān)鍵代碼

<view class="box">
    <view class="jxcLandscape" :style="{width:newHeight+'px',height:newWidth+'px'}">
        <view class="title_H">
            <view @click="handleBack" class="image_H">
                <img style="width:40rpx;height: 40rpx;margin-right: 8rpx;" src="@/static/screen.png" />
                退出橫屏
            </view>
        </view>
        
        <!--主要內(nèi)容區(qū)-->
    </view>
</view>

css 樣式：

.box{
        position: relative;
        width: 100%;
        height: 100vh;
        overscroll-behavior: none;
    }
    .jxcLandscape{
        padding: 10px;
        transform: rotate(90deg); // 關(guān)鍵代碼
        transform-origin: 0% 0%; // 關(guān)鍵代碼
        position: absolute;
        top: 0%;
        left: 100%;
        margin-left: 0;
            
    }

js 方法：

onLoad(){
    let that=this
    uni.getSystemInfo({
        success: function (res) {
            that.newWidth=res.windowWidth
            that.tablenewWidth=res.windowWidth-50
            if(res.platform=='android'){
                this.getStatusBarHeight((height) => {
                    that.barHeight = height
                    that.newHeight=res.windowHeight-that.barHeight
                })
            }else{
                // 這是蘋果操作系統(tǒng)
                that.newHeight=res.windowHeight
            }
        }
    })
},
methods:{
    getStatusBarHeight(){
        let barHeight = 51
        if (uni.getSystemInfoSync().platform == "ios") {
            // ios {}可傳參 
            this.callhandler('getStatusBarHeight', "", callBack);
        }
        if (uni.getSystemInfoSync().platform == "android") {
            // Android
            if (window.webkit) {
                barHeight = window.webkit.getStatusBarHeight()
                callBack(barHeight)
            }
        }
    },
    callhandler(name, data, callback) {
        setupWebViewJavascriptBridge(function(bridge) {
            bridge.callHandler(name, data, callback)
        })
    },
    setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
            return callback(window.WebViewJavascriptBridge)
        }
        if (window.WVJBCallbacks) {
            return window.WVJBCallbacks.push(callback)
        }
        window.WVJBCallbacks = [callback]
        let WVJBIframe = document.createElement('iframe')
        WVJBIframe.style.display = 'none'
        WVJBIframe.src = 'https://__bridge_loaded__'
        document.documentElement.appendChild(WVJBIframe)
        setTimeout(() => {
            document.documentElement.removeChild(WVJBIframe)
        }, 0)
    }
}

到此這篇關(guān)于淺析vue如何實(shí)現(xiàn)手機(jī)橫屏功能的文章就介紹到這了,更多相關(guān)vue手機(jī)橫屏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: