微信小程序实现A-Z导航的Slidebar

微信小程序实现A-Z导航的Slidebar

效果

代码

slidebar.wxml

<view id="s-bar"class"slidebar"bindtouchstart"_onTouchStart"bindtouchmove"_onTouchMove"bindtouchend"_onTouchEnd">
  wx:for"{{data}}""slide-item""item-{{index}}"wx:key"{{index}}">
>{{item.key}}</text>
</view>

animation"{{animationData}}"bindtransitionend"_onAnimationend">
</view>

slidebar.wxss

.slidebar{
  right 0rpx;
  width60rpx;
}

  display flex;
items3.9vh  fontsize24rpx  color #222222;
  lineheight;
}

40rpx inlineblock}

500#ffffff;
50%;

  top%;
left125rpx250rpx72rpx#ffffff;
}
// components/slidebar/slidebar.js
Component({
   * 组件的属性列表
  properties{
      type Array,
        { key "A"},
"C""E""G""I""J"      ]

   * 组件的初始数据
  data    selectedIndex1    currentKey""    closeKeyDialogfalse    animationData{},0);">  lifetimes    attachedfunction(){
      thisisTouch =dataforEach((di)=>{

});
        duration1000        timingFunction'ease'});
/**
   */
truesetData({
});
    _onTouchMove){
    _onTouchEnd){
    /**
     */
var query createSelectorQueryin();
selectViewport().scrollOffset();
          resolve});
     */
for=;<length++){
ify >= d&& y <=          ifselectedIndex ==){
_setSlideItemSelectStatus);

}

        data        currentKey        selectedIndex i
      console"动画结束")
/**
     */
)=>{
);
    updateItemSelectedByIndexindexindex >0 index <],0);"> index})