{"id":31203,"date":"2024-11-25T10:40:54","date_gmt":"2024-11-25T02:40:54","guid":{"rendered":"https:\/\/fwq.ai\/blog\/31203\/"},"modified":"2024-11-25T10:40:54","modified_gmt":"2024-11-25T02:40:54","slug":"%e5%a6%82%e4%bd%95%e5%ae%9e%e7%8e%b0%e5%be%ae%e4%bf%a1%e5%a5%bd%e5%8f%8b%e5%88%97%e8%a1%a8%e7%82%b9%e5%87%bb%e5%ad%97%e6%af%8d%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\/31203\/","title":{"rendered":"\u5982\u4f55\u5b9e\u73b0\u5fae\u4fe1\u597d\u53cb\u5217\u8868\u70b9\u51fb\u5b57\u6bcd\u8df3\u8f6c\u5bf9\u5e94\u4f4d\u7f6e"},"content":{"rendered":"

\u5fae\u4fe1\u4e0a\u6709\u4e00\u79cd\u529f\u80fd\u5417\uff0c\u5c31\u662f\u70b9\u51fb\u5217\u8868\u5b57\u6bcd\u5c31\u80fd\u8df3\u8f6c\u5230\u76f8\u5e94\u4f4d\u7f6e\uff0c\u672c\u6587\u4e3b\u8981\u4ecb\u7ecd\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\uff0c\u5e0c\u671b\u80fd\u5e2e\u52a9\u5230\u5927\u5bb6\u3002<\/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

 class=\"container\" scroll-y&gt;\r\n  class=\"info\" id=\"info\" scroll-with-animation scroll-y scroll-top=\"200\" scroll-into-view=\"{{toView}}\" style=\"height:{{height}}px;\"&gt;\r\n   class=\"iitem\" id=\"{{item.id}}\" wx:for=\"{{info_list}}\" wx:key=\"1\"&gt;\r\n   {{item.id}} . {{item.desc}}\r\n  \r\n \r\n  class=\"letter {{active == true ? 'active': ''}}\" bindtouchstart='start' bindtouchmove='move' bindtouchend='end'&gt;\r\n   class=\"litem\" bindtap='down' data-index=\"999\"&gt;\r\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}}\r\n \r\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
\/\/index.js\r\n\/\/\u83b7\u53d6\u5e94\u7528\u5b9e\u4f8b\r\nconst app = getApp()\r\nPage({\r\n data: {\r\n  letter_list: [],\r\n  info_list: [],\r\n  hide: true,\r\n  active: false,\r\n  toView: 'A',\r\n  curView: 'A',\r\n  letter_height: 18\r\n },\r\n onLoad: function () {\r\n  this.active = false;\r\n  this.timer = null;\r\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'];\r\n  var info_list = [];\r\n  for (var i = 0; i <p>\u6837\u5f0f\u90e8\u5206 <br><\/p><p>index.wxss<\/p><pre class=\"brush:js;\">\/**index.wxss**\/\r\ntext {\r\n font-weight: bold\r\n}\r\n.letter {\r\n font-size: 12px;\r\n width: 24px;\r\n height: 100%;\r\n position: fixed;\r\n right: 0;\r\n top: 0;\r\n z-index: +999;\r\n}\r\n.litem {\r\n width: 24px;\r\n height: 18px;\r\n line-height: 18px;\r\n text-align: center;\r\n}\r\n.info {\r\n font-size: 12px;\r\n text-align: justify;\r\n overflow: hidden;\r\n}\r\n.active {\r\n background: rgba(0, 0, 0, 0.2);\r\n}\r\n.iitem {\r\n padding: 10rpx 10rpx;\r\n margin-bottom: 10rpx;\r\n border-radius: 8rpx;\r\n background: rgba(222,222,222,0.2);\r\n box-sizing: border-box;\r\n}\r\n.tips {\r\n width: 40px;\r\n height: 40px;\r\n background: rgba(0,0,0,0.4);\r\n font-size: 20px;\r\n text-align: center;\r\n line-height: 40px;\r\n color: #fff;\r\n position: fixed;\r\n left: 50%;\r\n top: 50%;\r\n margin: -20px;\r\n z-index: +999;\r\n border-radius: 10rpx;<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u76f8\u5173\u63a8\u8350\uff1a<\/p>\n<\/p>\n<\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u5982\u4f55\u5b9e\u73b0\u5fae\u4fe1\u597d\u53cb\u5217\u8868\u70b9\u51fb\u5b57\u6bcd\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":"
\u5fae\u4fe1\u4e0a\u6709\u4e00\u79cd\u529f\u80fd\u5417\uff0c\u5c31\u662f\u70b9\u51fb\u5217\u8868\u5b57\u6bcd\u5c31\u80fd\u8df3\u8f6c\u5230\u76f8\u5e94\u4f4d\u7f6e\uff0c\u672c\u6587\u4e3b\u8981\u4ecb\u7ecd\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\uff0c\u5e0c\u671b\u80fd\u5e2e\u52a9\u5230\u5927\u5bb6\u3002 \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>\u6837\u5f0f\u90e8\u5206 <br><\/p><p>index.wxss<\/p><pre class=”brush:js;”>\/**index.wxss**\/ text {  font-weight: bold } .letter {  font-size: 12px;  width: 24px;  height: 100%;  position: fixed; […]<\/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-31203","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/31203","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=31203"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/31203\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=31203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=31203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=31203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}