|
|
@@ -1,158 +0,0 @@ |
|
|
|
Component({ |
|
|
|
externalClasses: ['i-class'], |
|
|
|
properties : { |
|
|
|
height : { |
|
|
|
type : String, |
|
|
|
value : '300' |
|
|
|
}, |
|
|
|
itemHeight : { |
|
|
|
type : Number, |
|
|
|
value : 18 |
|
|
|
} |
|
|
|
}, |
|
|
|
relations : { |
|
|
|
'../index-item/index' : { |
|
|
|
type : 'child', |
|
|
|
linked(){ |
|
|
|
this._updateDataChange(); |
|
|
|
}, |
|
|
|
linkChanged () { |
|
|
|
this._updateDataChange(); |
|
|
|
}, |
|
|
|
unlinked () { |
|
|
|
this._updateDataChange(); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
data : { |
|
|
|
scrollTop : 0, |
|
|
|
fixedData : [], |
|
|
|
current : 0, |
|
|
|
timer : null, |
|
|
|
startTop : 0, |
|
|
|
itemLength : 0, |
|
|
|
currentName : '', |
|
|
|
isTouches : false |
|
|
|
}, |
|
|
|
methods : { |
|
|
|
loop(){}, |
|
|
|
_updateDataChange( ){ |
|
|
|
const indexItems = this.getRelationNodes('../index-item/index'); |
|
|
|
const len = indexItems.length; |
|
|
|
const fixedData = this.data.fixedData; |
|
|
|
/* |
|
|
|
* 使用函数节流限制重复去设置数组内容进而限制多次重复渲染 |
|
|
|
* 暂时没有研究微信在渲染的时候是否会进行函数节流 |
|
|
|
*/ |
|
|
|
if (len > 0) { |
|
|
|
|
|
|
|
if( this.data.timer ){ |
|
|
|
clearTimeout( this.data.timer ) |
|
|
|
this.setData({ |
|
|
|
timer : null |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
this.data.timer = setTimeout(()=>{ |
|
|
|
const data = []; |
|
|
|
indexItems.forEach((item) => { |
|
|
|
if( item.data.name && fixedData.indexOf( item.data.name ) === -1 ){ |
|
|
|
data.push(item.data.name); |
|
|
|
item.updateDataChange(); |
|
|
|
} |
|
|
|
}) |
|
|
|
this.setData({ |
|
|
|
fixedData : data, |
|
|
|
itemLength : indexItems.length |
|
|
|
}) |
|
|
|
//组件加载完成之后重新设置顶部高度 |
|
|
|
this.setTouchStartVal(); |
|
|
|
},0); |
|
|
|
this.setData({ |
|
|
|
timer : this.data.timer |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
handlerScroll(event){ |
|
|
|
const detail = event.detail; |
|
|
|
const scrollTop = detail.scrollTop; |
|
|
|
const indexItems = this.getRelationNodes('../index-item/index'); |
|
|
|
indexItems.forEach((item,index)=>{ |
|
|
|
let data = item.data; |
|
|
|
let offset = data.top + data.height; |
|
|
|
if( scrollTop < offset && scrollTop >= data.top ){ |
|
|
|
this.setData({ |
|
|
|
current : index, |
|
|
|
currentName : data.currentName |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
getCurrentItem(index){ |
|
|
|
const indexItems = this.getRelationNodes('../index-item/index'); |
|
|
|
let result = {}; |
|
|
|
result = indexItems[index].data; |
|
|
|
result.total = indexItems.length; |
|
|
|
return result; |
|
|
|
}, |
|
|
|
triggerCallback(options){ |
|
|
|
this.triggerEvent('change',options) |
|
|
|
}, |
|
|
|
handlerFixedTap(event){ |
|
|
|
const eindex = event.currentTarget.dataset.index; |
|
|
|
const item = this.getCurrentItem(eindex); |
|
|
|
this.setData({ |
|
|
|
scrollTop : item.top, |
|
|
|
currentName : item.currentName, |
|
|
|
isTouches : true |
|
|
|
}) |
|
|
|
this.triggerCallback({ |
|
|
|
index : eindex, |
|
|
|
current : item.currentName |
|
|
|
}) |
|
|
|
}, |
|
|
|
handlerTouchMove(event){ |
|
|
|
const data = this.data; |
|
|
|
const touches = event.touches[0] || {}; |
|
|
|
const pageY = touches.pageY; |
|
|
|
const rest = pageY - data.startTop; |
|
|
|
let index = Math.ceil( rest/data.itemHeight ); |
|
|
|
index = index >= data.itemLength ? data.itemLength -1 : index; |
|
|
|
const movePosition = this.getCurrentItem(index); |
|
|
|
|
|
|
|
/* |
|
|
|
* 当touch选中的元素和当前currentName不相等的时候才震动一下 |
|
|
|
* 微信震动事件 |
|
|
|
*/ |
|
|
|
if( movePosition.name !== this.data.currentName ){ |
|
|
|
wx.vibrateShort(); |
|
|
|
} |
|
|
|
|
|
|
|
this.setData({ |
|
|
|
scrollTop : movePosition.top, |
|
|
|
currentName : movePosition.name, |
|
|
|
isTouches : true |
|
|
|
}) |
|
|
|
|
|
|
|
this.triggerCallback({ |
|
|
|
index : index, |
|
|
|
current : movePosition.name |
|
|
|
}) |
|
|
|
}, |
|
|
|
handlerTouchEnd(){ |
|
|
|
this.setData({ |
|
|
|
isTouches : false |
|
|
|
}) |
|
|
|
}, |
|
|
|
setTouchStartVal(){ |
|
|
|
const className = '.i-index-fixed'; |
|
|
|
const query = wx.createSelectorQuery().in(this); |
|
|
|
query.select( className ).boundingClientRect((res)=>{ |
|
|
|
this.setData({ |
|
|
|
startTop : res.top |
|
|
|
}) |
|
|
|
}).exec() |
|
|
|
} |
|
|
|
} |
|
|
|
}) |