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

效果

test.gif

代码

slidebar.wxml

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

<view class="dialog" hidden="{{currentKey == '' || closeKeyDialog}}" animation="{{animationData}}" bindtransitionend="_onAnimationend">
  {{currentKey}}
</view>

slidebar.wxss

  /* components/slidebar/slidebar.wxss */
.slidebar{
  position: absolute;
  right: 0rpx;
  height: 98vh;
  width: 60rpx;
  border-radius: 30rpx;
}

.slide-item{
  display: flex;
  justify-content: center;
  justify-items: center;
  height: 3.9vh;
  width: 60rpx;
  font-size: 24rpx;
  color: #222222;
  text-align: center;
  line-height: 3.9vh;
  font-weight: 400;
}

.slide-item .t{
  width: 40rpx;
  height: 40rpx;
  display: inline-block;
}

.slide-item-selected{
  font-weight: 500;
  color: #ffffff;
  background: #07C160;
  border-radius: 50%;
}

.dialog{
  position: absolute;
  top: 50%;
  margin-top: -180rpx;
  left: 50%;
  margin-left: -125rpx;
  width: 250rpx;
  height: 250rpx;
  text-align: center;
  font-size: 72rpx;
  line-height: 250rpx;
  color: #ffffff;
  background: grey;
  border-radius: 15%;
}

slidebar.js

  // components/slidebar/slidebar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    data: {
      type: Array,
      value: [
        { key: "A" },
        { key: "B" },
        { key: "C" },
        { key: "D" },
        { key: "E" },
        { key: "F" },
        { key: "G" },
        { key: "H" },
        { key: "I" },
        { key: "J" },
        { key: "L" },
        { key: "M" },
        { key: "N" },
        { key: "O" },
        { key: "P" },
        { key: "Q" },
        { key: "R" },
        { key: "S" },
        { key: "T" },
        { key: "U" },
        { key: "V" },
        { key: "W" },
        { key: "X" },
        { key: "Y" },
        { key: "Z" }
      ]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    selectedIndex: -1,
    currentKey: "",
    closeKeyDialog: false,
    animationData: {},
  },

  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      this.isTouch = false;
      
    },
    ready: function(){
      this.data.data.forEach((d,i)=>{
        this._wxQueryElementInfo("#item-" + i).then(res => {
          d.top = res[0].top;
          d.left = res[0].left;
          d.height = res[0].height;
          d.width = res[0].width;
        });
      });
      this.animation = wx.createAnimation({
        duration: 1000,
        timingFunction: 'ease',
      });
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行

    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    _onTouchStart: function(e){
      this.isTouch = true;
      this.setData({
        closeKeyDialog: false,
        animationData: this.animation.opacity(1).step().export()
      });
      this._markSlideItemSeleted(e.touches[0].clientY);
    },
    _onTouchMove: function(e){
      this._markSlideItemSeleted(e.touches[0].clientY);
    },
    _onTouchEnd: function(e){
      this.isTouch = false;
      this.setData({
        animationData: this.animation.opacity(0).step().export()
      })
    },
    /**
     * 通过selector查询元素信息
     */
    _wxQueryElementInfo: function(selector){
      return new Promise((resolve, reject)=>{
        var query = wx.createSelectorQuery().in(this);
        query.select(selector).boundingClientRect();
        query.selectViewport().scrollOffset();
        query.exec(function (res) {
          resolve(res);
        });
      });
    },
    /**
     * 根据y的位置标记SlideItem的selected状态
     */
    _markSlideItemSeleted: function(y){
      for(var i=0; i<this.data.data.length; i++){
        var d = this.data.data[i];
        if (y >= d.top && y <= d.top + d.height) {
          if(this.data.selectedIndex == i){
            return;
          }
          this._setSlideItemSelectStatus(d,i);

          console.log("当前选中=>" + d.key);
          this.triggerEvent("selected",d);
          return;
        }
      }
    },
    _setSlideItemSelectStatus(d,i){
      d.selected = true;
      if (this.data.selectedIndex != -1) {
        this.data.data[this.data.selectedIndex].selected = false;
      }

      this.setData({
        data: this.data.data,
        currentKey: d.key,
        selectedIndex: i
      });
    },
    _onAnimationend: function(e){
      if (this.isTouch){
        return;
      }
      console.log("动画结束")
      this.setData({
        closeKeyDialog: true
      });
    },
    /**
     * 通过key更新slidebar选择的item
     */
    updateItemSelectedByKey: function(key){
      this.data.data.forEach((d,i)=>{
        if(d.key == key){
          this._setSlideItemSelectStatus(d,i);
          return;
        }
      });
    },
    /**
     * 通过index更新slidebar选择的item
     */
    updateItemSelectedByIndex: function(index){
      if(index > 0 && index < this.data.data.length){
        this._setSlideItemSelectStatus(this.data.data[index], index);
      }
    }
  }
})