{"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:\/\/blog.yuekegu.com\/?p=524","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:\/\/blog.yuekegu.com\/wp-content\/uploads\/2024\/02\/image.png 657w, https:\/\/blog.yuekegu.com\/wp-content\/uploads\/2024\/02\/image-300x284.png 300w\" sizes=\"(max-width: 657px) 100vw, 657px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;template>\r\n\t&lt;view class=\"body-view\">\r\n\t\t&lt;!-- \u4f7f\u7528scroll-view\u5b9e\u73b0tabs\u6ed1\u52a8\u5207\u6362 -->\r\n\t\t&lt;scroll-view class=\"top-menu-view\" scroll-x=\"true\" :scroll-into-view=\"tabCurrent\">\r\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)\">\r\n\t\t\t\t&lt;view :class=\"currentTab==(item.id - 1) ? 'menu-topic-act' : 'menu-topic'\">\r\n\t\t\t\t\t&lt;text class=\"menu-topic-text\">{{item.name}}&lt;\/text>\r\n\t\t\t\t\t&lt;view class=\"menu-topic-bottom\">\r\n\t\t\t\t\t\t&lt;view class=\"menu-topic-bottom-color\">&lt;\/view>\r\n\t\t\t\t\t&lt;\/view>\r\n\t\t\t\t&lt;\/view>\r\n\t\t\t&lt;\/view>\r\n\t\t&lt;\/scroll-view>\r\n\t\t&lt;!-- \u5185\u5bb9 -->\r\n\t\t&lt;swiper class=\"swiper-box-list\" :current=\"currentTab\" @change=\"swiperChange\">\r\n\t\t\t&lt;swiper-item class=\"swiper-topic-list\" v-for=\"item in swiperDateList\" :key=\"item.id\">\r\n\t\t\t\t&lt;view class=\"swiper-item\">\r\n\t\t\t\t\t{{item.content}}\r\n\t\t\t\t&lt;\/view>\r\n\t\t\t&lt;\/swiper-item>\r\n\t\t&lt;\/swiper>\r\n\t&lt;\/view>\r\n&lt;\/template>\r\n&lt;script>\r\n\texport default {\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\ttabs: &#91;{\r\n\t\t\t\t\t\tid: 1,\r\n\t\t\t\t\t\tname: '\u63a8\u8350'\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tid: 2,\r\n\t\t\t\t\t\tname: '\u4ea4\u901a\u4ea4\u901a'\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tid: 3,\r\n\t\t\t\t\t\tname: '\u4f4f\u623f'\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tid: 4,\r\n\t\t\t\t\t\tname: '\u793e\u4f1a\u4fdd\u969c'\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tid: 5,\r\n\t\t\t\t\t\tname: '\u6c11\u751f\u70ed\u70b9'\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tid: 6,\r\n\t\t\t\t\t\tname: '\u5373\u65e5\u5934\u6761'\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tid: 7,\r\n\t\t\t\t\t\tname: '\u65b0\u95fb\u8054\u64ad'\r\n\t\t\t\t\t},\r\n\t\t\t\t],\r\n\t\t\t\tcurrentTab: 0,\r\n\t\t\t\ttabCurrent: 'tabNum1',\r\n\t\t\t\t\/\/ Tab\u5207\u6362\u5185\u5bb9\r\n\t\t\t\tswiperDateList: &#91;{\r\n\t\t\t\t\t\tid: 1,\r\n\t\t\t\t\t\tcontent: '\u63a8\u8350'\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tid: 2,\r\n\t\t\t\t\t\tcontent: '\u4ea4\u901a\u4ea4\u901a'\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tid: 3,\r\n\t\t\t\t\t\tcontent: '\u4f4f\u623f'\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tid: 4,\r\n\t\t\t\t\t\tcontent: '\u793e\u4f1a\u4fdd\u969c'\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tid: 5,\r\n\t\t\t\t\t\tcontent: '\u6c11\u751f\u70ed\u70b9'\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tid: 6,\r\n\t\t\t\t\t\tcontent: '\u5373\u65e5\u5934\u6761'\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tid: 7,\r\n\t\t\t\t\t\tcontent: '\u65b0\u95fb\u8054\u64ad'\r\n\t\t\t\t\t},\r\n\t\t\t\t],\r\n\t\t\t}\r\n\t\t},\r\n\t\tonLoad() {\r\n\t\t},\r\n\t\tmethods: {\r\n\t\t\tswichMenu(id) {\r\n\t\t\t\tthis.currentTab = id\r\n\t\t\t\tconsole.log(11,id)\r\n\t\t\t\tthis.tabCurrent = 'tabNum'+ id\r\n\t\t\t},\r\n\t\t\tswiperChange(e) {\r\n\t\t\t\tconsole.log(22,e.detail.current)\r\n\t\t\t\tlet index = e.detail.current\r\n\t\t\t\tthis.swichMenu(index)\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n&lt;\/script>\r\n&lt;style scoped lang=\"scss\">\r\n\t.body-view {\r\n\t\theight: 100vh;\r\n\t\twidth: 100%;\r\n\t\tdisplay: flex;\r\n\t\tflex: 1;\r\n\t\tflex-direction: column;\r\n\t\toverflow: hidden;\r\n\t\talign-items: flex-start;\r\n\t\tjustify-content: center;\r\n\t}\r\n\t.top-menu-view {\r\n\t\tdisplay: flex;\r\n\t\tposition: fixed;\r\n\t\ttop: 100rpx;\r\n\t\tleft: 0;\r\n\t\twhite-space: nowrap;\r\n\t\twidth: 100%;\r\n\t\tbackground-color: #FFFFFF;\r\n\t\theight: 86rpx;\r\n\t\tline-height: 86rpx;\r\n\t\tborder-top: 1rpx solid #d8dbe6;\r\n\t\t.menu-topic-view {\r\n\t\t\tdisplay: inline-block;\r\n\t\t\twhite-space: nowrap;\r\n\t\t\theight: 86rpx;\r\n\t\t\tposition: relative;\r\n\t\t\t.menu-topic-text {\r\n\t\t\t\tfont-size: 30rpx;\r\n\t\t\t\tcolor: #303133;\r\n\t\t\t\tpadding: 10rpx 40rpx;\r\n\t\t\t}\r\n\t\t\t\/\/ .menu-topic-act {\r\n\t\t\t\/\/ \tmargin-left: 30upx;\r\n\t\t\t\/\/ \tmargin-right: 10upx;\r\n\t\t\t\/\/ \tposition: relative;\r\n\t\t\t\/\/ \theight: 100%;\r\n\t\t\t\/\/ \tdisplay: flex;\r\n\t\t\t\/\/ \talign-items: center;\r\n\t\t\t\/\/ \tjustify-content: center;\r\n\t\t\t\/\/ }\r\n\t\t\t.menu-topic-bottom {\r\n\t\t\t\tposition: absolute;\r\n\t\t\t\tbottom: 0;\r\n\t\t\t\twidth: 100%;\r\n\t\t\t\t.menu-topic-bottom-color {\r\n\t\t\t\t\twidth: 40rpx;\r\n\t\t\t\t\theight: 4rpx;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\t.menu-topic-act .menu-topic-bottom {\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\tjustify-content: center;\r\n\t\t\t}\r\n\t\t\t.menu-topic-act .menu-topic-bottom-color {\r\n\t\t\t\tbackground: #3d7eff;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\t.swiper-box-list {\r\n\t\twidth: 100%;\r\n\t\tpadding-top: 200rpx;\r\n\t\tflex:1;\r\n\t\tbackground-color: #FFFFFF;\r\n\t\t.swiper-topic-list {\r\n\t\t     width: 100%;\r\n\t\t }\r\n\t}\r\n&lt;\/style><\/code><\/pre>\n","raw":"","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":[41],"tags":[],"post_thumbnail_image":"https:\/\/blog.yuekegu.com\/wp-content\/uploads\/2024\/02\/image.png","content_first_image":"https:\/\/blog.yuekegu.com\/wp-content\/uploads\/2024\/02\/image.png","post_medium_image_300":"https:\/\/blog.yuekegu.com\/wp-content\/uploads\/2024\/02\/image.png","post_thumbnail_image_624":"https:\/\/blog.yuekegu.com\/wp-content\/uploads\/2024\/02\/image.png","post_frist_image":"https:\/\/blog.yuekegu.com\/wp-content\/uploads\/2024\/02\/image.png","post_medium_image":"https:\/\/blog.yuekegu.com\/wp-content\/uploads\/2024\/02\/image.png","post_large_image":"https:\/\/blog.yuekegu.com\/wp-content\/uploads\/2024\/02\/image.png","post_full_image":"https:\/\/blog.yuekegu.com\/wp-content\/uploads\/2024\/02\/image.png","post_all_images":[{"imagesurl":"https:\/\/blog.yuekegu.com\/wp-content\/uploads\/2024\/02\/image.png","id":"image0"}],"videoAdId":"","listAd":"0","listAdId":"","listAdEvery":5,"total_comments":0,"category_name":"uniApp","post_date":"2024-02-06","like_count":"0","praiseWord":"\u9f13\u52b1","copyright_state":"","excitationAd":"0","rewardedVideoAdId":"","detailAdId":"","detailAd":"0","enterpriseMinapp":"0","audios":[],"postImageUrl":false,"avatarurls":[],"related_posts":null,"pageviews":1383,"next_post_id":null,"next_post_title":null,"previous_post_id":null,"previous_post_title":null,"_links":{"self":[{"href":"https:\/\/blog.yuekegu.com\/index.php?rest_route=\/wp\/v2\/posts\/524"}],"collection":[{"href":"https:\/\/blog.yuekegu.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.yuekegu.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.yuekegu.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.yuekegu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=524"}],"version-history":[{"count":1,"href":"https:\/\/blog.yuekegu.com\/index.php?rest_route=\/wp\/v2\/posts\/524\/revisions"}],"predecessor-version":[{"id":526,"href":"https:\/\/blog.yuekegu.com\/index.php?rest_route=\/wp\/v2\/posts\/524\/revisions\/526"}],"wp:attachment":[{"href":"https:\/\/blog.yuekegu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.yuekegu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.yuekegu.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}