应用vue3和vant组件开发前端页面框架
生成效果
代码
<template> <view class="page"> <van-nav-bar title="页面标题" left-arrow fixed @click-left="onClickLeft" /> <van-tabbar v-model="active"> <van-tabbar-item icon="home-o">首页</van-tabbar-item> <van-tabbar-item icon="friends-o">圈子</van-tabbar-item> <van-tabbar-item icon="user-o">我的</van-tabbar-item> </van-tabbar> </view> </template> <script> import { ref } from 'vue'; export default { setup() { const active = ref(1); return { active }; }, }; </script> <style scoped> .page { width: 100%; min-height: 100vh; background-color: #ffffff; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 0; box-sizing: border-box; } </style>