{"id":31353,"date":"2024-11-25T12:37:12","date_gmt":"2024-11-25T04:37:12","guid":{"rendered":"https:\/\/fwq.ai\/blog\/31353\/"},"modified":"2024-11-25T12:37:12","modified_gmt":"2024-11-25T04:37:12","slug":"%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e9%80%89%e9%a1%b9%e5%8d%a1%e5%8a%9f%e8%83%bd%e7%9a%84%e5%bc%80%e5%8f%91","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/31353\/","title":{"rendered":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u9009\u9879\u5361\u529f\u80fd\u7684\u5f00\u53d1"},"content":{"rendered":"

\u672c\u6587\u4e3b\u8981\u548c\u5927\u5bb6\u5206\u4eab\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u9009\u9879\u5361\u529f\u80fd\u7684\u5f00\u53d1\uff0c\u5e0c\u671b\u80fd\u5e2e\u52a9\u5230\u5927\u5bb6<\/p>\n

\u5728pages\u6587\u4ef6\u91cc\u9762\u521b\u5efaswipertab\u6587\u4ef6\u5939<\/span><\/span><\/p>\n

1.\u7f16\u5199\u9875\u9762\u7ed3\u6784:<\/span>swipertab.wxml<\/span><\/span><\/p>\n

<!--swipertab.wxml-->\r\n<view>  \r\n    <view>tab\u4e00<\/view>  \r\n    <view>tab\u4e8c<\/view>  \r\n    <view>tab\u4e09<\/view>  \r\n<\/view>  \r\n<swiper>  \r\n    <!-- tab\u4e00 -->  \r\n    <swiper-item>  \r\n      <view>tab\u4e00<\/view>  \r\n    <\/swiper-item>  \r\n    <!-- tab\u4e8c -->  \r\n    <swiper-item>  \r\n      <view>tab\u4e8c<\/view>  \r\n    <\/swiper-item>  \r\n    <!-- tab\u4e09 -->  \r\n    <swiper-item>  \r\n      <view>tab\u4e09<\/view>  \r\n    <\/swiper-item>  \r\n<\/swiper><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
2.<\/span>\u8bbe\u7f6e\u6570\u636e:swipertab.js<\/span><\/span><\/span><\/p>\n
\/\/\u83b7\u53d6\u5e94\u7528\u5b9e\u4f8b  \r\nvar app = getApp()\r\nPage({\r\n\tdata: {\r\n\t\t\/** \r\n\t\t * \u9875\u9762\u914d\u7f6e\r\n\t\t *\/\r\n\t\twinWidth: 0,\r\n\t\twinHeight: 0,\r\n\t\t\/\/ tab\u5207\u6362  \r\n\t\tcurrentTab: 0,\r\n\t},\r\n\tonLoad: function() {\r\n\t\tvar that = this;\r\n\r\n\t\t\/** \r\n\t\t * \u83b7\u53d6\u7cfb\u7edf\u4fe1\u606f\r\n\t\t *\/\r\n\t\twx.getSystemInfo({\r\n\r\n\t\t\tsuccess: function(res) {\r\n\t\t\t\tthat.setData({\r\n\t\t\t\t\twinWidth: res.windowWidth,\r\n\t\t\t\t\twinHeight: res.windowHeight\r\n\t\t\t\t});\r\n\t\t\t}\r\n\r\n\t\t});\r\n\t},\r\n\t\/** \r\n\t * \u6ed1\u52a8\u5207\u6362tab\r\n\t *\/\r\n\tbindChange: function(e) {\r\n\r\n\t\tvar that = this;\r\n\t\tthat.setData({\r\n\t\t\tcurrentTab: e.detail.current\r\n\t\t});\r\n\r\n\t},\r\n\t\/** \r\n\t * \u70b9\u51fbtab\u5207\u6362\r\n\t *\/\r\n\tswichNav: function(e) {\r\n\r\n\t\tvar that = this;\r\n\r\n\t\tif (this.data.currentTab === e.target.dataset.current) {\r\n\t\t\treturn false;\r\n\t\t} else {\r\n\t\t\tthat.setData({\r\n\t\t\t\tcurrentTab: e.target.dataset.current\r\n\t\t\t})\r\n\t\t}\r\n\t}\r\n})<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
3.\u8bbe\u7f6e\u6837\u5f0f:swipertab.wxss<\/span><\/span><\/p>\n
<\/span><\/span><\/p>\n
.swiper-tab{  \r\n    width: 100%;  \r\n    border-bottom: 2rpx solid #777777;  \r\n    text-align: center;  \r\n    line-height: 80rpx;}  \r\n.swiper-tab-list{  font-size: 30rpx;  \r\n    display: inline-block;  \r\n    width: 33.33%;  \r\n    color: #777777;  \r\n}  \r\n.on{ color: #da7c0c;  \r\n    border-bottom: 5rpx solid #da7c0c;}  \r\n  \r\n.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }  \r\n.swiper-box view{  \r\n    text-align: center;  \r\n}<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
4.\u5934\u90e8\u6807\u9898\u4fee\u6539:swipertab.json<\/span><\/p>\n
<\/span><\/span><\/p>\n
{\r\n    \"navigationBarTitleText\": \"\u9009\u9879\u5361\u9875\u9762\u5207\u6362\"\r\n}<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
5.\u6548\u679c\u56fe<\/span><\/span><\/p>\n
\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u9009\u9879\u5361\u529f\u80fd\u7684\u5f00\u53d1\u63d2\u56fe\"<\/span><\/span><\/p>\n

<\/span><\/span><\/p>\n
\u6ce8\u610f\uff1a\u56e0\u4e3a\u6587\u4ef6\u540d\u4e0d\u662findex,\u6240\u4ee5\u8bb0\u5f97\u4fee\u6539app.json\u6587\u4ef6(\u5e95\u4e0b\u5907\u6ce8\u7684\u5730\u65b9)\uff0c\u5426\u5219\u9875\u9762\u4e0d\u4f1a\u663e\u793a\u540c\u65f6\u5e95\u90e8\u4e0d\u4f1a\u663e\u793a<\/span><\/span><\/p>\n
\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u9009\u9879\u5361\u529f\u80fd\u7684\u5f00\u53d1\u63d2\u56fe1\"
<\/span><\/span><\/p>\n
\u76f8\u5173\u63a8\u8350\uff1a<\/p>\n
\n
\n
\n
\u4ee5\u4e0a\u5c31\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u9009\u9879\u5361\u529f\u80fd\u7684\u5f00\u53d1\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\u9009\u9879\u5361\u529f\u80fd\u7684\u5f00\u53d1\uff0c\u5e0c\u671b\u80fd\u5e2e\u52a9\u5230\u5927\u5bb6 \u5728pages\u6587\u4ef6\u91cc\u9762\u521b\u5efaswipertab\u6587\u4ef6\u5939 1.\u7f16\u5199\u9875\u9762\u7ed3\u6784:swipertab.wxml <!–swipertab.wxml–> <view>       <view>tab\u4e00<\/view>       <view>tab\u4e8c<\/view>       <view>tab\u4e09<\/view>   <\/view>   <swiper>       <!– tab\u4e00 –>       <swiper-item>         <view>tab\u4e00<\/view>       <\/swiper-item>       <!– tab\u4e8c –>       <swiper-item>         <view>tab\u4e8c<\/view>       <\/swiper-item>       <!– tab\u4e09 –>       <swiper-item>         <view>tab\u4e09<\/view>       <\/swiper-item>   <\/swiper> \u767b\u5f55\u540e\u590d\u5236 2.\u8bbe\u7f6e\u6570\u636e:swipertab.js \/\/\u83b7\u53d6\u5e94\u7528\u5b9e\u4f8b   var app = getApp() Page({ data: { \/**   * \u9875\u9762\u914d\u7f6e  *\/ winWidth: 0, winHeight: 0, \/\/ tab\u5207\u6362   currentTab: 0, }, onLoad: function() { var that = this; \/**   * \u83b7\u53d6\u7cfb\u7edf\u4fe1\u606f  *\/ wx.getSystemInfo({ success: function(res) { that.setData({ winWidth: res.windowWidth, winHeight: res.windowHeight }); } […]<\/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-31353","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/31353","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=31353"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/31353\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=31353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=31353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=31353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}