点击上端导航栏将会展示对应的组件,移动端也可以使用,完整代码在最下方
动态展示如下
小程序展示
原理:
只有两个组件的话可以使用v-if,v-else/v-show;
多个组件切换使用的是<component :is="componentnext">,通过在data里定义一个componted,修改componentnext值来切换组件。
步骤:
1.在component创建组件并在对应的页面完成导入,代码展示如下
2.使用uni-app中组件的is属性<component :is="componentnext"></component>用于切换组件,改变componentnext的组件名字即可