uniapp通过点击按钮跳转新页面横屏展示

要实现 uniapp 中点击按钮跳转新页面并且横屏展示，可以按照以下步骤进行：

1. 在 app.vue 文件中设置横屏展示：

<style>
    .landscape {
        transform: rotate(90deg);
        transform-origin: 50% 50%;
        width: 100vw;
        height: 100vh;
    }
</style>

<template>
    <div :class="$route.meta.landscape ? 'landscape' : ''">
        <router-view />
    </div>
</template>

2. 在路由配置文件中设置需要横屏展示的页面：

const routes = [
    {
        path: '/example',
        name: 'example',
        component: () => import('@/pages/example.vue'),
        meta: {
            landscape: true
        }
    },
    // 其他路由配置
]

3. 在需要跳转的按钮中添加点击事件，并在事件处理函数中进行跳转：

<template>
    <button @click="jumpToExample">跳转到 example 页面</button>
</template>

<script>
    export default {
        methods: {
            jumpToExample() {
                this.$router.push({
                    name: 'example'
                })
            }
        }
    }
</script>

这样设置后，点击按钮就可以跳转到 example 页面，并且页面会横屏展示。