自定义左侧导航栏,在页面中可以正常实现,把代码复制到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()
},
}
})