new picker

project.config.json

@@ -4,7 +4,7 @@
     "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
     "appid": "wxe44244d1a5ea3364",
     "setting": {
-        "urlCheck": true,
+        "urlCheck": false,
         "es6": false,
         "postcss": false,
         "minified": false,

src/components/Picker/index.jsx

@@ -1,61 +0,0 @@
-import Taro from '@tarojs/taro';
-import { Picker, View } from '@tarojs/components';
-import { useMemo, useState } from 'react';
-import PropTypes from 'prop-types';
-
-// 暂时只支持单列普通选择器
-const XPicker = (props) => {
-  const { bindchange, onChange, range, value : propValue, rangeKey, rangeValue, placeholder = '请选择', ...leftProps } = props
-
-  const [innerValue, setInnerValue] = useState()
-
-  const handleChange = (e) => {
-    const data = range[e.detail.value]
-    const val = data[rangeValue]
-    e.detail.value = val
-    setInnerValue(data)
-
-    console.log('-----bindchange----->', bindchange)
-    console.log('-----onChange----->', onChange)
-
-    if (bindchange) {
-      bindchange(e, data)
-    }
-    if (onChange) {
-      onChange(e, data)
-    }
-  }
-
-  const value = useMemo(() => {
-    if (propValue === undefined || propValue === null) {
-      return undefined
-    }
-
-    for (let i in range) {
-      if (range[i][rangeValue] === propValue) {
-        setInnerValue(range[i])
-        return i;
-      }
-    }
-
-    return undefined;
-  }, [propValue, range, rangeValue])
-
-  const childViewStyle = useMemo(() => {
-    return innerValue ? {} : { color: '#858585' }
-  }, [innerValue])
-
-  return (
-    <Picker {...leftProps} mode='selector' range={range} value={value} rangeKey={rangeKey} onChange={handleChange}>
-      <View style={childViewStyle}>{innerValue === undefined ? placeholder : innerValue[rangeKey]}</View>
-    </Picker>
-  )
-}
-
-XPicker.behaviors = ['wx://form-field']
-XPicker.propTypes = {
-  behaviors: PropTypes.array
-}
-
-
-export default XPicker

src/components/s-picker/index.js

@@ -0,0 +1,48 @@
+Component({
+  behaviors: ['wx://form-field'],
+  options: {
+    addGlobalClass: true,
+  },
+  properties: {
+    name: {
+      type: String
+    },
+    value: {
+      type: undefined,
+    },
+    range: {
+      type: Array,
+    },
+    rangeKey: {
+      type: String,
+    },
+    rangeValue: {
+      type: String,
+    },
+    placeholder: {
+      type: String,
+      value: '请选择'
+    },
+  },
+  data: {
+    text: undefined,
+    index: undefined,
+  },
+  methods: {
+    bindChange: function(e) {
+
+      const index = e.detail.value
+      const data = this.data.range[index]
+      const value = data[this.data.rangeValue]
+      const text = data[this.data.rangeKey]
+
+      this.setData({
+        index,
+        text,
+        value,
+      })
+
+      this.triggerEvent('change', { value, data })
+    }
+  }
+})

src/components/s-picker/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

src/components/s-picker/index.wxml

@@ -0,0 +1,4 @@
+<picker mode="selector" range="{{range}}" value="{{index}}" range-key="{{rangeKey}}" bindchange="bindChange" >
+  <view class="s-picker-placeholder" wx:if="{{index == undefined}}">{{placeholder}}</view>
+  <view wx:else>{{text}}</view>
+</picker>

src/components/s-picker/index.wxss

@@ -0,0 +1,3 @@
+.s-picker-placeholder {
+  color: #858585
+}

src/pages/setUser/index.config.js

@@ -8,7 +8,8 @@ export default {
     "mp-cells": "weui-miniprogram/cells/cells",
     "mp-cell": "weui-miniprogram/cell/cell",
     "mp-form-page": "weui-miniprogram/form-page/form-page",
-    "mp-form": "weui-miniprogram/form/form"
+    "mp-form": "weui-miniprogram/form/form",
+    "s-picker": "../../components/s-picker/index"
   }
 
 }

src/pages/setUser/index.jsx

@@ -5,7 +5,6 @@ import { setPersons } from '@/services/dogAPI';
 import { useModel } from '@/store';
 import { uploadFile } from '@/utils/request';
 import Form from '@/components/Form';
-import Picker from '@/components/Picker';
 
 import './style.less'
 
@@ -103,7 +102,7 @@ export default (props) => {
               </mp-cell>
               <mp-cell title='性别' extClass=''>
                 {/* <Input name='sex' placeholder='请输入卡号' /> */}
-                <Picker name='sex' rangeKey='text' rangeValue='value' range={userSex} />
+                <s-picker name='sex' rangeKey='text' rangeValue='value' range={userSex} />
               </mp-cell>
               <mp-cell title='手机号' extClass=''>
                 <Input name='phone' type='number' placeholder='请输入手机号' maxlength={11} value={person?.phone} />