前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序实现A-Z快捷导航

微信小程序实现A-Z快捷导航

作者头像
用户5997198
发布2019-11-15 15:43:46
1.3K0
发布2019-11-15 15:43:46
举报
文章被收录于专栏:蚂蚁开源社区
微信小程序实现A-Z导航的Slidebar

效果

代码

slidebar.wxml

代码语言:javascript
复制
<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

代码语言:javascript
复制
  /* 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);
      }
    }
  }
})
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-11-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 蚂蚁大喇叭 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档