uniapp学习记录

uniapp中传参的几种方法

从父页面携带参数跳转到子页面，适用于单个参数

传递参数

接收参数

从父页面携带参数跳转到子页面，传递一个对象，或者多个参数

传递参数

接收参数

从子页面携带参数返回到父页面

传递参数

接收参数

获取状态栏的高度

const info = uni.getSystemInfoSync()
			this.statusBarHeight = info.statusBarHeight 

uniapp编译成小程序，获取胶囊的高度并计算头部的高度

// 获取状态栏的高度
const info = uni.getSystemInfoSync()
			this.statusBarHeight = info.statusBarHeight 
// 计算头部的高度
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.navBarHeight = (menuButtonInfo.bottom -info.statusBarHeight +(menuButtonInfo.top - info.statusBarHeight) )

解决uniapp编译成小程序，请求本地资源库渲染背景图不生效的问题

统一管理uniapp的工具api

自定义util.js文件

封装好需要的api函数，例如本地存储和获取数据

main.js 中全局引入

开始使用存储以及获取

解决父组件传值给子组件，子组件直接用props里的接收的数据渲染页面报错

使用计算属性，将接收到的props里的数据return出去，在页面中直接使用计算属性名

使用uniapp开发H5，引入vant ui库踩坑

新建目录wxcomponents，和vant目录

下载最新vant包拷贝里面的dist文件到vant目录下

添加链接描述

引入全局样式文件

pages.js中引入组件

"usingComponents": {
					"van-button": "/wxcomponents/vant/dist/button/index"
				}

解决报错问题

TypeError: Cannot read property ‘split’ of undefined
全局搜索方法，将下面改为如下

使用组件

uniapp 中引用外部字体

下载并引入font字体包

使用字体

font-family: PingFangSC-Regular, PingFang SC;

子组件中无法使用下拉加载更多组件的解决办法

1. 组件代码

<!-- 上拉加载，下拉刷新组件 -->
<template>
	<view class="loading-more">
		<uni-load-more :status="status" :showIcon="true" :contentText="contentText"  ></uni-load-more>
	</view>
</template>

<script>
	export default {
		name:"loadMore",
		props:{
			status:{
				type:String,
				default:'more'
			}
		},
		data() {
			return {
				contentText:{
					contentdown:'显示更多',
					contentrefresh:'加载中...',
					contentnomore:'暂无更多数据了'
				}
			};
		},
	}
</script>

<style lang="scss">
.loading-more {
	// margin-top: 120rpx;
}
</style>

3. 引入组件
   给定一个唯一的时间时时改变子组件的下拉数据

4. 子组件监听并更新数据

5.