微信小程序树状菜单目录变体

2019独角兽企业重金招聘Python工程师标准>>>

效果图:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

html:

  
    {{item.name}}
    
  
  
    绑定碎片（3120)
      碎片练习
  

css:

/*灰色列表  */
.typelist{
  position: relative;
  background-color: #f2f2f2;
  height: 44px;
  line-height: 44px;
  width: 630rpx;
   margin: 0 auto; 
  margin-top: 10px;
  border-radius: 10rpx;
   padding: 0 30rpx; 
  font-size: 14px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
/*选中样式  */
.selected{
  opacity: 1;
  color: #fff;
  z-index: 10;
}
/*scroll下移  */
.searchbar-result{
  position: absolute;
  transition-duration: .8s;
  -webkit-transition-duration: .8s;
}
.animation{
  opacity: 0.6;
  background-color: #09bb07; 
  transition-duration: .8s;
  -webkit-transition-duration: .8s;
}

js:

// pages/memorycenter-list/memorycenter-list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {[
    // 选中的
    selectedHidden: true,
    animationHidden: true,
    selectedItem: {},
    // 几个结果
    resultHidden: true,
    datalists: [],
    dataArray: {
      "id": 1, "name": "语言", "num": 0, "level": 0,
      "children": [
        {
          "id": 11, "name": "汉语", "num": 2, "level": 1,
          "children": [
            {
              "id": 111, "name": "高中牛津", "num": 2, "level": 2,
              "children": [
                { "id": 1111, "name": "第一章", "num": 2, "level": 3, "children": [] },
                { "id": 1112, "name": "第二章", "num": 3, "level": 3, "children": [] },
                { "id": 1113, "name": "第三章", "num": 4, "level": 3, "children": [] }
              ]
            },
            { "id": 112, "name": "新概念英语", "num": 3, "level": 2, "children": [] },
            { "id": 113, "name": "最美的英文文章", "num": 4, "level": 2, "children": [] }
          ]
        },
        { "id": 12, "name": "英语", "num": 3, "level": 1, "children": [] },
        { "id": 13, "name": "俄语", "num": 4, "level": 1, "children": [] }
      ]
    },
    currentTop: 0,
    scrollTop: 48
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 初始赋值
    this.setData({
      datalists: this.data.dataArray.children
    });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },
  // 选择一列
  selectList: function (e) {
    let top = 38;
    if (e.currentTarget.dataset.item.level != 1) {
      top = 96;
    }
    this.setData({
      currentTop: e.currentTarget.offsetTop + top,
      selectedHidden: false,
      animationHidden: true,
      selectedItem: e.currentTarget.dataset.item
    });

    this.setData({
      currentTop: 48,
      animationHidden: false,
      scrollTop: 96
    });
    setTimeout(res => {
      this.setData({
        datalists: e.currentTarget.dataset.item.children
      });
    }, 200);
  },
  // 列表返回上一级
  backTap: function () {
    if (this.data.selectedItem.level == 1) {
      this.setData({
        scrollTop: 48,
        selectedHidden: true,
        datalists: this.data.dataArray.children
      })
    } else {
      let id = this.data.selectedItem.id;
      let tempData = this.findParent(this.data.dataArray, id);
      this.setData({
        datalists: tempData.children,
        selectedItem:tempData
      })
    }
  },
  //递归找父级
  findParent: function (data, id) {
    for (let i = 0; i < data.children.length; i++) {
      if (data.children[i].id == id) {
        return data;
      } else {
        let childrenData = this.findParent(data.children[i], id);
        if (childrenData != null) {
          return childrenData;
        }
      }
    }
    return null;
  }
})

 

转载于:https://my.oschina.net/glysunset/blog/1826084