{"id":7999,"date":"2024-06-27T16:01:03","date_gmt":"2024-06-27T08:01:03","guid":{"rendered":""},"modified":"2024-06-27T16:01:03","modified_gmt":"2024-06-27T08:01:03","slug":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8fvant\u7528\u6cd5_\u5f00\u53d1\u5fae\u4fe1\u5c0f\u7a0b\u5e8fui\u7ec4\u4ef6","status":"publish","type":"post","link":"https:\/\/mushiming.com\/7999.html","title":{"rendered":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8fvant\u7528\u6cd5_\u5f00\u53d1\u5fae\u4fe1\u5c0f\u7a0b\u5e8fui\u7ec4\u4ef6"},"content":{"rendered":"<p><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"display: none;\"> \n <path stroke-linecap=\"round\" d=\"M5,0 0,2.5 5,5z\" id=\"raphael-marker-block\" style=\"-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\"><\/path> \n<\/svg> <\/p>\n<p>\u5982\u9898\u5728weap\u6587\u6863\u4e0a\u7684<code>indexBar<\/code>\u662f\u53ef\u4ee5\u70b9\u51fb\u53f3\u4fa7\u5207\u6362\u5bf9\u5e94\u7d22\u5f15\u5185\u5bb9<br \/> \u6570\u5b57\u5bf9\u6570\u5b57 \u5b57\u7b26\u4e32\u5bf9\u5b57\u7b26\u4e32<\/p>\n<p>\u5728<code>index-bar.js<\/code>\u4e2d\u627e\u5230<code>scrollToAnchor<\/code>\u51fd\u6570<\/p>\n<pre><code class=\"prism language-javascript\">scrollToAnchor<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token punctuation\">(<\/span>index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{ \n   <!-- --><\/span> <span class=\"token keyword\">var<\/span> _this <span class=\"token operator\">=<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">typeof<\/span> index <span class=\"token operator\">!==<\/span> <span class=\"token string\">'number'<\/span> <span class=\"token operator\">||<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>scrollToAnchorIndex <span class=\"token operator\">===<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{ \n   <!-- --><\/span> <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>scrollToAnchorIndex <span class=\"token operator\">=<\/span> index<span class=\"token punctuation\">;<\/span> <span class=\"token keyword\">var<\/span> anchor <span class=\"token operator\">=<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>children<span class=\"token punctuation\">.<\/span><span class=\"token function\">find<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">function<\/span> <span class=\"token punctuation\">(<\/span>item<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{ \n   <!-- --><\/span> <span class=\"token keyword\">return<\/span> item<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">.<\/span>index <span class=\"token operator\">===<\/span> _this<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">.<\/span>indexList<span class=\"token punctuation\">[<\/span>index<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>anchor<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{ \n   <!-- --><\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">$emit<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'select'<\/span><span class=\"token punctuation\">,<\/span> anchor<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">.<\/span>index<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> wx<span class=\"token punctuation\">.<\/span><span class=\"token function\">pageScrollTo<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{ \n   <!-- --><\/span> duration<span class=\"token punctuation\">:<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> scrollTop<span class=\"token punctuation\">:<\/span> anchor<span class=\"token punctuation\">.<\/span>top <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span> <span class=\"token punctuation\">}<\/span> <\/code><\/pre>\n<p>\u7c7b\u578b\u4e0d\u4e00\u81f4 <code>String !== Number<\/code><\/p>\n<p><strong>\u89e3\u51b3\u529e\u6cd5:<\/strong><\/p>\n<ol>\n<li>\u628a\u4e24\u4e2a\u7c7b\u578b\u8f6c\u6362\u6210\u76f8\u540c\u7c7b\u578b\u5219\u89e6\u53d1\u5224\u65ad\u5168\u7b49\u6761\u4ef6\u5c31\u53ef\u4ee5\u6b63\u5e38\u4f7f\u7528<code>index-bar<\/code>\u53f3\u4fa7\u70b9\u51fb\u5207\u6362\u5566!\n<pre><code class=\"prism language-javascript\"><span class=\"token keyword\">var<\/span> anchor <span class=\"token operator\">=<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>children<span class=\"token punctuation\">.<\/span><span class=\"token function\">find<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">function<\/span> <span class=\"token punctuation\">(<\/span>item<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{ \n     <!-- --><\/span> <span class=\"token keyword\">return<\/span> item<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">.<\/span>index <span class=\"token operator\">===<\/span> <span class=\"token function\">String<\/span><span class=\"token punctuation\">(<\/span>_this<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">.<\/span>indexList<span class=\"token punctuation\">[<\/span>index<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <\/code><\/pre>\n<\/li>\n<\/ol>\n<p><code>A-Z<\/code> <code>0-9<\/code><br \/> \ud83d\ude0a\u4eca\u5929\u53c8\u662f\u5145\u6ee1\u5e0c\u671b\u7684\u4e00\u5929!<\/p>\n","protected":false},"excerpt":{"rendered":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8fvant\u7528\u6cd5_\u5f00\u53d1\u5fae\u4fe1\u5c0f\u7a0b\u5e8fui\u7ec4\u4ef6\u5982\u9898\u5728weap\u6587\u6863\u4e0a\u7684indexBar\u662f\u53ef\u4ee5\u70b9\u51fb\u53f3\u4fa7\u5207\u6362\u5bf9\u5e94\u7d22\u5f15\u5185\u5bb9\u4f46\u662f\u5728\u5c0f\u7a0b\u5e8f\u4e0a\u65e0\u6cd5\u70b9\u51fb...","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"_links":{"self":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/posts\/7999"}],"collection":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/comments?post=7999"}],"version-history":[{"count":0,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/posts\/7999\/revisions"}],"wp:attachment":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/media?parent=7999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/categories?post=7999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/tags?post=7999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}