1.使用京东的ui组件库,数据经过,nut-cascader。 使用change函数获取数据时,数据字段会被被修改, 比如nut-name,id两字段会被修改为text, value
2.导航函数传递数据
uni.navigateTo({
url: "/pages/org-construct/detail",
events: {},
// 这里success跟events 同级!!!
success: function(res) {
// 向detail.vue页面传递数据
res.eventChannel.emit('acceptDataFromOpenerPage', {info})
}
})
//接收
onMounted(() => {
const instance = getCurrentInstance().proxy
const eventChannel = instance.getOpenerEventChannel();
// 接收来自index.vue的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
loading.value = false
console.log(data.info)
infoFromUpLevel.value.details = data.info
infoFromUpLevel.value.title = data.info.name
getDetails()
// 此处是异步的,getDetails放外面,可能会在infoFromUpLevel.value 赋值前先执行!!!
})
})
- 滚动加载更多数据
// 监听滚动容器
const scrollContainer = document.querySelector('.constructMain');
const handleScroll = () => {
const scrollTop = scrollContainer.scrollTop || document.body.scrollTop;
const scrollHeight = scrollContainer.scrollHeight;
const clientHeight = scrollContainer.clientHeight;
// console.log(scrollTop,clientHeight, scrollHeight )
// 当滚动到距离底部100px时加载下一页
if (scrollTop + clientHeight >= scrollHeight - 80) {
if ((currentPage * pageSize) < curCascasder.value.children.length) {
currentPage++;
loading.value = true;
renderData(currentPage);
}
}
}
const throttledScroll = throttle(handleScroll, 200);
scrollContainer.addEventListener('scroll', throttledScroll);
- 导入周期函数
import { onReady } from '@dcloudio/uni-app';