{"id":524,"date":"2024-02-06T10:35:32","date_gmt":"2024-02-06T02:35:32","guid":{"rendered":"https:\/\/blog.yuekegu.com\/?p=524"},"modified":"2024-02-06T10:35:32","modified_gmt":"2024-02-06T02:35:32","slug":"uniapp%e5%ae%9e%e7%8e%b0tabs%e5%88%87%e6%8d%a2%e5%8f%af%e6%bb%91%e5%8a%a8%e6%95%88%e6%9e%9c%e5%ae%9e%e4%be%8b","status":"publish","type":"post","link":"https:\/\/book.yuekegu.com\/index.php\/2024\/02\/06\/uniapp%e5%ae%9e%e7%8e%b0tabs%e5%88%87%e6%8d%a2%e5%8f%af%e6%bb%91%e5%8a%a8%e6%95%88%e6%9e%9c%e5%ae%9e%e4%be%8b\/","title":{"rendered":"uniapp\u5b9e\u73b0tabs\u5207\u6362(\u53ef\u6ed1\u52a8)\u6548\u679c\u5b9e\u4f8b"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"657\" height=\"623\" src=\"https:\/\/blog.yuekegu.com\/wp-content\/uploads\/2024\/02\/image.png\" alt=\"\" class=\"wp-image-525\" srcset=\"https:\/\/book.yuekegu.com\/wp-content\/uploads\/2024\/02\/image.png 657w, https:\/\/book.yuekegu.com\/wp-content\/uploads\/2024\/02\/image-300x284.png 300w, https:\/\/book.yuekegu.com\/wp-content\/uploads\/2024\/02\/image-380x360.png 380w\" sizes=\"auto, (max-width: 657px) 100vw, 657px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;template>\n\t&lt;view class=\"body-view\">\n\t\t&lt;!-- \u4f7f\u7528scroll-view\u5b9e\u73b0tabs\u6ed1\u52a8\u5207\u6362 -->\n\t\t&lt;scroll-view class=\"top-menu-view\" scroll-x=\"true\" :scroll-into-view=\"tabCurrent\">\n\t\t\t&lt;view class=\"menu-topic-view\" v-for=\"item in tabs\" :id=\"'tabNum'+item.id\" :key=\"(item.id - 1)\" @click=\"swichMenu(item.id - 1)\">\n\t\t\t\t&lt;view :class=\"currentTab==(item.id - 1) ? 'menu-topic-act' : 'menu-topic'\">\n\t\t\t\t\t&lt;text class=\"menu-topic-text\">{{item.name}}&lt;\/text>\n\t\t\t\t\t&lt;view class=\"menu-topic-bottom\">\n\t\t\t\t\t\t&lt;view class=\"menu-topic-bottom-color\">&lt;\/view>\n\t\t\t\t\t&lt;\/view>\n\t\t\t\t&lt;\/view>\n\t\t\t&lt;\/view>\n\t\t&lt;\/scroll-view>\n\t\t&lt;!-- \u5185\u5bb9 -->\n\t\t&lt;swiper class=\"swiper-box-list\" :current=\"currentTab\" @change=\"swiperChange\">\n\t\t\t&lt;swiper-item class=\"swiper-topic-list\" v-for=\"item in swiperDateList\" :key=\"item.id\">\n\t\t\t\t&lt;view class=\"swiper-item\">\n\t\t\t\t\t{{item.content}}\n\t\t\t\t&lt;\/view>\n\t\t\t&lt;\/swiper-item>\n\t\t&lt;\/swiper>\n\t&lt;\/view>\n&lt;\/template>\n&lt;script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttabs: &#91;{\n\t\t\t\t\t\tid: 1,\n\t\t\t\t\t\tname: '\u63a8\u8350'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 2,\n\t\t\t\t\t\tname: '\u4ea4\u901a\u4ea4\u901a'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 3,\n\t\t\t\t\t\tname: '\u4f4f\u623f'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 4,\n\t\t\t\t\t\tname: '\u793e\u4f1a\u4fdd\u969c'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 5,\n\t\t\t\t\t\tname: '\u6c11\u751f\u70ed\u70b9'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 6,\n\t\t\t\t\t\tname: '\u5373\u65e5\u5934\u6761'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 7,\n\t\t\t\t\t\tname: '\u65b0\u95fb\u8054\u64ad'\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\tcurrentTab: 0,\n\t\t\t\ttabCurrent: 'tabNum1',\n\t\t\t\t\/\/ Tab\u5207\u6362\u5185\u5bb9\n\t\t\t\tswiperDateList: &#91;{\n\t\t\t\t\t\tid: 1,\n\t\t\t\t\t\tcontent: '\u63a8\u8350'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 2,\n\t\t\t\t\t\tcontent: '\u4ea4\u901a\u4ea4\u901a'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 3,\n\t\t\t\t\t\tcontent: '\u4f4f\u623f'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 4,\n\t\t\t\t\t\tcontent: '\u793e\u4f1a\u4fdd\u969c'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 5,\n\t\t\t\t\t\tcontent: '\u6c11\u751f\u70ed\u70b9'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 6,\n\t\t\t\t\t\tcontent: '\u5373\u65e5\u5934\u6761'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 7,\n\t\t\t\t\t\tcontent: '\u65b0\u95fb\u8054\u64ad'\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t}\n\t\t},\n\t\tonLoad() {\n\t\t},\n\t\tmethods: {\n\t\t\tswichMenu(id) {\n\t\t\t\tthis.currentTab = id\n\t\t\t\tconsole.log(11,id)\n\t\t\t\tthis.tabCurrent = 'tabNum'+ id\n\t\t\t},\n\t\t\tswiperChange(e) {\n\t\t\t\tconsole.log(22,e.detail.current)\n\t\t\t\tlet index = e.detail.current\n\t\t\t\tthis.swichMenu(index)\n\t\t\t}\n\t\t}\n\t}\n&lt;\/script>\n&lt;style scoped lang=\"scss\">\n\t.body-view {\n\t\theight: 100vh;\n\t\twidth: 100\n\t\tdisplay: flex;\n\t\tflex: 1;\n\t\tflex-direction: column;\n\t\toverflow: hidden;\n\t\talign-items: flex-start;\n\t\tjustify-content: center;\n\t}\n\t.top-menu-view {\n\t\tdisplay: flex;\n\t\tposition: fixed;\n\t\ttop: 100rpx;\n\t\tleft: 0;\n\t\twhite-space: nowrap;\n\t\twidth: 100\n\t\tbackground-color: #FFFFFF;\n\t\theight: 86rpx;\n\t\tline-height: 86rpx;\n\t\tborder-top: 1rpx solid #d8dbe6;\n\t\t.menu-topic-view {\n\t\t\tdisplay: inline-block;\n\t\t\twhite-space: nowrap;\n\t\t\theight: 86rpx;\n\t\t\tposition: relative;\n\t\t\t.menu-topic-text {\n\t\t\t\tfont-size: 30rpx;\n\t\t\t\tcolor: #303133;\n\t\t\t\tpadding: 10rpx 40rpx;\n\t\t\t}\n\t\t\t\/\/ .menu-topic-act {\n\t\t\t\/\/ \tmargin-left: 30upx;\n\t\t\t\/\/ \tmargin-right: 10upx;\n\t\t\t\/\/ \tposition: relative;\n\t\t\t\/\/ \theight: 100\n\t\t\t\/\/ \tdisplay: flex;\n\t\t\t\/\/ \talign-items: center;\n\t\t\t\/\/ \tjustify-content: center;\n\t\t\t\/\/ }\n\t\t\t.menu-topic-bottom {\n\t\t\t\tposition: absolute;\n\t\t\t\tbottom: 0;\n\t\t\t\twidth: 100\n\t\t\t\t.menu-topic-bottom-color {\n\t\t\t\t\twidth: 40rpx;\n\t\t\t\t\theight: 4rpx;\n\t\t\t\t}\n\t\t\t}\n\t\t\t.menu-topic-act .menu-topic-bottom {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t}\n\t\t\t.menu-topic-act .menu-topic-bottom-color {\n\t\t\t\tbackground: #3d7eff;\n\t\t\t}\n\t\t}\n\t}\n\t.swiper-box-list {\n\t\twidth: 100\n\t\tpadding-top: 200rpx;\n\t\tflex:1;\n\t\tbackground-color: #FFFFFF;\n\t\t.swiper-topic-list {\n\t\t     width: 100\n\t\t }\n\t}\n&lt;\/style><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[],"class_list":["post-524","post","type-post","status-publish","format-standard","hentry","category-uniapp-"],"_links":{"self":[{"href":"https:\/\/book.yuekegu.com\/index.php\/wp-json\/wp\/v2\/posts\/524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/book.yuekegu.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/book.yuekegu.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/book.yuekegu.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/book.yuekegu.com\/index.php\/wp-json\/wp\/v2\/comments?post=524"}],"version-history":[{"count":0,"href":"https:\/\/book.yuekegu.com\/index.php\/wp-json\/wp\/v2\/posts\/524\/revisions"}],"wp:attachment":[{"href":"https:\/\/book.yuekegu.com\/index.php\/wp-json\/wp\/v2\/media?parent=524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/book.yuekegu.com\/index.php\/wp-json\/wp\/v2\/categories?post=524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/book.yuekegu.com\/index.php\/wp-json\/wp\/v2\/tags?post=524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}