uniapp 知识点

 自定义导航 在page.json

navigationstyle":"custom"

 navigateTo传参 

页面传参只能onLoad(option)里面拿

px和upx的关系

在750设计图中，1px=1upx

 路由

 navigateBack返回上一页

 

 重定向 其实就是把当前页面干掉了

公共组件和页面共同点

computed,watch,methods都可以使用，组件里面没有onLoad不能用

页面生命周期

• onLoad 一般用于初始化加载页面数据
• onShow 解决页面数据实时更新的需求 个人中心---登录----个人中心
• 先进一个页面是onLoad 然后onShow 去别的页面再回来onLoad就不会再执行了

• onload快还是mounted快？

• onLoad：当页面加载时立即触发，通常用于初始化页面数据或执行一些初始化逻辑。

• mounted：当页面 DOM 渲染完成后触发，此时页面已经挂载完毕，可以安全地操作 DOM。

• 一般来说，onLoad 会比 mounted 更早触发。

• Vue中created、computed、mounted的执行顺序

• 1.是created先执行。因为created是初始化data中的值。因此最先执行;

• 2.然后是 执行computed中的，因为此时html正在被渲染，computed发生在 created 和 mounted 之间,

• 3.最后是mounted()因为这个函数此时已经将页面渲染完成了。

• 4.created>computed>mounted

全局总线  uniapp vue2写法

先写一个bus文件夹 写一个test Bus.js文件

import Vue from "vue"
let bus = new Vue()
export default bus

 局部总线使用方法 

发送

全局直接挂载到main.js

import bus from '@/bus/testBus'; // 引入全局总线
Vue.prototype.$bus = bus; // 将总线挂载到 Vue 原型上

const app = new Vue({
	bus,
	...App
})

使用 要加this.$bus.$on 或者this.$bus.$emit

this.$bus.$on('sendData', (data) => {
				console.log('data.phone',data.phone);
				console.log('data.password',data.password);
				this.model.username=data.phone;
				this.model.password=data.password;
			})

 收到

props vue2  打印 直接打印this.myProp

<template>
  <div>
    <p>接收到的 prop 值为: {{ myProp }}</p>
    <button @click="printProp">打印 Prop</button>
  </div>
</template>

<script>
export default {
  props: {
    myProp: String
  },
  methods: {
    printProp() {
      console.log('接收到的 prop 值为:', this.myProp);
    }
  }
}
</script>

prop vue3打印 this变成prop

import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    myProp: String // 假设接收一个字符串类型的 prop
  },
  setup(props) {
    // 在这里可以访问到传递进来的 prop
    console.log('接收到的 prop 值为:', props.myProp);

    return {
      myProp: props.myProp
    };
  }
});

小程序无法真机模拟 报内存太大

看链接

uni-app官网 (dcloud.net.cn)

 当路由传递对象的时候

1.传递数据

	goMessage() {
				const encodedData = encodeURIComponent(JSON.stringify(this.model));
				uni.navigateTo({
					url: `/pages/message/index?data=${encodedData}`
				});
			},

2.接收数据

onLoad(option) {
			const data = JSON.parse(decodeURIComponent(option.data));
			console.log('data',data);
			if(this.role == 4){this.model = data;}
			this.model = data;
		},

如果页面可以上拉加载和下拉刷新，srcoll-view会不生效。要自定义 我这边就没有用scroll-view仍然还是view做

重点是 我需要监听滑动的位置，一但开始滑动 我的搜索框会立即到最上方

在pages.json

{
			"path": "pages/tabBar/staging/index",
			"style": {
				"navigationBarTitleText": "基金管理",
				"enablePullDownRefresh": true,
				// 当滚动条不足150时候触发
				"onReachBottomDistance": 150
			}
		},

 在页面中

onReachBottom() {


				if (this.queryObj.pageNo * this.queryObj.pageSize >= this.total) {
					return uni.$u.toast('加载完毕');
				}
				// 说明正在请求别的数据 就不在请求了
				if (this.isloading) return;
				this.queryObj.pageNo++;
				this.roleChange();

			},


			onPullDownRefresh() {
				// console.log('下拉刷新');

				// 重置关键
				this.queryObj.pageNo = 1
				this.total = 0;
				this.isloading = false;
				this.manageList1 = [];
				this.manageList2 = [];
				this.model.name = '';
				// 重新发起请求 关闭下拉刷新效果
				this.Search();
				uni.stopPullDownRefresh();
			},
			onPageScroll: function(e) {
				this.handleScroll(e);
			},

开启了enablePullDownRefresh就可以使用自带onPageScroll

onPageScroll: function(e) {
				this.handleScroll(e);
			},





handleScroll(event) {
				const scrollTop = event.scrollTop;
				this.isFixed = scrollTop > 0;

			},

math.floor,math.round,math.ceil的差别

  // console.log("math.floor", Math.floor("1.4")); //1
  // console.log("math.round", Math.round(1.4)); //1
  // console.log("math.ceil", Math.ceil(1.4)); //2

  // console.log("math.floor", Math.floor(1.5)); //1
  // console.log("math.round", Math.round(1.5)); //2
  // console.log("math.ceil", Math.ceil(1.5)); //2

• Math.floor()：

  • 向下取整。即返回小于或等于给定数值的最大整数。
  • 例子：

  • Math.floor(4.9); // 返回 4
    Math.floor(4.1); // 返回 4
    Math.floor(-4.9); // 返回 -5
    

• Math.round()：

  • 四舍五入。返回最接近给定数值的整数，四舍五入规则适用。

  • Math.round(4.5); // 返回 5
    Math.round(4.4); // 返回 4
    Math.round(-4.5); // 返回 -4
    Math.round(-4.6); // 返回 -5
    

• Math.ceil()：

  • 向上取整。即返回大于或等于给定数值的最小整数。
  • Math.ceil(4.1); // 返回 5
    Math.ceil(4.9); // 返回 5
    Math.ceil(-4.1); // 返回 -4
     

 

• Math.floor 总是向下取整，即趋向于较小的整数；
• Math.round 则根据小数部分进行四舍五入；
• Math.ceil 总是向上取整，即趋向于较大的整数。