首页/ mobileweb/ 用户中心UI设计 · 8 套不同竞品风格的用户中心主页 H5(电商/内容社区/金融钱包/会员/音乐/生活服务/游戏)/ 代码预览

💻 代码预览 · 用户中心UI设计 · 8 套不同竞品风格的用户中心主页 H5(电商/内容社区/金融钱包/会员/音乐/生活服务/游戏)

mw_other · 上传者 驰旭教育
← 返回详情
r113/app.js · 约 2556 字符
1
2(function () {
3  var $ = function (s, r) { return (r || document).querySelector(s); };
4  var $$ = function (s, r) { return Array.prototype.slice.call((r || document).querySelectorAll(s)); };
5
6  // 数据源:优先 fetch json,失败回落 window.__DATA__
7  var DS = {
8    _c: {},
9    get: function (name, cb) {
10      var self = this;
11      if (self._c[name]) { cb && cb(self._c[name]); return; }
12      fetch('data/' + name + '.json')
13        .then(function (r) { return r.json(); })
14        .then(function (d) { self._c[name] = d; cb && cb(d); })
15        .catch(function () {
16          var fb = (window.__DATA__ && window.__DATA__[name]) || null;
17          self._c[name] = fb; cb && cb(fb);
18        });
19    },
20    all: function (names, cb) {
21      var self = this, out = {}, n = names.length, done = 0;
22      names.forEach(function (nm) {
23        self.get(nm, function (d) { out[nm] = d; done++; if (done === n) cb(out); });
24      });
25    }
26  };
27
28  function esc(s) {
29    if (s === null || s === undefined) return '';
30    return String(s).replace(/[&<>"']/g, function (m) {
31      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[m];
32    });
33  }
34  function fmt(n) { n = Number(n) || 0; return n.toLocaleString('zh-CN'); }
35
36  // 轻提示
37  var toastT;
38  function toast(msg) {
39    var t = $('#toast'); if (!t) return;
40    t.textContent = msg; t.className = 'toast show';
41    clearTimeout(toastT);
42    toastT = setTimeout(function () { t.className = 'toast'; }, 1800);
43  }
44  function fail(msg) { toast(msg || '功能演示,敬请期待'); }
45
46  // 通用点击委托:带 data-confirm 的需二次确认;data-toast 直接提示
47  document.addEventListener('click', function (e) {
48    var a = e.target.closest('[data-toast]');
49    if (a) { e.preventDefault(); fail(a.getAttribute('data-toast')); return; }
50    var c = e.target.closest('[data-confirm]');
51    if (c) {
52      e.preventDefault();
53      if (!window.confirm(c.getAttribute('data-confirm'))) return;
54      var to = c.getAttribute('data-confirm-toast');
55      if (to) toast(to);
56    }
57  });
58
59  // 底部 tab 高亮由页面 body[data-page] 控制,这里提供 seg 控件
60  function segValue(group) {
61    var el = document.querySelector('.seg[data-group="' + group + '"].on');
62    return el ? el.getAttribute('data-val') : null;
63  }
64
65  window.$ = $; window.$$ = $$; window.DS = DS; window.esc = esc; window.fmt = fmt;
66  window.toast = toast; window.fail = fail; window.segValue = segValue;
67})();
68