解决ios设备小程序视频全屏显示不全的问题

1、问题

这里我的代码逻辑是上边是固定在首页顶部的菜单，左右滑动来切换下边的swiper，这个视频是swiper-item里的一个组件，放大时候显示不全。

2、 解决

因为视频全屏时候其他组件就没必要显示了，直接隐藏上边navigator和菜单栏，就不会被遮挡了。状态共享，用了vuex。

store.js

export default new Vuex.Store({
  state: {
    fullScreen: false,
  },
  mutations: {
    //监控全屏：
    full(state) {
      state.fullScreen = !state.fullScreen
    }
  },
  actions: {
    changeFull({
      commit
    }) {
      commit('full')
    }
  },
  getters: {}
});

首页index.vue，

就是上边菜单栏在的页面，用fullScreen来控制显隐

  computed: {
      ...mapState(['fullScreen']), //是否全屏
    },

视频组件

添加组件全屏事件，更改store里的状态，同时首页也隐藏了。因为这个vedio 进入全屏和退出全屏是一个事件，所以退出去时候，状态又变成false了，首页也能显示了。

//全屏变化
      fullscreenchange(e) {
        console.log("全屏");
        this.$store.dispatch('changeFull')
      },