{"id":1157,"date":"2023-03-12T17:10:00","date_gmt":"2023-03-12T09:10:00","guid":{"rendered":"http:\/\/blog.xrhoujie.com\/?p=1157"},"modified":"2023-03-20T17:18:49","modified_gmt":"2023-03-20T09:18:49","slug":"vue-tabs%e7%bb%84%e4%bb%b6%e5%b0%81%e8%a3%85%e9%80%82%e7%94%a8h5%ef%bc%8c%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f","status":"publish","type":"post","link":"http:\/\/blog.xrhoujie.com\/?p=1157","title":{"rendered":"vue-tabs\u7ec4\u4ef6\u5c01\u88c5(\u9002\u7528h5\uff0c\u5fae\u4fe1\u5c0f\u7a0b\u5e8f)"},"content":{"rendered":"\n

\u524d\u6bb5\u65f6\u95f4\u505a\u4e86\u4e00\u4e2aweb\u5c0f\u7a0b\u5e8f\u9879\u76ee\uff0c\u4e1a\u52a1\u4e0a\u6709tabs\u9700\u6c42\uff0c\u6240\u4ee5\u54b1\u5c31\u5f00\u59cb\u52a8\u624b\u62c6\u5206-\u5c01\u88c5\u3002<\/p>\n\n\n\n

<\/p>\n\n\n\n

\u7236\u7ec4\u4ef6\uff1a<\/p>\n\n\n\n

<template>\n\t\n<div class=\"content\">\n\t<Tabs class=\"tabGroup\"><\/Tabs>\n<\/div>\n\t\n<\/template>\n\n<script>\n\t\n\timport Tabs from \"..\/components\/tabs\/tabs.vue\"\n\n\texport default {\n\t\tcomponents:{\n\t\t\tTabs,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\t\n\t\t\t};\n\t\t},\n\t\tcomputed: {\n\t\t},\n\t\tonLoad(options) {\n\t\t\t\n\t\t},\n\t\tonShow() {\n\t\t\t\n\t\t},\n\t\tmethods: {\n\n\t\t}\n\t}\n<\/script>\n<\/code><\/pre>\n\n\n\n
\u770b\u5b50\u7ec4\u4ef6\uff1a<\/p>\n\n\n\n
<template>\n<view>\n\t<scroll-view class=\"scroll-view_H\" scroll-x=\"true\">\n\t\t<view class=\"scroll-view-item_H\" v-for=\"(tab,index) in tabBars\" :key=\"tab.id\" :id=\"tab.id\"\n\t\t@click=\"checkIndex(index)\">\n\t\t<image :src=\"tab.icon\" v-if=\"tab.icon\" :class=\"titleIconMap[index]\"><\/image>\n\t\t<image :src=\"tab.active\" v-if=\"tab.active\" :class=\"navIndex==index ? 'activite' :'activiteDisable'\">\n\t\t<\/image>\n\t\t\t{{tab.name}}\n\t\t<\/view>\n\t<\/scroll-view>\n\n\t<div class=\"tabPanel\">\n\t\t<!-- \u5185\u5bb9\u5207\u6362 -->\n\t\t<view class=\"goods-wrap\" v-if=\"navIndex==0\">\n\t\t\t<!-- \u62fc\u56e2goods -->\n\t\t\t\n\t\t<\/view>\n\t\t<view class=\"goods-wrap\" v-if=\"navIndex==1\">\n\t\t\t<!-- \u5546\u54c1--goods -->\n\t\t\t\n\t\t<\/view>\n\t\t<view class=\"goods-wrap\" v-if=\"navIndex==2\">\n\t\t\t<!-- \u5957\u9910--goods -->\n\t\t\t\n\t\t<\/view>\n\t\t<view class=\"goods-wrap\" v-if=\"navIndex==3\">\n\t\t\t<!-- \u4f18\u60e0\u5377--goods -->\n\t\t\t\n\t\t<\/view>\n\t<\/div>\n\n<\/view>\n\n<\/template>\n\n<script>\n\t\n\t\nexport default {\n\tcomponents:{\n\t\t\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tnavIndex: 0,\n\t\t\ttabBars: [{\n\t\t\t\tname: '',\n\t\t\t\tid: 'guanzhu',\n\t\t\t\ticon: require('..\/..\/..\/..\/static\/\/images\/groupBuyingList\/tab_pintuan.png'),\n\t\t\t\tactive: require('..\/..\/..\/..\/static\/\/images\/groupBuyingList\/tab_bottom_bg.png'),\n\t\t\t}, {\n\t\t\t\tname: '\\xa0\\xa0\\xa0\u5546\u54c1',\n\t\t\t\tid: 'tuijian',\n\t\t\t\ticon: require('..\/..\/..\/..\/static\/\/images\/groupBuyingList\/tab_goods.png'),\n\t\t\t\tactive: require('..\/..\/..\/..\/static\/\/images\/groupBuyingList\/tab_bottom_bg.png'),\n\t\t\t}, {\n\t\t\t\tname: '\u5957\u9910',\n\t\t\t\tid: 'tiyu',\n\t\t\t\ticon: '',\n\t\t\t\tactive: require('..\/..\/..\/..\/static\/\/images\/groupBuyingList\/tab_bottom_bg.png'),\n\t\t\t},{\n\t\t\t\tname: '\u4f18\u60e0\u5377',\n\t\t\t\tid: 'redian',\n\t\t\t\ticon: '',\n\t\t\t\tactive: require('..\/..\/..\/..\/static\/\/images\/groupBuyingList\/tab_bottom_bg.png'),\n\t\t\t}],\n\t\t\t\n\t\t}\n\t},\n\tmethods: {\n\t\tcheckIndex(index) {\n\t\t\t\/\/ console.log(index)\n\t\t\tthis.navIndex = index;\n\t\t},\n\t}\n}\n<\/script>\n\n<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u7ed3\u675f<\/p>\n","protected":false},"excerpt":{"rendered":"
\u524d\u6bb5\u65f6\u95f4\u505a\u4e86\u4e00\u4e2aweb\u5c0f\u7a0b\u5e8f\u9879\u76ee\uff0c\u4e1a\u52a1\u4e0a\u6709tabs\u9700\u6c42\uff0c\u6240\u4ee5\u54b1\u5c31\u5f00\u59cb\u52a8\u624b\u62c6\u5206-\u5c01\u88c5\u3002 \u7236\u7ec4\u4ef6\uff1a \u770b\u5b50\u7ec4\u4ef6\uff1a \u7ed3 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[41],"tags":[38],"_links":{"self":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1157"}],"collection":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1157"}],"version-history":[{"count":1,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1157\/revisions"}],"predecessor-version":[{"id":1159,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1157\/revisions\/1159"}],"wp:attachment":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1157"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}