这是我在网上找来一个 demo 但是我不知道如何吧 data.js 里面的数据换成我自己本地的列表数据
js脚本文件(function (factory) { if (typeof module === 'object' && module.export) { module.export = factory() } else if (typeof define === 'function' && (define.amd || define.cmd)) { define([], factory) } else if (typeof window !== 'undefined') { window.IndexSidebar = factory() }})//构造字母导航组件(function () {var defaultOptions = { chars: '*ABCDEFGHIJKLMNOPQRSTUVWXYZ#', isAdjust: true, //是否是自动调整高度 offsetTop: 70, offsetBottom: 10, lineScale: 0.7, charOffsetX: 80, charOffsetY: 20}function IndexSidebar(options) { options = options || {} //遍历缺省选项逐一处理 for (var k in defaultOptions) { if (defaultOptions.hasOwnProperty(k)) { //未给出选项值时使用缺省选项值 options[k] = options[k] || defaultOptions[k] } } this.options = options this.initialize(options)}//特定事件触发时，调用传入的回调函数并传入事件数据IndexSidebar.prototype.initialize = function (options) { //实现事件监听 var chars = options.chars var el = document.createElement('div') el.className = 'index-sidebar-container' el.innerHTML = this.render(chars) document.body.appendChild(el) this.el = el this.elChar = el.querySelector('.current-char') this.chars = chars if (options.isAdjust) { this.adjust(options) } this.initEvents(options)}IndexSidebar.prototype.render = function (chars) { return ( '' + '
' + [].map.call(chars, function (ch) { return '
- ' + ch + '' }).join('') + '
' )}//实现手指拖动更新索引字母IndexSidebar.prototype.initEvents = function (options) { var view = this var el = this.el var elChar = this.elChar var chars = this.chars var boxRect = el.getBoundingClientRect() var boxHeight = boxRect.height var boxClientTop = boxRect.top var charOffsetX = options.charOffsetX var charOffsetY = options.charOffsetY var touching = false var lastChar // touch events if ('ontouchstart' in document) { el.addEventListener('touchstart', function (e) { if (!touching) { e.preventDefault() var t = e.touches[0] start(t.clientX, t.clientY) } }, false) //拖动过程中手指可能会移出导航栏，所以输在document 上监听 document.addEventListener('touchmove', function handler(e) { if (touching) { e.preventDefault() var t = e.touches[0] move(t.clientX, t.clientY) } }, false) document.addEventListener('touchend', function (e) { if (touching) { e.preventDefault() end() } }, false) } // mouse events else { el.addEventListener('mousedown', function (e) { if (!touching) { e.preventDefault() start(e.clientX, e.clientY) } }) document.addEventListener('mousemove', function (e) { if (touching) { e.preventDefault() move(e.clientX, e.clientY) } }) document.addEventListener('mouseup', function (e) { if (touching) { e.preventDefault() end() } }) }//实现实现索引字符更新 function start(clientX, clientY) { touching = true elChar.style.display = 'block' move(clientX, clientY) } function move(clientX, clientY) { var offset = calcRelativePosition(clientY) var percent = offset / boxHeight var ch = getPositionChar(percent) updateChar(clientX, clientY, ch) } function end() { touching = false elChar.style.display = 'none' } function updateChar(clientX, clientY, ch) { var x = Math.max(clientX, charOffsetX) var yMin = boxClientTop var yMax = window.innerHeight - charOffsetY var y = Math.min(Math.max(clientY, yMin), yMax) elChar.textContent = ch elChar.style.left = x + 'px' elChar.style.top = y + 'px' if (ch && lastChar !== ch) { lastChar = ch view.trigger('charChange', ch) } }//计算出手指位置在组件的相对高度 function calcRelativePosition(clientY) { var y = clientY - boxClientTop if (y < 0) { y = 0 } else if (y > boxHeight) { y = boxHeight } return y } // yPercent {Number} in range of [0, 1] function getPositionChar(yPercent) { var min = 1 var max = chars.length var index = Math.ceil(yPercent * max) if (index < min) { index = min } else if (index > max) { index = max } return chars[index - 1] }}IndexSidebar.prototype.adjust = function (options) { var charCount = options.chars.length var expectHeight = window.innerHeight - options.offsetTop - options.offsetBottom var expectLineHeight = expectHeight / charCount var expectFontSize = expectLineHeight * options.lineScale var style = this.el.querySelector('ul').style style.lineHeight = expectLineHeight + 'px' style.fontSize = expectFontSize + 'px'}/* Event Emitter API *///触发特定事件，并给出事件数据供监听的回调函数使用IndexSidebar.prototype.trigger = function (event, data) { var listeners = this._listeners && this._listeners[event] if (listeners) { listeners.forEach(function (listener) { listener(data) }) }}//特定事件触发时，调用传入的回调函数并传入事件数据IndexSidebar.prototype.on = function (event, callback) { this._listeners = this._listeners || {} var listeners = this._listeners[event] || (this._listeners[event] = []) listeners.push(callback)}// 解除事件监听IndexSidebar.prototype.off = function (event, callback) { var listeners = this._listeners && this._listeners[event] if (listeners) { var i = listeners.indexOf(callback) if (i > -1) { listeners.splice(i, 1) if (listeners.length === 0) { this._listeners[event] = null } } }}return IndexSidebar Index Sidebar - luobotang |
天盟APP下载
