package.json
{
"dependencies": {

"@vant/weapp": "^1.11.7"

}
}

app.wxss
/ 引入Vant全部樣式 /
@import './miniprogram_npm/@vant/weapp/common/index.wxss';

app.json
{
"pages": [

"pages/index/index",
"pages/user/index"

],
"window": {

"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "雲開發 QuickStart",
"navigationBarTextStyle": "black"

},
"tabBar": {

"custom": true,
"color": "#7A7E83",
"selectedColor": "#4A90E2",
"backgroundColor": "#F9F5EB",
"list": [{
  "pagePath": "pages/index/index",
  "text": "首頁"
}, {
  "pagePath": "pages/user/index",
  "text": "我的"
}]

},
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}

index.js

onShow() {

if (typeof this.getTabBar === 'function' && this.getTabBar()) {
  this.getTabBar().setData({
    selected: 0,
    active: 0
  });
}

},

index.json
{
"navigationBarTitleText": "待辦",
"usingComponents": {

"cloud-tip-modal": "/components/cloudTipModal/index",
"van-button": "@vant/weapp/button/index",
"van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell-group/index"

}
}
index.wxml
<!--index.wxml-->
<view class="container">
<view class="title">

<textarea class="input" placeholder="請輸入要添加的待辦" />
<van-button type="info">添加待辦</van-button>

</view>
<van-cell-group

inset
wx:key="title"
wx:for="{{powerList}}"
wx:for-item="power"
custom-class="cell-group"

<van-cell
  title="名稱"
  value="{{power.title}}"
  custom-class="my-custom-class" 
  title-class="my-title-class"
  label-class="my-label-class"
  value-class="my-value-class"
/>
<van-cell title="描述" value="" label="{{power.desc}}" />

</van-cell-group>
<cloud-tip-modal showTipProps="{{showTip}}" title="{{title}}" content="{{content}}" />
</view>

index.wxss
/index.wxss/

page {
padding-top: 54rpx;
background-color: #f6f6f6;
padding-bottom: 60rpx;
}

.container {
font-family: PingFang SC;
background: #f5f5f5;
}

.title {
font-family: PingFang SC;
font-weight: 500;
color: #000000;
font-size: 44rpx;
margin-bottom: 40rpx;
}
.title .input{
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
font-size: 12px;
font-weight: 100;
margin-bottom: 20px;
background: #fff;
}
van-cell-group{
width: 100%;
margin-bottom: 10px;
}
.my-value-class{
color: #333!important;
font-weight: 400
}

index1.json
{
"navigationBarTitleText": "個人信息",
"usingComponents": {

"cloud-tip-modal": "/components/cloudTipModal/index",
"van-image": "@vant/weapp/image/index",
"van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell-group/index",
"van-switch": "@vant/weapp/switch/index"

}
}

index1.wxml
<!--index.wxml-->
<view class="container">
<view class="head">

<van-image
  src="/images/top-bgi.png"
  width="10rem"
  height="2rem"
  custom-class="top-bgi-class"
/>
<van-image
  width="10rem"
  height="10rem"
  fit="contain"
  custom-class="user-head-class"
  image-class="head-class"
  src="{{ user.head }}"
/>
<view class="user-info-class">
  <text class="nickname">{{ user.nickname }}</text>
</view>

</view>
<van-cell-group custom-class="config-list-class">

<van-cell
  icon="send-gift"
  title="單元格"
  value="內容"
  label="描述信息"
  custom-class="config-item-class"
  border="{{ false }}"
>
  <van-switch checked="{{ checked }}" bind:change="onChange" />
</van-cell>

</van-cell-group>
<cloud-tip-modal showTipProps="{{showTip}}" title="{{title}}" content="{{content}}" />
</view>

index.wxss
/index.wxss/

page {
padding-top: 54rpx;
background-color: #f6f6f6;
padding-bottom: 60rpx;
}

.container {
font-family: PingFang SC;
}

.head{
width: 100%;
height: 130px;
padding: 20px;
box-sizing: border-box;
background: linear-gradient(rgb(0 122 234), rgb(60 221 209));
position: relative;
text-align: center;
}

.head-class{
border-radius: 50%;
border: 2px solid #ccc;
}

van-image:first-child{
position: absolute;
left: 0;
bottom: 0;
}

.user-head-class {
width: 70px!important;
height: 70px!important;
margin: 0 auto;
}

.user-info-class{
width: 100%;
}

.nickname{
display: block;
font-size: 18px;
line-height: 40px;
color: #fff;
}

.certify{
font-size: 12px;
width: 60px;
height: 20px;
line-height: 20px;
display: inline-block;
text-align: center;
border-radius: 10px;
}

.certified{
color: #f5c849;
background-color: #f5c849;
}

.noCertify{
color: #c72727;
background-color: #f5c849;
}

van-cell-group{
width: 100%;
/ margin-bottom: 10px; /
}

.config-list-class{
width: 94%;
margin: 0 auto;
}

custom-tab-bar
index.js
/*

• @Author: wangjingling
• @LastEditTime: 2025-11-27 14:52:16
  */

Page({
data: {

active: 0,
list: [{
  pagePath: "/pages/index/index",
  icon: 'wap-home',
  text: "首頁"
}, {
  pagePath: "/pages/user/index",
  icon: 'contact',
  text: "我的"
}]

},
onChange(event) {

const index = event.detail;
// event.detail 的值為當前選中項的索引
// this.setData({ active: index });
// 使用 switchTab API 進行頁面跳轉
wx.switchTab({
  url: this.data.list[index].pagePath
});

},
});
index.json
{
"navigationBarTitleText": "個人信息",
"usingComponents": {

"van-tabbar": "@vant/weapp/tabbar/index",
"van-tabbar-item": "@vant/weapp/tabbar-item/index",
"van-icon": "@vant/weapp/icon/index"

}
}
index.wxml
<!--index.wxml-->
<view class="custom-tab-bar" id="{{ active }}">
<van-tabbar active="{{ active }}" bind:change="onChange">

<van-tabbar-item wx:for="{{ list }}" wx:key="index">
  <van-icon name="{{ item.icon }}" />
  <text class="name">{{ item.text }}</text>
</van-tabbar-item>

</van-tabbar>
</view>

index.wxss
/index.wxss/

page {
padding-top: 54rpx;
background-color: #f6f6f6;
padding-bottom: 60rpx;
}

.custom-tab-bar {
font-family: PingFang SC;
}

.custom-tab-bar van-tabbar {
display: flex;
}

.custom-tab-bar van-tabbar-item{
flex: 1;
height: 60px;
}

.custom-tab-bar van-icon{
width: 100%;
font-size: 20px;
text-align: center;
}

.custom-tab-bar .name{
display: inline-block;
width: 100%;
text-align: center;
line-height: 20px;
}