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

更新時間：2024年03月15日 08:47:00 作者：代碼搬運媛

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

功能背景

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

實現(xiàn)思路

一拿到這個需求很可能就被嚇到了，但簡單來說，就是點擊橫屏按鈕跳轉(zhuǎn)一個新頁面，通過 css樣式的翻轉(zhuǎn)樣式來實現(xiàn)，主要是計算橫屏的寬高比較麻煩，下面來看具體的代碼實現(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如何實現(xiàn)手機橫屏功能的文章就介紹到這了,更多相關(guān)vue手機橫屏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: