uniapp开发总结:

50 阅读1分钟

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 赋值前先执行!!!
		})
	})

  1. 滚动加载更多数据
// 监听滚动容器
		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);
  1. 导入周期函数

import { onReady } from '@dcloudio/uni-app';