收藏
回答

右侧内容滚动时,左侧菜单没有切换?

自定义左侧导航栏,在页面中可以正常实现,把代码复制到components组件中,右侧内容滚动时,左侧菜单没有切换,console.log(rects)打印为空,这是什么情况?求大师指点

const list = require('../../utils/util.js')
Component({
  /**
   * 组件的属性列表
   */
  properties: {


  },


  /**
   * 组件的初始数据
   */
  data: {
    height: 0//页面高度 rpx
    ratio: 0//rpx,px转化比
    tid: 1,
    lid: 1,
    heightArray: [], // 存储右侧各区块高度
    isSelected: false,
    selectedCount: 0,
    selectedList: [],
    sectionHeights: [],
    list:list
  },
  lifetimes: {
    ready() {
      this.pageheight();
      this.calculateHeights();
      // setTimeout(() => this.calculateHeights(), 500)
    }
  },


  /**
   * 组件的方法列表
   */
  methods: {
/**
   * 获取页面高度 
   */
  pageheight() {
    const windowInfo = wx.getWindowInfo()
    const btnGroupHeight = 120 // 底部按钮高度(rpx)
    const ratio = 750 / windowInfo.windowWidth
    const height = (windowInfo.windowHeight * ratio) - btnGroupHeight
    console.log(height)
    this.setData({
      height: height, // 新高度字段
      ratio: ratio
    })
  },
  /**
   * 获取元素距离顶部的位置
   */
  calculateHeights() {
    const that = this;
    const query = wx.createSelectorQuery() ;//创建节点查询器
    console.log(query)
    query.selectAll('.right-group').boundingClientRect(rects => {
      console.log(rects)
      const systemInfo = wx.getWindowInfo();
      const topOffset = 170 / that.data.ratio; // 顶部固定区域高度
      console.log(topOffset)
      const heights = rects.map(rect =>
        Math.floor(rect.top - topOffset + systemInfo.windowHeight * that.data.ratio / 750)
      );
      console.log(heights)
      that.setData({
        heightArray: heights
      });
    }).exec();
  },


  /**
   * 左侧点击事件
   */
  changeTab(e) {
    console.log(e)
    const that = this;
    const id = e.currentTarget.dataset.id;
    that.setData({
      tid: id,
      lid: id
    })
  },
  /**
   * 滚动监听
   */ 
  scrollFloor(e) {
    const scrollTop = e.detail.scrollTop
    const { heightArray } = this.data
    
    for (let i = 0; i < heightArray.length; i++) {
      if (scrollTop < heightArray[i]) {
        this.setData({
          tid: this.data.list[i > 0 ? i - 1 : 0].id ,
        })
        break
      }
    }
  },




   /**
   * 选中事件
   */
  toggleSelection(e) {
    console.log(e)
    const { catindex, subindex, posindex } = e.currentTarget.dataset
    console.log({ catindex, subindex, posindex })
    // 边界检查
    if (
      catindex < 0 ||
      catindex >= this.data.list.length ||
      subindex < 0 ||
      !this.data.list[catindex]?.listtitle ||
      subindex >= this.data.list[catindex].listtitle.length
    ) return
    const path = `list[${catindex}].listtitle[${subindex}].position[${posindex}].selected`
    const isSelected = !this.data.list[catindex].listtitle[subindex].position[posindex].selected
    const selectedItem = {
      name: this.data.list[catindex].listtitle[subindex].position[posindex].name,
      catindex,
      subindex,
      posindex
    }
    let selectedList = [...this.data.selectedList]
    if (isSelected) {
      if (selectedList.length >= 5) {
        wx.showToast({ title: '最多选择5项', icon: 'none' })
        return
      }
      selectedList.push(selectedItem)
    } else {
      selectedList = selectedList.filter(item => 
        !(item.catindex === catindex && item.subindex === subindex && item.posindex === posindex)
      )
    }
    this.setData({
      [path]: isSelected,
      selectedCount: selectedList.length,
      selectedList
    })
  },


  // 删除事件
  removeBenefit(e) {
    console.log(e)
    const { catindex, subindex, posindex } = e.currentTarget.dataset
    console.log({ catindex, subindex, posindex }) 
    // 更新列表状态
    const path = `list[${catindex}].listtitle[${subindex}].position[${posindex}].selected`
    const selectedList = this.data.selectedList.filter(item => 
      !(item.catindex === catindex && item.subindex === subindex && item.posindex === posindex)
    )
    this.setData({
      [path]: false,
      selectedCount: selectedList.length,
      selectedList
    })
  },
  // 新增确认按钮点击事件
  confirmSelection() {
    const pages = getCurrentPages()
    const prevPage = pages[pages.length - 2// 获取A页面实例
    
    // 构造选中职位名称数组
    const selectedJobs = this.data.selectedList.map(item => item.name)
    
    // 更新A页面数据
    prevPage.setData({
      'formData.jobs': selectedJobs,
      'formData.jobCount': selectedJobs.length
    })
    
    // 返回A页面
    wx.navigateBack()
  },
  }
})
回答关注问题邀请回答
收藏

2 个回答

  • xxx
    xxx
    05-30

    05-30
    有用 1
    回复 1
    • 蓝天☁
      蓝天☁
      发表于移动端
      05-30
      多谢了
      05-30
      回复
  • 智能回答 智能回答 该问答由AI生成
    05-30
    有用
登录 后发表内容