Add example

example/app.js

@@ -0,0 +1,9 @@
+//app.js
+App({
+  onLaunch: function () {
+
+  },
+  globalData: {
+
+  }
+})

example/app.json

@@ -0,0 +1,11 @@
+{
+  "pages":[
+    "pages/index/index"
+  ],
+  "window":{
+    "backgroundTextStyle":"light",
+    "navigationBarBackgroundColor": "#fff",
+    "navigationBarTitleText": "miniprogram-picker-example",
+    "navigationBarTextStyle":"black"
+  }
+}

example/app.wxss

@@ -0,0 +1 @@
+/**app.wxss**/

example/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "miniprogram-picker-example",
+  "version": "1.0.0",
+  "description": "",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "IceApriler",
+  "license": "ISC",
+  "dependencies": {
+    "miniprogram-picker": "^1.0.0"
+  }
+}

example/pages/index/index.js

@@ -0,0 +1,98 @@
+//index.js
+
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    result_1: [],
+    result_2: [],
+    sourceData_1: [
+      {
+        id: 'id-1',
+        name: '1',
+        sonValue: [
+          {
+            id: 'id-11',
+            name: '1.1',
+            sonValue: [
+              { id: 'id-111', name: '1.1.1' },
+              { id: 'id-112', name: '1.1.2' }
+            ]
+          },
+          {
+            id: 'id-12',
+            name: '1.2',
+            sonValue: [
+              { id: 'id-121', name: '1.2.1' },
+              { id: 'id-122', name: '1.2.2' }
+            ]
+          }
+        ]
+      },
+      {
+        id: 'id-2',
+        name: '2',
+        sonValue: [
+          {
+            id: 'id-21',
+            name: '2.1',
+            sonValue: [
+              { id: 'id-211', name: '2.1.1' },
+              { id: 'id-212', name: '2.1.2' }
+            ]
+          },
+          {
+            id: 'id-22',
+            name: '2.2',
+            sonValue: [
+              { id: 'id-221', name: '2.2.1' },
+              { id: 'id-222', name: '2.2.2' }
+            ]
+          }
+        ]
+      }
+    ],
+    sourceData_2: [
+      { name: '河北', code: '0311', nextLevel: [{ name: '石家庄', code: '031101' }, { name: '保定', code: '031102' }]},
+      { name: '北京', code: '0110', nextLevel: [{ name: '朝阳', code: '011001' }, { name: '海淀', code: '011002' }]},
+    ]
+  },
+  /**
+   * Picker用户点击确认时触发
+   *
+   * @param {Object} e pickerChange的事件对象
+   * @param {Array} e.detail.selectedIndex 用户选择的数据在数组中所在的下标
+   * @param {Array} e.detail.selectedArray 用户选择的数据
+   */
+  pickerChange(e) {
+    const { picker } = e.currentTarget.dataset
+    const { selectedIndex, selectedArray } = e.detail
+    const list = {
+      picker_1: 'result_1',
+      picker_2: 'result_2',
+    }
+    console.log('多级联动结果:', selectedIndex, selectedArray)
+    const change = {}
+    change[list[picker]] = selectedArray
+    this.setData(change)
+  },
+  /**
+   * Picker用户点击取消时触发
+   *
+   * @param {Object} e  pickerCancel的事件对象
+   * @param {Object} e.detail  是原生Picker组件的bindcancel触发时的事件对象e
+   */
+  pickerCancel(e) {
+    console.log(e)
+  },
+  /**
+   * Picker用户滑动某一列的值改变时触发
+   *
+   * @param {Object} e pickerColumnchange的事件对象
+   * @param {Object} e.detail  是原生Picker组件的bindcolumnchange触发时的事件对象e
+   */
+  pickerColumnchange(e) {
+    console.log(e)
+  },
+})

example/pages/index/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "miniprogram-picker": "miniprogram-picker"
+  }
+}

example/pages/index/index.wxml

@@ -0,0 +1,41 @@
+<!--index.wxml-->
+<!-- 多级联动 -->
+<miniprogram-picker
+  sourceData="{{sourceData_1}}"
+  steps="{{3}}"
+  shownFieldName="{{'name'}}"
+  subsetFieldName="{{'sonValue'}}"
+  otherNeedFieldsName="{{['id', 'other']}}"
+  defaultValue="{{[{name: '2'}, {name: '2.2'}, {name: '2.2.1'}]}}"
+  defaultValueUniqueField="{{'name'}}"
+  autoSelect="{{true}}"
+  initColumnSelectedIndex
+  disabled="{{false}}"
+  bindchange="pickerChange"
+  bindcancel="pickerCancel"
+  bindcolumnchange="pickerColumnchange"
+  data-picker="picker_1">
+    <view class="picker">
+      当前选择：<view wx:for="{{result_1}}" wx:key="index">{{item['name']}}</view>
+    </view>
+</miniprogram-picker>
+
+<miniprogram-picker
+  sourceData="{{sourceData_2}}"
+  steps="{{2}}"
+  shownFieldName="{{'name'}}"
+  subsetFieldName="{{'nextLevel'}}"
+  otherNeedFieldsName="{{['code']}}"
+  defaultValue="{{[{code: '0110'}, {code: '011002'}]}}"
+  defaultValueUniqueField="{{'code'}}"
+  autoSelect="{{true}}"
+  initColumnSelectedIndex
+  disabled="{{false}}"
+  bindchange="pickerChange"
+  bindcancel="pickerCancel"
+  bindcolumnchange="pickerColumnchange"
+  data-picker="picker_2">
+    <view class="picker">
+      当前选择：<view wx:for="{{result_2}}" wx:key="index">{{item['name']}}</view>
+    </view>
+</miniprogram-picker>

example/pages/index/index.wxss

@@ -0,0 +1,16 @@
+/**index.wxss**/
+.picker {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 10rpx 0;
+  padding: 10rpx 0;
+  background-color: #DEECE2;
+  font-size: 28rpx;
+}
+.picker view {
+  padding: 2rpx 10rpx;
+  margin-left: 10rpx;
+  margin-right: 10rpx;
+  border-bottom: 2rpx solid aqua;
+}

example/project.config.json

@@ -0,0 +1,41 @@
+{
+	"description": "项目配置文件",
+	"packOptions": {
+		"ignore": []
+	},
+	"setting": {
+		"urlCheck": true,
+		"es6": true,
+		"postcss": true,
+		"minified": true,
+		"newFeature": true,
+		"autoAudits": false,
+		"nodeModules": true
+	},
+	"compileType": "miniprogram",
+	"libVersion": "2.4.2",
+	"appid": "wx1ff48fdc24aaf3eb",
+	"projectname": "miniprogram-picker-example",
+	"debugOptions": {
+		"hidedInDevtools": []
+	},
+	"isGameTourist": false,
+	"condition": {
+		"search": {
+			"current": -1,
+			"list": []
+		},
+		"conversation": {
+			"current": -1,
+			"list": []
+		},
+		"game": {
+			"currentL": -1,
+			"list": []
+		},
+		"miniprogram": {
+			"current": -1,
+			"list": []
+		}
+	}
+}