diff --git a/example/app.json b/example/app.json
index f005f5530..265f38b2d 100644
--- a/example/app.json
+++ b/example/app.json
@@ -76,8 +76,6 @@
     "t-button-group": "tdesign-miniprogram/button-group/button-group",
     "t-icon": "tdesign-miniprogram/icon/icon",
     "t-rate": "tdesign-miniprogram/rate/rate",
-    "t-picker": "tdesign-miniprogram/picker/picker",
-    "t-picker-item": "tdesign-miniprogram/picker/picker-item",
     "t-progress": "tdesign-miniprogram/progress/progress",
     "t-input": "tdesign-miniprogram/input/input",
     "t-textarea": "tdesign-miniprogram/textarea/textarea",
diff --git a/src/picker/README.md b/src/picker/README.md
index a1ce1cf4b..e881dd0ea 100644
--- a/src/picker/README.md
+++ b/src/picker/README.md
@@ -20,44 +20,7 @@ isComponent: true
 
 ### 基础选择器
 
-<img src="https://tdesign.gtimg.com/miniprogram/readme/picker.png" width="375px" height="50%">
-
-```html
-<t-picker
-  visible="{{true}}"
-  title="请选择城市"
-  value="{{selectedCityValue}}"
-  bindchange="onPickerConfirm"
-  bindpick="onColumnChange"
-  bindcancel="onPickerCancel"
->
-  <t-picker-item options="{{citys}}"  />
-</t-picker>
-```
-
-```js
-Page({
-  data: {
-    selectedCityValue: [],
-    citys: [
-      { label: '广州市', value: '广州市' },
-      { label: '韶关市', value: '韶关市' },
-      { label: '深圳市', value: '深圳市' },
-      { label: '珠海市', value: '珠海市' },
-      { label: '汕头市', value: '汕头市' },
-    ],
-  },
-  onPickerConfirm(e) {
-    console.log('picker confirm:', e.detail);
-    this.setData({
-      selectedCityValue:  e.detail.value,
-    });
-  },
-  onColumnChange(e) {
-    console.log('picker pick:', e);
-  },
-});
-```
+{{ base }}
 
 ## API
 ### Picker Props
diff --git a/src/picker/_example/base/index.js b/src/picker/_example/base/index.js
new file mode 100644
index 000000000..0081b4d77
--- /dev/null
+++ b/src/picker/_example/base/index.js
@@ -0,0 +1,80 @@
+const PICKER_KEY = {
+  CITY: 'city',
+  YEAR_SEASONS: 'yearSeasons',
+  DATE: 'date',
+};
+
+Component({
+  data: {
+    PICKER_KEY,
+
+    [`${PICKER_KEY.CITY}Visible`]: false,
+    [`${PICKER_KEY.YEAR_SEASONS}Visible`]: false,
+    [`${PICKER_KEY.DATE}Visible`]: false,
+
+    pickerTitle: '',
+    citys: [
+      { label: '北京', value: '北京' },
+      { label: '上海', value: '上海' },
+      { label: '广州', value: '广州' },
+      { label: '深圳', value: '深圳' },
+      { label: '成都', value: '成都' },
+    ],
+    years: [
+      { label: '2021年', value: '2021' },
+      { label: '2020年', value: '2020' },
+      { label: '2019年', value: '2019' },
+    ],
+    months: Array.from(new Array(12), (_, index) => ({
+      label: `${index + 1}月`,
+      value: index + 1,
+    })),
+    days: Array.from(new Array(31), (_, index) => ({ label: `${index + 1}日`, value: index + 1 })),
+    seasons: [
+      { label: '春', value: '春' },
+      { label: '夏', value: '夏' },
+      { label: '秋', value: '秋' },
+      { label: '冬', value: '冬' },
+    ],
+
+    [`${PICKER_KEY.CITY}Value`]: [],
+    [`${PICKER_KEY.YEAR_SEASONS}Value`]: [],
+    [`${PICKER_KEY.DATE}Value`]: [],
+  },
+
+  methods: {
+    joinArray(array) {
+      return array.join('-');
+    },
+
+    onClickPicker(e) {
+      const { key } = e?.currentTarget?.dataset;
+
+      this.setData({
+        [`${key}Visible`]: true,
+      });
+    },
+
+    onColumnChange(e) {
+      console.log('picker pick:', e);
+    },
+
+    onPickerChange(e) {
+      const { key } = e?.currentTarget?.dataset;
+      console.log('picker change:', e.detail);
+      this.setData({
+        [`${key}Visible`]: false,
+        [`${key}Value`]: e.detail.value,
+        [`${key}CurrentValue`]: this.joinArray(e.detail.value),
+      });
+    },
+    onPickerCancel(e) {
+      const { key } = e?.currentTarget?.dataset;
+      console.log(e, '取消');
+      console.log('picker1 cancel:');
+      this.setData({
+        [`${key}Visible`]: false,
+      });
+    },
+  },
+});
diff --git a/src/picker/_example/base/index.json b/src/picker/_example/base/index.json
new file mode 100644
index 000000000..2798fd54a
--- /dev/null
+++ b/src/picker/_example/base/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-picker": "tdesign-miniprogram/picker/picker",
+    "t-picker-item": "tdesign-miniprogram/picker/picker-item"
+  }
+}
diff --git a/src/picker/_example/base/index.wxml b/src/picker/_example/base/index.wxml
new file mode 100644
index 000000000..81f358427
--- /dev/null
+++ b/src/picker/_example/base/index.wxml
@@ -0,0 +1,67 @@
+<block>
+  <view class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.CITY}}">
+    <view class="pannel-label">城市</view>
+    <view class="pannel-text {{cityValue.length ? '' : 'empty'}}">{{cityCurrentValue || '选择城市'}}</view>
+    <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
+  </view>
+  <view class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.YEAR_SEASONS}}">
+    <view class="pannel-label">年份和季节</view>
+    <view class="pannel-text {{yearSeasonsValue.length ? '' : 'empty'}}">
+      {{yearSeasonsCurrentValue || '选择年份和季节' }}</view
+    >
+    <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
+  </view>
+  <view class="pannel-item last" bind:tap="onClickPicker" data-key="{{PICKER_KEY.DATE}}">
+    <view class="pannel-label">日期</view>
+    <view class="pannel-text {{dateValue.length ? '' : 'empty'}}"> {{dateCurrentValue || '选择日期' }}</view>
+    <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
+  </view>
+</block>
+
+<!-- 城市不带标题 -->
+<t-picker
+  visible="{{cityVisible}}"
+  value="{{cityValue}}"
+  data-key="city"
+  title="{{pickerTitle}}"
+  cancelBtn="取消"
+  confirmBtn="确认"
+  bindchange="onPickerChange"
+  bindpick="onColumnChange"
+  bindcancel="onPickerCancel"
+>
+  <t-picker-item options="{{citys}}"></t-picker-item>
+</t-picker>
+
+<!-- 年+ 季节 不带标题 -->
+<t-picker
+  visible="{{yearSeasonsVisible}}"
+  value="{{yearSeasonsValue}}"
+  data-key="yearSeasons"
+  title="{{pickerTitle}}"
+  cancelBtn="取消"
+  confirmBtn="确认"
+  bindchange="onPickerChange"
+  bindpick="onColumnChange"
+  bindcancel="onPickerCancel"
+>
+  <t-picker-item options="{{years}}"></t-picker-item>
+  <t-picker-item options="{{seasons}}"></t-picker-item>
+</t-picker>
+
+<!-- 年月日 不带标题 -->
+<t-picker
+  visible="{{dateVisible}}"
+  value="{{dateValue}}"
+  data-key="date"
+  title="{{pickerTitle}}"
+  cancelBtn="取消"
+  confirmBtn="确认"
+  bindchange="onPickerChange"
+  bindpick="onColumnChange"
+  bindcancel="onPickerCancel"
+>
+  <t-picker-item options="{{years}}"></t-picker-item>
+  <t-picker-item options="{{months}}"></t-picker-item>
+  <t-picker-item options="{{days}}"></t-picker-item>
+</t-picker>
diff --git a/src/picker/_example/base/index.wxss b/src/picker/_example/base/index.wxss
new file mode 100644
index 000000000..4ce6c4b03
--- /dev/null
+++ b/src/picker/_example/base/index.wxss
@@ -0,0 +1,26 @@
+.pannel-item {
+  display: flex;
+  align-items: center;
+  height: 96rpx;
+  padding: 0 32rpx;
+  font-size: 32rpx;
+  margin-bottom: 32rpx;
+  background-color: #fff;
+}
+
+.pannel-item .last {
+  margin-bottom: -13rpx;
+}
+.pannel-label {
+  width: 160rpx;
+  margin-right: 32rpx;
+}
+
+.pannel-text {
+  flex: 1;
+  color: #000;
+  opacity: 0.9;
+}
+.pannel-text.empty {
+  opacity: 0.26;
+}
diff --git a/src/picker/_example/picker.json b/src/picker/_example/picker.json
index f294ad3be..85547c2b0 100644
--- a/src/picker/_example/picker.json
+++ b/src/picker/_example/picker.json
@@ -1,6 +1,9 @@
 {
   "navigationBarTitleText": "Picker 选择器",
   "usingComponents": {
-    "t-demo": "../../components/demo-block/index"
+    "t-demo": "../../components/demo-block/index",
+    "t-picker": "tdesign-miniprogram/picker/picker",
+    "t-picker-item": "tdesign-miniprogram/picker/picker-item",
+    "base": "./base"
   }
 }
diff --git a/src/picker/_example/picker.ts b/src/picker/_example/picker.ts
index 664ed7683..456e2bd0e 100644
--- a/src/picker/_example/picker.ts
+++ b/src/picker/_example/picker.ts
@@ -1,7 +1,4 @@
 const PICKER_KEY = {
-  CITY: 'city',
-  YEAR_SEASONS: 'yearSeasons',
-  DATE: 'date',
   CITY_TITLE: 'cityTitle',
   YEAR_SEASONS_TITLE: 'yearSeasonsTitle',
   DATE_TITLE: 'dateTitle',
@@ -10,15 +7,10 @@ const PICKER_KEY = {
 Page({
   data: {
     PICKER_KEY,
-
-    [`${PICKER_KEY.CITY}Visible`]: false,
-    [`${PICKER_KEY.YEAR_SEASONS}Visible`]: false,
-    [`${PICKER_KEY.DATE}Visible`]: false,
     [`${PICKER_KEY.CITY_TITLE}Visible`]: false,
     [`${PICKER_KEY.YEAR_SEASONS_TITLE}Visible`]: false,
     [`${PICKER_KEY.DATE_TITLE}Visible`]: false,
 
-    pickerTitle: '',
     citys: [
       { label: '北京', value: '北京' },
       { label: '上海', value: '上海' },
@@ -42,33 +34,31 @@ Page({
       { label: '秋', value: '秋' },
       { label: '冬', value: '冬' },
     ],
-
-    [`${PICKER_KEY.CITY}Value`]: [],
-    [`${PICKER_KEY.YEAR_SEASONS}Value`]: [],
-    [`${PICKER_KEY.DATE}Value`]: [],
     [`${PICKER_KEY.CITY_TITLE}Value`]: [],
     [`${PICKER_KEY.YEAR_SEASONS_TITLE}Value`]: [],
     [`${PICKER_KEY.DATE_TITLE}Value`]: [],
   },
 
+  joinArray(array) {
+    return array.join('-');
+  },
+
   onClickPicker(e) {
     const { key } = e?.currentTarget?.dataset;
-
     this.setData({
       [`${key}Visible`]: true,
     });
   },
-
   onColumnChange(e) {
     console.log('picker pick:', e);
   },
-
   onPickerChange(e) {
     const { key } = e?.currentTarget?.dataset;
     console.log('picker change:', e.detail);
     this.setData({
       [`${key}Visible`]: false,
       [`${key}Value`]: e.detail.value,
+      [`${key}CurrentValue`]: this.joinArray(e.detail.value),
     });
   },
   onPickerCancel(e) {
diff --git a/src/picker/_example/picker.wxml b/src/picker/_example/picker.wxml
index 16308c3b6..6994b3e30 100644
--- a/src/picker/_example/picker.wxml
+++ b/src/picker/_example/picker.wxml
@@ -1,33 +1,14 @@
-<wxs module="util">
-  var joinArray = function (array) { return array.join('-') } ;module.exports = { joinArray: joinArray }
-</wxs>
 <view class="area-picker-demo">
   <view class="demo-title">Picker 选择器</view>
   <view class="demo-desc">用于一组预设数据中的选择。</view>
   <t-demo title="01 类型" desc="基础选择器">
-    <view class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.CITY}}">
-      <view class="pannel-label">城市</view>
-      <view class="pannel-text {{cityValue.length ? '' : 'empty'}}">{{util.joinArray(cityValue) || '选择城市'}}</view>
-      <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
-    </view>
-    <view class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.YEAR_SEASONS}}">
-      <view class="pannel-label">年份和季节</view>
-      <view class="pannel-text {{yearSeasonsValue.length ? '' : 'empty'}}">
-        {{util.joinArray(yearSeasonsValue) || '选择年份和季节' }}</view
-      >
-      <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
-    </view>
-    <view class="pannel-item last" bind:tap="onClickPicker" data-key="{{PICKER_KEY.DATE}}">
-      <view class="pannel-label">日期</view>
-      <view class="pannel-text {{dateValue.length ? '' : 'empty'}}"> {{util.joinArray(dateValue) || '选择日期' }}</view>
-      <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
-    </view>
+    <base />
   </t-demo>
   <t-demo desc="带标题选择器">
     <view class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.CITY_TITLE}}">
       <view class="pannel-label">城市</view>
       <view class="pannel-text {{cityTitleValue.length ? '' : 'empty'}}"
-        >{{util.joinArray(cityTitleValue) || '选择城市'}}</view
+        >{{ cityTitleCurrentValue || '选择城市' }}</view
       >
       <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
     </view>
@@ -39,67 +20,19 @@
     >
       <view class="pannel-label">年份和季节</view>
       <view class="pannel-text {{yearSeasonsTitleValue.length ? '' : 'empty'}}">
-        {{ util.joinArray(yearSeasonsTitleValue) || '选择年份和季节' }}</view
+        {{ yearSeasonsTitleCurrentValue || '选择年份和季节' }}</view
       >
       <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
     </view>
     <view class="pannel-item" bind:tap="onClickPicker" data-title="选择日期" data-key="{{PICKER_KEY.DATE_TITLE}}">
       <view class="pannel-label">日期</view>
       <view class="pannel-text {{dateTitleValue.length ? '' : 'empty'}}">
-        {{util.joinArray(dateTitleValue) || '选择日期'}}</view
+        {{ dateTitleCurrentValue || '选择日期' }}</view
       >
       <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
     </view>
   </t-demo>
 
-  <!-- 城市不带标题 -->
-  <t-picker
-    visible="{{cityVisible}}"
-    value="{{cityValue}}"
-    data-key="city"
-    title="{{pickerTitle}}"
-    cancelBtn="取消"
-    confirmBtn="确认"
-    bindchange="onPickerChange"
-    bindpick="onColumnChange"
-    bindcancel="onPickerCancel"
-  >
-    <t-picker-item options="{{citys}}"></t-picker-item>
-  </t-picker>
-
-  <!-- 年+ 季节 不带标题 -->
-  <t-picker
-    visible="{{yearSeasonsVisible}}"
-    value="{{yearSeasonsValue}}"
-    data-key="yearSeasons"
-    title="{{pickerTitle}}"
-    cancelBtn="取消"
-    confirmBtn="确认"
-    bindchange="onPickerChange"
-    bindpick="onColumnChange"
-    bindcancel="onPickerCancel"
-  >
-    <t-picker-item options="{{years}}"></t-picker-item>
-    <t-picker-item options="{{seasons}}"></t-picker-item>
-  </t-picker>
-
-  <!-- 年月日 不带标题 -->
-  <t-picker
-    visible="{{dateVisible}}"
-    value="{{dateValue}}"
-    data-key="date"
-    title="{{pickerTitle}}"
-    cancelBtn="取消"
-    confirmBtn="确认"
-    bindchange="onPickerChange"
-    bindpick="onColumnChange"
-    bindcancel="onPickerCancel"
-  >
-    <t-picker-item options="{{years}}"></t-picker-item>
-    <t-picker-item options="{{months}}"></t-picker-item>
-    <t-picker-item options="{{days}}"></t-picker-item>
-  </t-picker>
-
   <!-- 城市带标题 -->
   <t-picker
     visible="{{cityTitleVisible}}"