Html

<page-view
  v-show="tabBar.active==0"
  :immersed="true"
  :header="true"
  color="#282828"
  bgColor="#FFF"
  @swipe="back"
>
  <template #left>头部左侧</template>
  <template #right>头部右侧</template>
  <template #title>标题</template>
  <template #body class="nav_body">
    中间内容
  </template>
</page-view>

JavaScript

import Back from '../../library/ui/ui-back'
import PageView from '@/components/page-view'

export default {
  components: {PageView},
  data(){
    return {
      tabBar: {active:0},
    }
  },
  methods:{

    /* 返回 */
    back(res){
      if(res=='left') return Back(this,1);
    },

  }
}

参数

• immersed: (Boolean) 是否沉浸式
• header: (Boolean) 是否隐藏头部
• color: (String) 头部文字颜色
• bgColor: (String) 头部背景颜色
• limit: (Numbar) 滑动距离触发swipe, 默认: 200

事件

• swipe: (event) 滑动方向, 返回: 'left' | 'right' | 'up' | 'down'

引入

{
  "usingComponents": {
    "page-view": "/components/page-view/index",
  },
  "navigationStyle": "custom"
}

Html

<page-view
  hidden="tabBar.active==0"
  immersed="true"
  header="true"
  color="#282828"
  bgColor="#FFF"
>
  <view slot="left">头部左侧</view>
  <view slot="right">头部右侧</view>
  <view slot="title">标题</view>
  <view slot="body" class="nav_body">
    中间内容
  </view>
</page-view>

JavaScript

import store from '../../store'
import create from '../../libray/store/create'

create(store,{
  data:{
    tabBar: {active:0},
  },
});