实现页面间的左右切换

要求

在一个页面上左右滑动切换不同的内容

思路

1：将每个页面制作为一个对应的组件
2：通过轮播图组件显示这些组件

// 你要做切换的vue文件中
// 使用轮播图组件
<swiper>
            <swiper-item>
                <aaaa :aaa='aaaa'></aaaa> // 页面1
            </swiper-item>
            <swiper-item>
                <bbbb></bbbb> // // 页面2
            </swiper-item>
        </swiper>

问题

swiper 组件的高度不会被内容撑开,而且不能给一个固定的高度,因为不同的设备高度是不同的
所以怎样才能完整的显示页面的内容?

1:动态获取设备的可使用窗口的高度

// 在App.vue中 
<script>
  // 省略其他 
  // 在生命周期 onLaunch 初始化显目时获取设备的可使用高度转为2倍(使用rpx嘚) 并存储到vuex中
  onLaunch: function() {
            console.log('App Launch')
            uni.getSystemInfo({
                success:  (res)=> {
                    this.$u.vuex('heights',res.windowHeight*2)
                }
            })
        },
</script>

2:为swiper 设置高度

// swiper 的高度 = 设备的可使用高度 - 页面内其他组件的高度
// 建议除swiper以外其他组件使用固定高度 即其他组件是固定不动的
<div class="bock" ref="bock" @click="hoInfo">123</div>  // 高度为100rpx
<swiper :style="{height:(heights-100)+'px'}">
// 省略其他....

在这里设置完成后,你的页面还不能上下滚动,是静止的

3: 为组件添加 scroll-view 组件

// 在组件中
<template>
    <view class="box1">
    // 在内容的外层包裹 scroll-view 组件 并且设置高度与swiper相同
    // 如果高度不相同则有可能出现两个滚动条
        <scroll-view scroll-y=true :style="{height:(heights-100)+'px'}">
            {{aaa.a}}
            <view v-for="it in 60" :key='it'>
                {{it}} +++++++
            </view>
        </scroll-view>
    </view>
</template>

注意:上述在组件中拿到的高度都是在vuex中拿到的,这里是对vuex进行了配置使其可以在页面中直接拿到对应的值
vuex的配置

封装为组件

<!-- 页面左右切换 -->
<template>
    <view>
        <swiper :style="{height:(heights-fixedHeight)+'px'}">
            <swiper-item v-for="(item,i) in showPage" :key="i">
        <!-- 只支持 H5 和 App -->
                 <component :is="item" ></component>
            </swiper-item>
        </swiper>
    </view>
</template>
<script>
    export default {
        name:"page-switching",
        data() {
            return {
            };
        },
        props:{
            // 传入高度差
            fixedHeight:{
                type:Number,
                default:0
            },
            // 传入页面
            showPage:{
                type:Array,
                required:true
            }
    }
</script>
<style>
</style>

使用组件

<page-switching :fixedHeight='100' :showPage='showPage'></page-switching>
// 省略其他
// 引入你要显示的页面
import aaaa from '@/components/aaaa/aaaa.vue'
import bbbb from '@/components/bbbb/bbbb.vue'
data() {
        return {
            // 页面定义为数组 通过自定义属性传递出去
            showPage:[aaaa,bbbb]
        }
    },