孕妈广场左右切分类：内容跟手拖动、胶囊同步挪，松手滑出滑入/不够回弹，两头阻尼；点标签同样滑入

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

demo/gch/v4.js

@@ -187,5 +187,5 @@
 }
   /* feed.js 首页默认不加载（index.html 只引了 topics.js），这里按需拉一次 */
   if (window.GC_FEED) init();
-  else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110215'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
+  else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110216'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
 })();

guangchang/index.html

@@ -51,9 +51,6 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
   transition:transform .32s cubic-bezier(.3,1.3,.5,1),width .32s cubic-bezier(.3,1.3,.5,1),background .25s;pointer-events:none}
 .cats::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#EADAD3 20%,#EADAD3 80%,transparent)}
 .cats button:active{transform:scale(.96)}
-.wf.swl{animation:swl .32s ease-out}.wf.swr{animation:swr .32s ease-out}
-@keyframes swl{from{opacity:.2;transform:translateX(36px)}to{opacity:1;transform:none}}
-@keyframes swr{from{opacity:.2;transform:translateX(-36px)}to{opacity:1;transform:none}}
 .cats .c-all{--cf:#F4593C}
 /* 四块分类色（11-01 第四版：按用户选题清单分 家庭 / 婚姻 / 职场 / 母婴）：kf 实色 · kt 深字 · kl/kl2 浅底两色 */
 .k-family,.c-family{--kf:#E0566F;--kt:#C23A55;--kl:#FFF0F3;--kl2:#FFD9E0}
@@ -460,11 +457,13 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
     </div>
     <div class="cats" id="cats" role="tablist" aria-label="分类"></div>
   </div>
+  <div id="pane">
   <div id="head"></div>
   <div class="sh" id="fh"></div>
   <div class="wf" id="wf"><div class="col"></div><div class="col"></div></div>
   <div id="more"></div>
   <div class="end"><b>— 到底啦 —</b><small>内容为示例占位，正式版将替换为妈妈们的真实分享</small></div>
+  </div>
 </div>
 
 <div id="dt" aria-hidden="true">
@@ -499,9 +498,9 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
 <div id="sheet" role="dialog" aria-modal="true"><i class="sg"></i><div class="sbd" id="sbd"></div></div>
 <div class="toast" id="toast"></div>
 
-<script src="topics.js?v=26110215"></script>
+<script src="topics.js?v=26110216"></script>
-<script src="data.js?v=26110215"></script>
+<script src="data.js?v=26110216"></script>
-<script src="feed.js?v=26110215"></script>
+<script src="feed.js?v=26110216"></script>
 <script>
 (function () {
   'use strict';
@@ -781,26 +780,75 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
   $('#cats').addEventListener('click', function (e) {
     var b = e.target.closest('button[data-c]');
     if (!b || (b.dataset.c === catF && !cur)) return;
-    catF = b.dataset.c; haptic();
+    if (paneBusy) return;
-    selectTopic('');   /* 换分类回到该类「全部」，避免停在别类话题上 */
+    var o = catOrder(), d = o.indexOf(b.dataset.c) - o.indexOf(catF);
+    if (!d) { catF = b.dataset.c; haptic(); selectTopic(''); return; }
+    slideTo(b.dataset.c, d > 0 ? 1 : -1);   /* 点标签也滑入，和手势一致 */
   });
-  /* 11-02 用户：「广场首页左右滑动，可以切到家庭婚姻、职场、经验」→ 横向滑动超过 60px 且明显比竖向大，就切到相邻分类；横滑列表、弹层里不触发 */
+  /* 11-02 用户：「广场首页左右滑动，可以切到家庭婚姻、职场、经验」+「突然就滑过去了，要有动效、让人感觉是被划过去的」
-  (function () {
+     → 手指横拖时整块内容（#pane）跟手走、顶部胶囊同步往目标分类挪；松手过 22% 屏宽（或甩得快）就整块滑出、换内容、从另一侧滑入；
-    var sx = 0, sy = 0, ok = false, sc = $('#sc');
+       不够就弹回。第一个 / 最后一个分类往外拖有阻尼。点分类标签也走同一套滑入。横滑列表、弹层里不触发。 */
-    sc.addEventListener('touchstart', function (e) {
+  var paneBusy = false;
-      var t = e.touches[0]; sx = t.clientX; sy = t.clientY;
+  function catOrder() { return CATS.map(function (c) { return c[0]; }); }
-      ok = e.touches.length === 1 && !e.target.closest('.tcs,.hot,.htl .jn,#sheet,#note,.nd') && !document.body.classList.contains('lock');
+  function barBetween(a, b, p) {   /* 胶囊在 a、b 两个标签间按进度 p 插值 */
-    }, { passive: true });
+    var bar = $('#cats .bar'); if (!bar || !a) return;
-    sc.addEventListener('touchend', function (e) {
+    var wa = a.offsetWidth - 20, xa = a.offsetLeft + 10, wb = b ? b.offsetWidth - 20 : wa, xb = b ? b.offsetLeft + 10 : xa;
-      if (!ok) return; ok = false;
+    bar.style.transition = 'none';
-      var t = e.changedTouches[0], dx = t.clientX - sx, dy = t.clientY - sy;
+    bar.style.width = (wa + (wb - wa) * p) + 'px'; bar.style.transform = 'translateX(' + (xa + (xb - xa) * p) + 'px)';
-      if (Math.abs(dx) < 60 || Math.abs(dx) < Math.abs(dy) * 1.6) return;
+  }
-      var order = CATS.map(function (c) { return c[0]; }), i = order.indexOf(catF) + (dx < 0 ? 1 : -1);
+  function slideTo(c, dir) {   /* dir 1 = 往左滑（去下一个），-1 = 往右滑 */
-      if (i < 0 || i >= order.length) return;
+    var pane = $('#pane'), W = $('#sc').clientWidth;
-      catF = order[i]; haptic();
+    paneBusy = true; haptic();
-      var wf = $('#wf'); wf.classList.remove('swl', 'swr'); void wf.offsetWidth; wf.classList.add(dx < 0 ? 'swl' : 'swr');
+    pane.style.transition = 'transform .2s cubic-bezier(.4,0,1,1),opacity .2s';
+    pane.style.transform = 'translateX(' + (-dir * W * .6) + 'px)'; pane.style.opacity = '.15';
+    var bar = $('#cats .bar'); if (bar) bar.style.transition = '';
+    catF = c; renderCats();
+    setTimeout(function () {
       selectTopic('');
+      pane.style.transition = 'none'; pane.style.transform = 'translateX(' + (dir * W * .35) + 'px)';
+      void pane.offsetWidth;
+      pane.style.transition = 'transform .38s cubic-bezier(.2,1.25,.4,1),opacity .25s ease-out';
+      pane.style.transform = 'translateX(0)'; pane.style.opacity = '1';
+      setTimeout(function () { pane.style.transition = ''; pane.style.transform = ''; pane.style.opacity = ''; paneBusy = false; }, 400);
+    }, 200);
+  }
+  (function () {
+    var sx = 0, sy = 0, t0 = 0, mode = '', ok = false, dx = 0, sc = $('#sc'), pane = $('#pane');
+    sc.addEventListener('touchstart', function (e) {
+      var t = e.touches[0]; sx = t.clientX; sy = t.clientY; t0 = Date.now(); mode = ''; dx = 0;
+      ok = !paneBusy && e.touches.length === 1 && !e.target.closest('.tcs,.hot,.cats,#sheet,#note,.nd') && !document.body.classList.contains('lock');
     }, { passive: true });
+    sc.addEventListener('touchmove', function (e) {
+      if (!ok) return;
+      var t = e.touches[0], mx = t.clientX - sx, my = t.clientY - sy;
+      if (!mode) {
+        if (Math.abs(mx) < 8 && Math.abs(my) < 8) return;
+        mode = Math.abs(mx) > Math.abs(my) * 1.2 ? 'h' : 'v';
+        if (mode === 'h') pane.style.transition = 'none';
+      }
+      if (mode !== 'h') return;
+      if (e.cancelable) e.preventDefault();
+      var order = catOrder(), i = order.indexOf(catF), j = i + (mx < 0 ? 1 : -1), W = sc.clientWidth;
+      var has = j >= 0 && j < order.length;
+      dx = has ? mx : mx * .28;   /* 两头没有下一页：阻尼 */
+      pane.style.transform = 'translateX(' + dx + 'px)';
+      pane.style.opacity = String(1 - Math.min(.45, Math.abs(dx) / W * .6));
+      var bs = $('#cats').querySelectorAll('button[data-c]');
+      barBetween(bs[i], has ? bs[j] : null, Math.min(1, Math.abs(dx) / W));
+    }, { passive: false });
+    sc.addEventListener('touchend', function () {
+      if (!ok || mode !== 'h') { ok = false; return; }
+      ok = false;
+      var order = catOrder(), i = order.indexOf(catF), dir = dx < 0 ? 1 : -1, j = i + dir, W = sc.clientWidth;
+      var v = Math.abs(dx) / Math.max(1, Date.now() - t0);
+      if (j >= 0 && j < order.length && (Math.abs(dx) > W * .22 || (v > .5 && Math.abs(dx) > 30))) { slideTo(order[j], dir); return; }
+      /* 不够：弹回 */
+      pane.style.transition = 'transform .35s cubic-bezier(.2,1.3,.4,1),opacity .25s';
+      pane.style.transform = 'translateX(0)'; pane.style.opacity = '1';
+      var bar = $('#cats .bar'); if (bar) bar.style.transition = ''; moveBar();
+      setTimeout(function () { if (!paneBusy) { pane.style.transition = ''; pane.style.transform = ''; pane.style.opacity = ''; } }, 360);
+    }, { passive: true });
+    sc.addEventListener('touchcancel', function () { if (mode === 'h') { pane.style.transform = ''; pane.style.opacity = ''; moveBar(); } ok = false; }, { passive: true });
   })();
   $('#fh').addEventListener('click', function (e) {
     var b = e.target.closest('[data-t]'); if (!b || b.dataset.t === cur) return;

index.html

@@ -7,7 +7,7 @@
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <title>兜爸心选 · 孕育陪伴</title>
-<!-- V:26110215 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26110216 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
 <link rel="stylesheet" href="mama-box.css">
 <link rel="stylesheet" href="night.css">
 <!-- 夜晚模式：首屏绘制前就按上次的选择加 class，避免先白后黑闪一下（开关在首页右上角 #nightBtn，逻辑见 app.js） -->
@@ -2498,7 +2498,7 @@
 <script src="/_bridge/avatar-picker.js?v=26101105"></script>
 <script src="/_bridge/hand-icons.js?v=26101202"></script>
 <script src="js/zodiac-art.js"></script>
-<script src="guangchang/topics.js?v=26110215"></script>
+<script src="guangchang/topics.js?v=26110216"></script>
 <script src="js/app.js"></script>
 <script>
 /* 11-02 首页「孕妈广场」效果稿：地址带 ?gcv=1~6 时，把 #gcHome 换成 demo/gch/vN.css + vN.js 的版式并滚到这一块。
@@ -2506,7 +2506,7 @@
 (function () {
   var m = location.search.match(/[?&]gcv=([1-6])(?:&|$)/);
   if (!m) window.__gcDefault = 1;
-  var n = m ? m[1] : '6', l = document.createElement('link'), s = document.createElement('script'), q = m ? Date.now() : 'v=26110215';
+  var n = m ? m[1] : '6', l = document.createElement('link'), s = document.createElement('script'), q = m ? Date.now() : 'v=26110216';
   l.rel = 'stylesheet'; l.href = 'demo/gch/v' + n + '.css?' + q;
   s.src = 'demo/gch/v' + n + '.js?' + q;
   if (m) s.onload = function () { setTimeout(function () { var el = document.getElementById('gcHome'); if (el) el.scrollIntoView({ block: 'center' }); }, 900); };
@@ -2514,7 +2514,7 @@
   /* 11-02 品牌露出（用户定 4 处都要）：默认加载，?brand=0 可关掉对比；⚠️ 上正式前和 V6 一起并进正式代码，别依赖 demo/ */
   if (!/[?&]brand=0/.test(location.search)) {
     var bl = document.createElement('link'), bs = document.createElement('script');
-    bl.rel = 'stylesheet'; bl.href = 'demo/brand/brand.css?v=26110215'; bs.src = 'demo/brand/brand.js?v=26110215';
+    bl.rel = 'stylesheet'; bl.href = 'demo/brand/brand.css?v=26110216'; bs.src = 'demo/brand/brand.js?v=26110216';
     document.head.appendChild(bl); document.body.appendChild(bs);
   }
 })();

js/app.js

@@ -3,7 +3,7 @@
 (function () {
   'use strict';
   /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26110215';
+  var VER = '26110216';
   const $ = (s, c) => (c || document).querySelector(s);
   const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));