专栏首页蚂蚁开源社区微信小程序实现A-Z快捷导航

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

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

效果

代码

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);
      }
    }
  }
})

本文分享自微信公众号 - 蚂蚁开源社区(mayi_zzfriend),作者:时期

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【开源游戏/射击】愤怒的小红帽

    HTML5愤怒的小红帽小游戏是一款益智休闲射击小游戏,游戏中一支箭,一个便当袋,小红帽能平安的到达老奶奶家吗?赶紧一起护送小红帽去奶奶家吧。完成这个神圣的任务,...

    用户5997198
  • html5 canvas走出迷宫小游戏,代码简洁,适合学习

    html5 canvas 迷宫小游戏源码 小游戏源码,html5走出迷宫小游戏,使用左键、右键和上箭头键移动控制珠子走出迷宫游戏源码

    用户5997198
  • HTML5 canvas 粒子特效显示图像/文字

    本次实例将图片或文字分解成粒子。是先将图片或者文字画在canvas上,然后通过画布对象的getImageData获取到画布上的所有像素点,也就是imageDat...

    用户5997198
  • pseudomap项目源码阅读

    pseudomap项目是一个ES6之前使用Map数据结构的一个工具库,map的特点在于拓展了对象的键只能是字符串的短板,在ES6之前很容易想到使用一个构造函数来...

    用户1515472
  • 移动CRM品类现状调研 | 研报×To B

    分析师:移动信息化研究中心 丁兆增 关键词:CRM,移动信息化研究中心 网址:www.tikehui.com 这里是移动信息化研究中心在 T 客汇上的研报专栏。...

    人称T客
  • Python中如何进行数据分组

    数据分组 根据数据分析对象的特征,按照一定的数值指标,把数据分析对象划分为不同的区间进行研究,以揭示其内在联系和规律性。 cut 函数: cut(series,...

    Erin
  • PyTorch 最新版发布:API 变动,增加新特征,多项运算和加载速度提升

    【新智元导读】PyTorch 发布了最新版,API 有一些变动,增加了一系列新的特征,多项运算或加载速度提升,而且修改了大量bug。官方文档也提供了一些示例。 ...

    新智元
  • k8s源码分析------第三方库etcd client分析

    第一时间获取文章,可以关注本人公众号 月牙寂道长 yueyajidaozhang

    月牙寂道长
  • 腾讯大数据宣布推出第三代高性能计算平台Angel并于2017年全面开源

    12月18日,深圳 - 腾讯大数据宣布推出面向机器学习的第三代高性能计算平台——Angel,并预计于2017年一季度开放其源代码,鼓励业界工程师、学者和技术人员...

    腾讯高校合作
  • 腾讯大数据推出第三代高性能计算平台 Angel,2017年全面开源

    【新智元导读】12月18日腾讯大数据宣布推出面向机器学习的第三代高性能计算平台——Angel,并预计于2017年一季度开放其源代码。腾讯首席执行官马化腾在朋友圈...

    新智元

扫码关注云+社区

领取腾讯云代金券