{"id":31668,"date":"2024-11-25T14:06:16","date_gmt":"2024-11-25T06:06:16","guid":{"rendered":"https:\/\/fwq.ai\/blog\/31668\/"},"modified":"2024-11-25T14:06:16","modified_gmt":"2024-11-25T06:06:16","slug":"%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e5%bc%80%e5%8f%91%e4%b9%8b%e5%a5%bd%e5%8f%8b%e5%88%97%e8%a1%a8%e5%ad%97%e6%af%8d%e5%88%97%e8%a1%a8%e8%b7%b3%e8%bd%ac%e5%af%b9%e5%ba%94%e4%bd%8d%e7%bd%ae","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/31668\/","title":{"rendered":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4b\u597d\u53cb\u5217\u8868\u5b57\u6bcd\u5217\u8868\u8df3\u8f6c\u5bf9\u5e94\u4f4d\u7f6e"},"content":{"rendered":"

\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4ecb\u7ecd\u4e86\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4b\u597d\u53cb\u5217\u8868\u5b57\u6bcd\u5217\u8868\u8df3\u8f6c\u5bf9\u5e94\u4f4d\u7f6e\u7684\u76f8\u5173\u8d44\u6599,\u5e0c\u671b\u901a\u8fc7\u672c\u6587\u80fd\u5e2e\u52a9\u5230\u5927\u5bb6\u8ba9\u5927\u5bb6\u5b9e\u73b0\u8fd9\u6837\u7684\u529f\u80fd\uff0c\u9700\u8981\u7684\u670b\u53cb\u53ef\u4ee5\u53c2\u8003\u4e0b<\/p>\n

\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4b\u597d\u53cb\u5217\u8868\u5b57\u6bcd\u5217\u8868\u8df3\u8f6c\u5bf9\u5e94\u4f4d\u7f6e<\/strong><\/p>\n

\u524d\u8a00\uff1a<\/strong><\/p>\n

\u5728\u5c0f\u7a0b\u5e8f\u91cc\u5b9e\u73b0\u5fae\u4fe1\u597d\u53cb\u5217\u8868\u70b9\u51fb\u53f3\u4fa7\u5b57\u6bcd\u5217\u8868\u8df3\u8f6c\u5bf9\u5e94\u4f4d\u7f6e\u6548\u679c\u3002\u5199\u4e86\u4e2ademo\uff0c\u6838\u5fc3\u90e8\u5206\u5f88\u7b80\u5355\uff0c\u6240\u4ee5\u6ca1\u591a\u5c11\u6ce8\u91ca\uff0c\u5982\u679c\u9047\u5230\u95ee\u9898\u5c31\u52a0\u7fa4\u95ee\u6211\u5427\u3002<\/p>\n

\u6838\u5fc3\u6280\u672f\u70b9\uff1a <\/p>\n

1\u3001\u5c0f\u7a0b\u5e8fscroll-view\u7ec4\u4ef6\u7684scroll-into-view\uff0c scroll-with-animation. scroll-y\u5c5e\u6027\u3002
2\u3001\u5c0f\u7a0b\u5e8f\u7684touch\u4e8b\u4ef6\u7684\u5e94\u7528\u3002
3\u3001Js\u5b9a\u65f6\u5668\u7684\u5e94\u7528\u3002<\/p>\n

view\u9875\u9762\u4ee3\u7801\uff1a<\/p>\n

index.wxml<\/p>\n<\/p>\n

\n class=\"container\" scroll-y&gt;\n  class=\"info\" id=\"info\" scroll-with-animation scroll-y scroll-top=\"200\" scroll-into-view=\"{{toView}}\" style=\"height:{{height}}px;\"&gt;\n   class=\"iitem\" id=\"{{item.id}}\" wx:for=\"{{info_list}}\" wx:key=\"1\"&gt;\n   {{item.id}} . {{item.desc}}\n  \n \n  class=\"letter {{active == true ? 'active': ''}}\" bindtouchstart='start' bindtouchmove='move' bindtouchend='end'&gt;\n   class=\"litem\" bindtap='down' data-index=\"999\"&gt;\n   class=\"litem\" wx:for=\"{{letter_list}}\" bindtap='down' wx:for-index=\"index\" wx:key=\"2\" data-index=\"{{index}}\" style=\"height: {{letter_height}}px;\"&gt;{{item}}\n \n class=\"tips\" hidden=\"{{hide}}\"&gt;{{curView}}<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
js\u4ee3\u7801\uff1a <\/p>\n
index.js<\/p>\n<\/p>\n
\/\/index.js\n\/\/\u83b7\u53d6\u5e94\u7528\u5b9e\u4f8b\nconst app = getApp()\nPage({\n data: {\n  letter_list: [],\n  info_list: [],\n  hide: true,\n  active: false,\n  toView: 'A',\n  curView: 'A',\n  letter_height: 18\n },\n onLoad: function () {\n  this.active = false;\n  this.timer = null;\n  var letter_list = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];\n  var info_list = [];\n  for (var i = 0; i <p><\/p><p>\u6837\u5f0f\u90e8\u5206 <br><\/p><p>index.wxss<\/p><p class=\"jb51code\"><\/p><pre class=\"brush:js;toolbar:false;\">\/**index.wxss**\/\ntext {\n font-weight: bold\n}\n.letter {\n font-size: 12px;\n width: 24px;\n height: 100%;\n position: fixed;\n right: 0;\n top: 0;\n z-index: +999;\n}\n.litem {\n width: 24px;\n height: 18px;\n line-height: 18px;\n text-align: center;\n}\n.info {\n font-size: 12px;\n text-align: justify;\n overflow: hidden;\n}\n.active {\n background: rgba(0, 0, 0, 0.2);\n}\n.iitem {\n padding: 10rpx 10rpx;\n margin-bottom: 10rpx;\n border-radius: 8rpx;\n background: rgba(222,222,222,0.2);\n box-sizing: border-box;\n}\n.tips {\n width: 40px;\n height: 40px;\n background: rgba(0,0,0,0.4);\n font-size: 20px;\n text-align: center;\n line-height: 40px;\n color: #fff;\n position: fixed;\n left: 50%;\n top: 50%;\n margin: -20px;\n z-index: +999;\n border-radius: 10rpx;<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u672c\u6587\u7684\u5168\u90e8\u5185\u5bb9\uff0c\u5e0c\u671b\u5bf9\u5927\u5bb6\u7684\u5b66\u4e60\u6709\u6240\u5e2e\u52a9\uff0c\u66f4\u591a\u76f8\u5173\u5185\u5bb9\u8bf7\u5173\u6ce8PHP\u4e2d\u6587\u7f51\uff01<\/p>\n
\u76f8\u5173\u63a8\u8350\uff1a<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n<\/p>\n
<\/span><\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4b\u597d\u53cb\u5217\u8868\u5b57\u6bcd\u5217\u8868\u8df3\u8f6c\u5bf9\u5e94\u4f4d\u7f6e\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":"
\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4ecb\u7ecd\u4e86\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4b\u597d\u53cb\u5217\u8868\u5b57\u6bcd\u5217\u8868\u8df3\u8f6c\u5bf9\u5e94\u4f4d\u7f6e\u7684\u76f8\u5173\u8d44\u6599,\u5e0c\u671b\u901a\u8fc7\u672c\u6587\u80fd\u5e2e\u52a9\u5230\u5927\u5bb6\u8ba9\u5927\u5bb6\u5b9e\u73b0\u8fd9\u6837\u7684\u529f\u80fd\uff0c\u9700\u8981\u7684\u670b\u53cb\u53ef\u4ee5\u53c2\u8003\u4e0b \u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4b\u597d\u53cb\u5217\u8868\u5b57\u6bcd\u5217\u8868\u8df3\u8f6c\u5bf9\u5e94\u4f4d\u7f6e \u524d\u8a00\uff1a \u5728\u5c0f\u7a0b\u5e8f\u91cc\u5b9e\u73b0\u5fae\u4fe1\u597d\u53cb\u5217\u8868\u70b9\u51fb\u53f3\u4fa7\u5b57\u6bcd\u5217\u8868\u8df3\u8f6c\u5bf9\u5e94\u4f4d\u7f6e\u6548\u679c\u3002\u5199\u4e86\u4e2ademo\uff0c\u6838\u5fc3\u90e8\u5206\u5f88\u7b80\u5355\uff0c\u6240\u4ee5\u6ca1\u591a\u5c11\u6ce8\u91ca\uff0c\u5982\u679c\u9047\u5230\u95ee\u9898\u5c31\u52a0\u7fa4\u95ee\u6211\u5427\u3002 \u6838\u5fc3\u6280\u672f\u70b9\uff1a 1\u3001\u5c0f\u7a0b\u5e8fscroll-view\u7ec4\u4ef6\u7684scroll-into-view\uff0c scroll-with-animation. scroll-y\u5c5e\u6027\u3002 2\u3001\u5c0f\u7a0b\u5e8f\u7684touch\u4e8b\u4ef6\u7684\u5e94\u7528\u3002 3\u3001Js\u5b9a\u65f6\u5668\u7684\u5e94\u7528\u3002 view\u9875\u9762\u4ee3\u7801\uff1a index.wxml  class=”container” scroll-y&gt;   class=”info” id=”info” scroll-with-animation scroll-y scroll-top=”200″ scroll-into-view=”{{toView}}” style=”height:{{height}}px;”&gt;    class=”iitem” id=”{{item.id}}” wx:for=”{{info_list}}” wx:key=”1″&gt;    {{item.id}} . {{item.desc}}        class=”letter {{active == true ? ‘active’: ”}}” bindtouchstart=’start’ bindtouchmove=’move’ bindtouchend=’end’&gt;    class=”litem” bindtap=’down’ data-index=”999″&gt;    class=”litem” wx:for=”{{letter_list}}” bindtap=’down’ wx:for-index=”index” wx:key=”2″ data-index=”{{index}}” style=”height: {{letter_height}}px;”&gt;{{item}}    class=”tips” hidden=”{{hide}}”&gt;{{curView}} \u767b\u5f55\u540e\u590d\u5236 js\u4ee3\u7801\uff1a index.js \/\/index.js \/\/\u83b7\u53d6\u5e94\u7528\u5b9e\u4f8b const app = getApp() Page({  data: {   letter_list: [],   info_list: [],   hide: true,   active: false,   toView: ‘A’,   curView: ‘A’,   letter_height: 18  },  onLoad: function () {   this.active = false;   this.timer = null;   var letter_list = [‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’, ‘G’, ‘H’, ‘I’, ‘J’, ‘K’, ‘L’, ‘M’, ‘N’, ‘O’, ‘P’, ‘Q’, ‘R’, ‘S’, ‘T’, ‘U’, ‘V’, ‘W’, ‘X’, ‘Y’, ‘Z’];   var info_list = [];   for (var i = 0; i <p><\/p><p>\u6837\u5f0f\u90e8\u5206 <br><\/p><p>index.wxss<\/p><p class=”jb51code”><\/p><pre class=”brush:js;toolbar:false;”>\/**index.wxss**\/ text {  font-weight: bold } .letter {  font-size: 12px;  width: 24px;  height: 100%; […]<\/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-31668","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/31668","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=31668"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/31668\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=31668"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=31668"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=31668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}