{"id":33395,"date":"2024-11-25T11:25:56","date_gmt":"2024-11-25T03:25:56","guid":{"rendered":"https:\/\/fwq.ai\/blog\/33395\/"},"modified":"2024-11-25T11:25:56","modified_gmt":"2024-11-25T03:25:56","slug":"%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e6%80%8e%e4%b9%88%e4%bd%bf%e7%94%a8%e8%bd%a6%e7%89%8c%e5%8f%b7%e8%be%93%e5%85%a5%e6%b3%95","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/33395\/","title":{"rendered":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u600e\u4e48\u4f7f\u7528\u8f66\u724c\u53f7\u8f93\u5165\u6cd5"},"content":{"rendered":"

\n \u5728\u505a\u5c0f\u7a0b\u5e8f\u65f6\uff0c\u505a\u4e86\u4e00\u4e2a\u5173\u4e8e\u8f66\u7684\u9879\u76ee\uff0c\u7136\u540e\u9700\u8981\u6dfb\u52a0\u8f66\u8f86\u4fe1\u606f\u3001\u6dfb\u52a0\u8f66\u724c\u53f7\uff0c\u4f7f\u7528\u8f66\u724c\u952e\u76d8\u8f93\u5165\uff0c\u5f53\u65f6\u6211\u628a\u8fd9\u4e2a\u9700\u6c42\u7ed9\u780d\u4e86\uff0c\u7136\u540e\u5728\u6dfb\u52a0\u8f66\u8f86\u4fe1\u606f\u65f6\uff0c\u8001\u5927\u770b\u5230\u6570\u636e\u5e93\u91cc\u6211\u4e71\u586b\u7684\u8f66\u724c\u53f7\uff0c\u53c8\u8ba9\u6211\u628a\u4ed6\u52a0\u4e0a\u4e86^o^\n<\/p><\/blockquote>\n

1\u3001\u6548\u679c\u56fe<\/span><\/h1>\n

\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u600e\u4e48\u4f7f\u7528\u8f66\u724c\u53f7\u8f93\u5165\u6cd5\u63d2\u56fe\"<\/span><\/p>\n

\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u600e\u4e48\u4f7f\u7528\u8f66\u724c\u53f7\u8f93\u5165\u6cd5\u63d2\u56fe1\"<\/span><\/p>\n

2.\u76f8\u5173\u4ee3\u7801<\/span><\/h1>\n
    \n
  • \u4f7f\u7528\u7ec4\u4ef6\u5f62\u5f0f\u5b9e\u73b0\u952e\u76d8\u8f93\u5165<\/span><\/li>\n<\/ul>\n

    \u7ec4\u4ef6\u4ee3\u7801index.wxml<\/p>\n

    <view class=\"carPlate\" wx:if=\"{{show}}\">\n  <block wx:if=\"{{type==1}}\">\n    <view class=\"wordList\">\n      <view class=\"wordItem\" wx:for=\"{{cityKeyword1}}\" wx:key=\"{{item}}\" bindtap=\"handleClick\" data-type=\"1\" data-item=\"{{item}}\">{{item}}<\/view>\n    <\/view>\n    <view class=\"wordList\">\n      <view class=\"wordItem\" wx:for=\"{{cityKeyword2}}\" wx:key=\"{{item}}\" bindtap=\"handleClick\" data-type=\"1\" data-item=\"{{item}}\">{{item}}<\/view>\n    <\/view>\n    <view class=\"wordList\">\n      <view class=\"wordItem\" wx:for=\"{{cityKeyword3}}\" wx:key=\"{{item}}\" bindtap=\"handleClick\" data-type=\"1\" data-item=\"{{item}}\">{{item}}<\/view>\n    <\/view>\n    <view class=\"wordList\">\n      <view class=\"wordItem\" wx:for=\"{{cityKeyword4}}\" wx:key=\"{{item}}\" bindtap=\"handleClick\" data-type=\"1\" data-item=\"{{item}}\">{{item}}<\/view>\n    <\/view>\n  <\/block>\n  <block wx:else>\n    <view class=\"wordList\">\n      <view class=\"wordItem\" wx:for=\"{{keyNumber}}\" wx:key=\"{{item}}\" bindtap=\"handleClick\" data-type=\"2\" data-item=\"{{item}}\">{{item}}<\/view>\n    <\/view>\n    <view class=\"wordList\">\n      <view class=\"wordItem\" wx:for=\"{{wordList1}}\" wx:key=\"{{item}}\" bindtap=\"handleClick\" data-type=\"2\" data-item=\"{{item}}\">{{item}}<\/view>\n    <\/view>\n    <view class=\"wordList\">\n      <view class=\"wordItem\" wx:for=\"{{wordList2}}\" wx:key=\"{{item}}\" bindtap=\"handleClick\" data-type=\"2\" data-item=\"{{item}}\">{{item}}<\/view>\n      <view class=\"wordItem wordClear\" bindtap=\"handleClick\" data-item=\"delete\">\n        <image src=\"\/images\/input-clear.png\" class=\"clearImg\"><\/image>\n      <\/view>\n    <\/view>\n    <view class=\"wordList\">\n      <view class=\"wordItem\" wx:for=\"{{wordList3}}\" wx:key=\"{{item}}\" bindtap=\"handleClick\" data-item=\"{{item}}\">{{item}}<\/view>\n      <view class=\"wordItem wordConfirm\" bindtap=\"handleClick\" data-item=\"confirm\">\u786e\u5b9a<\/view>\n    <\/view>\n  <\/block>\n<\/view><\/pre>\n
     \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      \n
    • index.css<\/span><\/li>\n<\/ul>\n
      .carPlate{\n  position: fixed;\n  padding: 12rpx 12rpx 30rpx;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  \/* height: 150px; *\/\n  font-size: 30rpx;\n  background: #fff;\n  box-sizing: border-box;\n  border-top: 1px solid rgb(211, 207, 207);\n  z-index: 200;\n}\n.wordList{\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n}\n.wordItem{\n  margin: 5rpx;\n  width: 70rpx;\n  height: 70rpx;\n  line-height: 70rpx;\n  text-align: center;\n  border: 1px solid #eee;\n  border-radius: 10rpx;\n}\n.wordConfirm{\n  width: 130rpx;\n  color: #fff;\n  background: #473af0;\n}\n.wordClear{\n  width: 100rpx;\n}\n.clearImg{\n  width: 60rpx;\n  height: 60rpx;\n  vertical-align: middle;\n}<\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
        \n
      • index.js<\/span><\/li>\n<\/ul>\n
        Component({\n\n  properties: {\n    type: {\n      type: Number,\n      default: 1,\n    },\n    show: {\n      type: Boolean,\n      default: false,\n    }\n  },\n\n  data: {\n    cityKeyword1: '\u4eac\u6caa\u6d59\u82cf\u7ca4\u9c81\u664b\u5180\u8c6b',\n    cityKeyword2: '\u5ddd\u6e1d\u8fbd\u5409\u9ed1\u7696\u9102\u6e58\u8d63',\n    cityKeyword3: '\u95fd\u9655\u7518\u5b81\u8499\u6d25\u8d35\u4e91',\n    cityKeyword4: '\u6842\u743c\u9752\u65b0\u85cf\u6e2f\u6fb3\u53f0',\n    keyNumber: '1234567890',\n    wordList1: 'QWERTYUIOP',\n    wordList2: 'ASDFGHJKL',\n    wordList3: 'ZXCVBNM',\n  },\n\n  methods: {\n    handleClick(e) {\n      let value = e.currentTarget.dataset.item;\n      let type = e.currentTarget.dataset.type;\n      switch(value) {\n        case 'confirm':\n          this.triggerEvent('confirm');\n          break;\n        case 'delete':\n          this.triggerEvent('delete');\n          break;\n        default: \n          this.triggerEvent('change', { value, type });\n      }\n    }\n  }\n})<\/pre>\n
         \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
        3.\u7236\u7ec4\u4ef6\u5f15\u5165<\/span><\/h1>\n
          \n
        • \u6211\u60f3\u5b9e\u73b0\u70b9\u51fb\u8f93\u5165\u540e\u6709\u4e0a\u62c9\u7684\u6548\u679c\uff0c\u5f00\u59cb\u6211\u60f3\u4f7f\u7528offset\u6765\u5b9e\u73b0\u7684\uff0c\u4f46\u662f\u4e0b\u73ed\u540e\u6d17\u8863\u670d\u60f3\u4e86\u4e0b\uff0c\u4e0d\u592a\u597d\u5b9e\u73b0\uff0c\u6211\u5c31\u60f3\u5230\u4e86\u6211\u4ee5\u524d\u505a\u8d2d\u7269\u8f66\u65f6\uff0c\u6709\u7528\u5230transform\uff0c\u539f\u7406\u5dee\u4e0d\u591a\uff0c\u6211\u5c31\u628a\u4ed6\u7528\u4e0a\u4e86<\/span><\/li>\n
        • \u7136\u540e\u5c31\u662f\u70b9\u51fb\u952e\u76d8\u5916\u5b9e\u73b0\u6536\u8d77\u952e\u76d8\uff0c\u5f00\u59cb\u6211\u60f3\u5230\u7684\u5c31\u662f\u5728\u7236\u7ec4\u4ef6\u7684\u6700\u5916\u5c42\u5b9a\u4e49\u5173\u95ed\u4e8b\u4ef6\uff0c\u7236\u7ea7\u91cc\u9762\u7684\u76d2\u5b50\u90fd\u4f7f\u7528catch\u65b9\u6cd5\u963b\u6b62\u5192\u6ce1\uff0c\u4f46\u60f3\u4e0b\u963b\u6b62\u5192\u6ce1\u597d\u50cf\u53c8\u6709\u70b9\u4e0d\u5408\u60c5\u7406\uff0c\u5c31\u53c8\u628a\u963b\u6b62\u5192\u6ce1\u7ed9\u53bb\u6389\u4e86<\/span><\/li>\n
        • \u7236\u7ec4\u4ef6index.wxml<\/span><\/li>\n<\/ul>\n
          <view class=\"container\" bindtap=\"handlePlateConfirm\">\n  <view class=\"translateView\" style=\"transform: translateY({{translateSpace}}px)\">\n    <view class=\"list\">\n      <view class=\"item\">\n        <view class=\"label\">*\u8f66\u724c\u53f7\u7801<\/view>\n        <view class=\"contentBox\" catchtap=\"handleClick\">\n          <view class=\"inputBox\" wx:if=\"{{carNo}}\">{{carNo}}<\/view>\n          <view class=\"promptText\" wx:else>\u8bf7\u8f93\u5165\u8f66\u724c\u53f7<\/view>\n        <\/view>\n      <\/view>\n    <\/view>\n  <\/view>\n<\/view>\n<car-plate show=\"{{showPlateInput}}\" bindchange=\"handlePlateChange\" type=\"{{inputType}}\" bindconfirm=\"handlePlateConfirm\" binddelete=\"handlePlateDelete\" \/><\/pre>\n
           \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
            \n
          • \u7236\u7ec4\u4ef6index.js<\/span><\/li>\n<\/ul>\n
            Page({\n  data: {\n    carNo: '',\n    translateSpace: 0,\n    inputType: 1, \/\/ \u8f66\u724c\u8f93\u5165\u7c7b\u578b\uff0c1\u7b80\u79f0\uff0c2\u6570\u5b57\u6216\u8005\u5b57\u6bcd,\n    showPlateInput: false,\n  },\n  \/* \u7528\u4e8e\u70b9\u51fb\u5f39\u51fa\u952e\u76d8\u8f93\u5165\uff0cspace\u4e3a\u952e\u76d8\u5f39\u51fa\u540e\u5411\u4e0a\u62c9\u53d6\u7684\u8ddd\u79bb *\/\n  handleClick(e) {\n    \/* 150\u4e3a\u952e\u76d8\u7684\u9ad8\u5ea6 *\/\n    let space = -(e.currentTarget.offsetTop - 150);\n    \/* regExp\u7528\u4e8e\u5224\u65ad\u5f53\u524d\u5df2\u8f93\u5165\u7684\u8f66\u724c\u53f7\u662f\u5426\u662f\u4e2d\u6587\uff0c\u5e76\u8ba9\u952e\u76d8\u663e\u793a\u4e2d\u6587\u8fd8\u662f\u82f1\u6587\u8f93\u5165 *\/\n    let regExp = \/^[u4e00-u9fa5]+\/;\n    let inputType = 1;\n    if(regExp.test(this.data.carNo)) {\n      inputType = 2;\n    }\n\n    this.setData({\n      translateSpace: space,\n      showPlateInput: true,\n      inputType\n    })\n  },\n  \/* \u952e\u76d8\u8f93\u5165\u64cd\u4f5c *\/\n  handlePlateChange(e) {\n    let value = e.detail.value;\n    let type = e.detail.type;\n    let carNo = this.data.carNo;\n    carNo += value;\n\n    if(type == 1) {\n      this.setData({\n        inputType: 2\n      })\n    }\n    this.setData({\n      carNo\n    })\n  },\n  \/* \u70b9\u51fb\u952e\u76d8\u4e0a\u7684\u786e\u5b9a *\/\n  handlePlateConfirm() {\n    \/* isCarPlate\u7528\u4e8e\u5224\u65ad\u8f93\u5165\u7684\u8f66\u724c\u53f7\u662f\u5426\u7b26\u5408\u89c4\u8303 *\/\n    if (!this.isCarPlate(this.data.carNo)) {\n      wx.showToast({\n        title: '\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u8f66\u724c\u53f7',\n        icon: 'none',\n        duration: 2000\n      })\n      return false;\n    }\n    this.setData({\n      translateSpace: 0,\n      showPlateInput: false,\n      inputType: 1\n    })\n  },\n  \/* \u7528\u4e8e\u952e\u76d8\u8f93\u5165\u5220\u9664 *\/\n  handlePlateDelete(e) {\n    let carNo = this.data.carNo;\n    carNo = carNo.substring(0, carNo.length - 1);\n    if(carNo.length == 0) {\n      this.setData({\n        inputType: 1\n      })\n    }\n    this.setData({\n      carNo,\n    })\n  },\n  \/* \u5224\u65ad\u8f66\u724c\u53f7 *\/\n  isCarPlate(value) {\n    return \/^(([\u4eac\u6d25\u6caa\u6e1d\u5180\u8c6b\u4e91\u8fbd\u9ed1\u6e58\u7696\u9c81\u65b0\u82cf\u6d59\u8d63\u9102\u6842\u7518\u664b\u8499\u9655\u5409\u95fd\u8d35\u7ca4\u9752\u85cf\u5ddd\u5b81\u743c\u4f7f\u9886][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([\u4eac\u6d25\u6caa\u6e1d\u5180\u8c6b\u4e91\u8fbd\u9ed1\u6e58\u7696\u9c81\u65b0\u82cf\u6d59\u8d63\u9102\u6842\u7518\u664b\u8499\u9655\u5409\u95fd\u8d35\u7ca4\u9752\u85cf\u5ddd\u5b81\u743c\u4f7f\u9886][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9\u6302\u5b66\u8b66\u6e2f\u6fb3\u4f7f\u9886]))$\/.test(value);\n  }\n})<\/pre>\n
             \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
              \n
            • \u7236\u7ec4\u4ef6index.css<\/span><\/li>\n<\/ul>\n
              .container{\n  height: 100vh;\n  background: #fff;\n}\n.translateView{\n  background: #eee;\n}\n.list{\n  margin-bottom: 20rpx;\n  background: #fff;\n}\n.list:last-child{\n  margin: 0;\n}\n.item{\n  display: flex;\n  padding: 0 26rpx;\n  width: 100%;\n  height: 116rpx;\n  box-sizing: border-box;\n  align-items: center;\n  border-bottom: 1px solid #eee;\n}\n.item:last-child{\n  border: none;\n}\n.label{\n  margin-right: 10rpx;\n  width: 140rpx;\n}\n.contentBox{\n  display: flex;\n  width: calc(100% - 150rpx);\n  height: 90rpx;\n  align-items: center;\n  justify-content: space-between;\n}\n.promptText{\n  color: #c7c7c7;\n}\n.inputBox{\n  width: 100%;\n  height: 80rpx;\n  line-height: 80rpx;\n}<\/pre>\n
               \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
              \n  \u6b63\u5728\u52aa\u529b\u5b66\u4e60\u4e2d\uff0c\u82e5\u5bf9\u4f60\u7684\u5b66\u4e60\u6709\u5e2e\u52a9\uff0c\u7559\u4e0b\u4f60\u7684\u5370\u8bb0\u5457\uff08\u70b9\u4e2a\u8d5e\u54af^_^\uff09\n<\/p><\/blockquote>\n
              \u63a8\u8350\u6559\u7a0b\uff1a\u300a\u300b<\/p>\n
              \u4ee5\u4e0a\u5c31\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u600e\u4e48\u4f7f\u7528\u8f66\u724c\u53f7\u8f93\u5165\u6cd5\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
              \u5728\u505a\u5c0f\u7a0b\u5e8f\u65f6\uff0c\u505a\u4e86\u4e00\u4e2a\u5173\u4e8e\u8f66\u7684\u9879\u76ee\uff0c\u7136\u540e\u9700\u8981\u6dfb\u52a0\u8f66\u8f86\u4fe1\u606f\u3001\u6dfb\u52a0\u8f66\u724c\u53f7\uff0c\u4f7f\u7528\u8f66\u724c\u952e\u76d8\u8f93\u5165\uff0c\u5f53\u65f6\u6211\u628a\u8fd9\u4e2a\u9700\u6c42\u7ed9\u780d\u4e86\uff0c\u7136\u540e\u5728\u6dfb\u52a0\u8f66\u8f86\u4fe1\u606f\u65f6\uff0c\u8001\u5927\u770b\u5230\u6570\u636e\u5e93\u91cc\u6211\u4e71\u586b\u7684\u8f66\u724c\u53f7\uff0c\u53c8\u8ba9\u6211\u628a\u4ed6\u52a0\u4e0a\u4e86^o^ 1\u3001\u6548\u679c\u56fe 2.\u76f8\u5173\u4ee3\u7801 \u4f7f\u7528\u7ec4\u4ef6\u5f62\u5f0f\u5b9e\u73b0\u952e\u76d8\u8f93\u5165 \u7ec4\u4ef6\u4ee3\u7801index.wxml <view class=”carPlate” wx:if=”{{show}}”> <block wx:if=”{{type==1}}”> <view class=”wordList”> <view class=”wordItem” wx:for=”{{cityKeyword1}}” wx:key=”{{item}}” bindtap=”handleClick” data-type=”1″ data-item=”{{item}}”>{{item}}<\/view> <\/view> <view class=”wordList”> <view class=”wordItem” wx:for=”{{cityKeyword2}}” wx:key=”{{item}}” bindtap=”handleClick” data-type=”1″ data-item=”{{item}}”>{{item}}<\/view> <\/view> <view class=”wordList”> <view class=”wordItem” wx:for=”{{cityKeyword3}}” wx:key=”{{item}}” bindtap=”handleClick” data-type=”1″ data-item=”{{item}}”>{{item}}<\/view> <\/view> <view class=”wordList”> <view class=”wordItem” wx:for=”{{cityKeyword4}}” wx:key=”{{item}}” bindtap=”handleClick” data-type=”1″ data-item=”{{item}}”>{{item}}<\/view> <\/view> <\/block> <block wx:else> <view class=”wordList”> […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-33395","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/33395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=33395"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/33395\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=33395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=33395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=33395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}