{"id":31333,"date":"2024-11-25T14:46:54","date_gmt":"2024-11-25T06:46:54","guid":{"rendered":"https:\/\/fwq.ai\/blog\/31333\/"},"modified":"2024-11-25T14:46:54","modified_gmt":"2024-11-25T06:46:54","slug":"%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e6%a8%a1%e6%8b%9f%e4%b8%8b%e6%8b%89%e8%8f%9c%e5%8d%95%e5%bc%80%e5%8f%91%e5%ae%9e%e4%be%8b","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/31333\/","title":{"rendered":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u6a21\u62df\u4e0b\u62c9\u83dc\u5355\u5f00\u53d1\u5b9e\u4f8b"},"content":{"rendered":"

\u672c\u6587\u4e3b\u8981\u548c\u5927\u5bb6\u5206\u4eab\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u6a21\u62df\u4e0b\u62c9\u83dc\u5355\u5f00\u53d1\u5b9e\u4f8b\uff0c\u5e0c\u671b\u80fd\u5e2e\u52a9\u5230\u5927\u5bb6\u3002<\/p>\n

\u4e00.\u77e5\u8bc6\u70b9<\/span><\/p>\n

1.\u5b9e\u73b0\u52a8\u6001\u663e\u793a\u548c\u9690\u85cf\u67d0\u4e2a\u63a7\u4ef6<\/span><\/span><\/p>\n

\u5217\u88681 <\/span><\/p>\n

  data:{\r\n    open:false\r\n  },\r\n  showitem:function(){\r\n      this.setData({\r\n          open:!this.data.open\r\n      })\r\n  },<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
.display_show{\r\n    display: block;\r\n}\r\n.display_none{\r\n    display: none;\r\n}<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
2.\u901a\u8fc7 <\/span>data-* \u548c <\/span>e.target.dateset \u4f20\u9012\u53c2\u6570<\/span><\/span><\/p>\n
 {{firstPerson}} <\/span><\/span><\/span><\/p>\n
  \u5403 <\/span><\/p>\n
    this.setData({\r\n             firstPerson:e.target.dataset.me,\r\n       })<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u8fd9\u65f6\uff1afirstPerson=\u5403<\/span><\/p>\n
3.\u5f39\u6027\u76d2\u5b57\uff1adisplay:flex;<\/span><\/span><\/p>\n
<view>\r\n    <view>{{firstPerson}}<\/view>\r\n    <image><\/image><\/view><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u5728\u7236\u7ea7\uff1a<\/p>\n
    display:flex;
    justify-content:space-between;<\/span><\/p>\n
\u8fd9\u6837\u5b50\u96c6\u5c31\u4f1a\u5e76\u5217\u3002justify-content:space-between;\u8fd9\u6837\u5b50\u96c6\u5c31\u4f1a\u5206\u522b\u5728\u5728\u4fe9\u5934<\/span><\/span><\/p>\n
\u4e8c.\u4e8b\u5217<\/span><\/p>\n
(1).\u4e0b\u62c9\u5217\u8868<\/span><\/p>\n
1.wxml<\/span><\/p>\n
<view>\r\n    <view>\r\n        <view>\u70b9\u51fb\u6211\u663e\u793a\u4e0b\u62c9\u5217\u8868<\/view>\r\n        <navigator>\r\n        \t<view>\u5217\u88681<\/view>\r\n        <\/navigator>\r\n        <navigator>\r\n        \t<view>\u5217\u88682<\/view>\r\n        <\/navigator>\r\n        <navigator>\r\n        \t<view>\u5217\u88683<\/view>\r\n        <\/navigator>\r\n    <\/view><\/view><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
2.wxss<\/span><\/p>\n
.page_bd{\r\n    padding: 10px;\r\n    background-color: snow;\r\n}\r\n.body_head{\r\n    border: 1px solid;\r\n    border-color: beige;\r\n    padding: 10px;\r\n}\r\n.display_show{\r\n    display: block;\r\n    border: 1px solid;    \r\n    border-color: beige;\r\n    padding: 10px;\r\n}\r\n.display_none{\r\n    display: none;\r\n}<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n

3.js<\/span><\/p>\n
Page({\r\n  data:{\r\n    open:false\r\n  },\r\n  showitem:function(){\r\n      this.setData({\r\n          open:!this.data.open\r\n      })\r\n  },\r\n  onLoad:function(options){\r\n    \/\/ \u9875\u9762\u521d\u59cb\u5316 options\u4e3a\u9875\u9762\u8df3\u8f6c\u6240\u5e26\u6765\u7684\u53c2\u6570\r\n  },\r\n  onReady:function(){\r\n    \/\/ \u9875\u9762\u6e32\u67d3\u5b8c\u6210\r\n  },\r\n  onShow:function(){\r\n    \/\/ \u9875\u9762\u663e\u793a\r\n  },\r\n  onHide:function(){\r\n    \/\/ \u9875\u9762\u9690\u85cf\r\n  },\r\n  onUnload:function(){\r\n    \/\/ \u9875\u9762\u5173\u95ed\r\n  }\r\n})<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u6a21\u62df\u4e0b\u62c9\u83dc\u5355\u5f00\u53d1\u5b9e\u4f8b\u63d2\u56fe\"
<\/span><\/p>\n
(2).\u4e0b\u62c9\u83dc\u5355<\/span><\/p>\n
1.wxml<\/span><\/p>\n
<view>\r\n    <view>{{firstPerson}}<\/view>\r\n    <image><\/image><\/view>\n  \n   \r\n    \n   \n             \n    \n     \u5403\n             \n    \n     \u559d\n             \n    \n     \u73a9\n         \n   \r\n \n  <\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
2.wxss<\/span><\/p>\n
phone_personal{\r\n  width: 100%;\r\n  color:rgb(34, 154, 181);\r\n  height:100rpx;\r\n  line-height:100rpx;\r\n  text-align: center;\r\n}\r\n.phone_one{\r\n    display:flex;\r\n    position:relative;\r\n    justify-content:space-between;\r\n    background-color:rgb(239, 239, 239);\r\n    width:90%;\r\n    height:100rpx;\r\n    margin:22px auto;\r\n    border-radius:10rpx;\r\n    border-bottom:2rpx solid rgb(255, 255, 255);\r\n    line-height:51px;\r\n    padding-left:10px;\r\n}\r\n.person_box{\r\n  position: relative;\r\n}\r\n.phone_select{\r\n  margin-top:0;\r\n  z-index: 100;\r\n  position: absolute;\r\n}\r\n.select_one{\r\n  text-align: center;\r\n  background-color:rgb(239, 239, 239);\r\n  width:676rpx;\r\n  height:100rpx;\r\n  line-height:100rpx;\r\n  margin:0 5%;\r\n  border-bottom:2rpx solid rgb(255, 255, 255);\r\n}\r\n.personal_image{\r\n  z-index: 100;\r\n  position: absolute;\r\n  right:2.5%;\r\n  width: 34rpx;\r\n  height: 20rpx;\r\n  margin:40rpx 20rpx 40rpx 0;\r\n  transition: All 0.4s ease; \r\n  -webkit-transition: All 0.4s ease;\r\n}\r\n.rotateRight{\r\n  transform: rotate(180deg);\r\n}<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
3.js<\/span><\/p>\n
Page({\r\n  data:{\r\n    selectPerson:true,\r\n    firstPerson:'\u5174\u8da3',\r\n    selectArea:false,\r\n  },\r\n  \/\/\u70b9\u51fb\u9009\u62e9\u7c7b\u578b\r\n  clickPerson:function(){\r\n    var selectPerson = this.data.selectPerson;\r\n    if(selectPerson == true){\r\n        this.setData({\r\n        selectArea:true,\r\n        selectPerson:false,\r\n      })\r\n    }else{\r\n      this.setData({\r\n        selectArea:false,\r\n        selectPerson:true,\r\n      })\r\n    }\r\n  } ,\r\n  \/\/\u70b9\u51fb\u5207\u6362\r\n  mySelect:function(e){\r\n    this.setData({\r\n      firstPerson:e.target.dataset.me,\r\n      selectPerson:true,\r\n      selectArea:false,\r\n    })\r\n  },\r\n  onLoad:function(options){\r\n  \/\/ \u9875\u9762\u521d\u59cb\u5316 options\u4e3a\u9875\u9762\u8df3\u8f6c\u6240\u5e26\u6765\u7684\u53c2\u6570\r\n  },\r\n  onReady:function(){\r\n  \/\/ \u9875\u9762\u6e32\u67d3\u5b8c\u6210\r\n  },\r\n  onShow:function(){\r\n  \/\/ \u9875\u9762\u663e\u793a\r\n  },\r\n  onHide:function(){\r\n  \/\/ \u9875\u9762\u9690\u85cf\r\n  },\r\n  onUnload:function(){\r\n  \/\/ \u9875\u9762\u5173\u95ed\r\n  }\r\n})<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u6a21\u62df\u4e0b\u62c9\u83dc\u5355\u5f00\u53d1\u5b9e\u4f8b\u63d2\u56fe1\"<\/span><\/p>\n
\u76f8\u5173\u63a8\u8350\uff1a<\/span><\/p>\n<\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u6a21\u62df\u4e0b\u62c9\u83dc\u5355\u5f00\u53d1\u5b9e\u4f8b\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":"
\u672c\u6587\u4e3b\u8981\u548c\u5927\u5bb6\u5206\u4eab\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u6a21\u62df\u4e0b\u62c9\u83dc\u5355\u5f00\u53d1\u5b9e\u4f8b\uff0c\u5e0c\u671b\u80fd\u5e2e\u52a9\u5230\u5927\u5bb6\u3002 \u4e00.\u77e5\u8bc6\u70b9 1.\u5b9e\u73b0\u52a8\u6001\u663e\u793a\u548c\u9690\u85cf\u67d0\u4e2a\u63a7\u4ef6 \u5217\u88681   data:{     open:false   },   showitem:function(){       this.setData({           open:!this.data.open       })   }, \u767b\u5f55\u540e\u590d\u5236 .display_show{ display: block; } .display_none{ display: none; } \u767b\u5f55\u540e\u590d\u5236 2.\u901a\u8fc7 data-* \u548c e.target.dateset \u4f20\u9012\u53c2\u6570 {{firstPerson}}   \u5403     this.setData({              firstPerson:e.target.dataset.me,        }) \u767b\u5f55\u540e\u590d\u5236 \u8fd9\u65f6\uff1afirstPerson=\u5403 3.\u5f39\u6027\u76d2\u5b57\uff1adisplay:flex; <view>     <view>{{firstPerson}}<\/view>     <image><\/image><\/view> \u767b\u5f55\u540e\u590d\u5236 \u5728\u7236\u7ea7\uff1a     display:flex;    justify-content:space-between; \u8fd9\u6837\u5b50\u96c6\u5c31\u4f1a\u5e76\u5217\u3002justify-content:space-between;\u8fd9\u6837\u5b50\u96c6\u5c31\u4f1a\u5206\u522b\u5728\u5728\u4fe9\u5934 \u4e8c.\u4e8b\u5217 (1).\u4e0b\u62c9\u5217\u8868 1.wxml <view>     <view>         <view>\u70b9\u51fb\u6211\u663e\u793a\u4e0b\u62c9\u5217\u8868<\/view>         <navigator>          <view>\u5217\u88681<\/view>         <\/navigator>         <navigator>          […]<\/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-31333","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/31333","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=31333"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/31333\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=31333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=31333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=31333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}