uniapp项目小逻辑

1.获取当前路由

var pages = getCurrentPages();
this.routes = pages[pages.length - 2].route;

 2.搜索框输入相同的关键字字体相同，颜色会有改变

<text v-for="(ite,ind) in item.split('')" :key="ind" :style="setColor(ite)">
    {{ite}}
</text>
//item是一个字符串，需要将其转化为数组才可以遍历循环，通过在style绑定的事件来形成字体颜色的不同
methods：{
    setColor(ite){
        if(this.value.indexOf(ite) != -1){
               return "background: yellow"
        }
    }

}
//this.value是input输入框的值，通过if来判断是不是相同，是的话返回下标

3. 简述rpx，px，em，rem，%，vh，vw的区别

    rpx    相当于把屏幕宽度分为750份，1份就是1rpx
    px    绝对单位，页面按精确像素展示
    em    相对单位，相对于它的父节点字体进行计算
    rem    相对单位，相对根节点html的字体大小来计算
    %    一般来说就是相对于父元素
    vh    视窗高度，1vh等于视窗高度的1%
    vw    视窗宽度，1vw等于视窗宽度的1%

4.下拉框简化代码

<scroll-view class="scroll-view" scroll-y="true" refresher-enabled="true" style="height: 100%;"
			refresher-background="rgb(244,244,244)" :refresher-triggered="triggered" @refresherpulling="onPulling"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">

triggered: false, // 下拉刷新触发

// 自定义下拉刷新控件被下拉
			onPulling(e) {
				// console.log('onPulling');
			},
			// 自定义下拉刷新被触发
			async onRefresh() {
				if (this._freshing) return;
				this.triggered = true;
				this._freshing = true;
				await setTimeout(async () => {
					// await this.getInfo();
					this.triggered = false;
					this._freshing = false;
				}, 1000);
			},
			// 自定义下拉刷新被复位
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				this.triggered = false; // 需要重置
				console.log('onRestore');
			},
			// 自定义下拉刷新被中止
			onAbort() {
				console.log('onAbort');
			},

5.输入金额数量，对输入款做限制

//输入内容验证
		oninput(e) {
			this.$nextTick(() => {
				let val = e;
				val = val.replace(/[^\d.]/g, ''); //清除"数字"和"."以外的字符
				val = val.replace(/\.{2,}/g, '.'); //只保留第一个. 清除多余的
				val = val.replace(/^0+\./g, '0.');
				val = val.match(/^0+[1-9]+/) ? (val = val.replace(/^0+/g, '')) : val;
				val = val.match(/^\d*(\.?\d{0,2})/g)[0] || '';
				this.value = val;
			});
		},

6.搭建node.js

1.npm install express-generator -g 全局安装

2.进入项目目录

        express --view=ejs server

3.npm start 启动

每次写完请求需要重新启动。默认接口localhost:3000

7.swiper的默认高度值

let view = uni.createSelectorQuery().select('.home')

view.boundingClientRect(data=>{

        console.log(data)

}).exec()

: style =" 'height:'+clentHeight+'px;' "

8.当页面中swiper占据了整个屏幕时，导致页面无法上下拉动，只需在里面配置scroll-view即可

  <swiper-item>
 
         <scroll-view scroll-y="true" style="height: 1300rpx;">
         
         </scroll-view>
  </swiper-item>

9.swiper的默认高度值  修改高度的进阶

onReady() {
			let _this = this;
			uni.getSystemInfo({
				//调用uni-app接口获取屏幕高度
				success(res) {
					//成功回调函数
					let wHeight = res.windowHeight; //windoHeight为窗口高度，主要使用的是这个
					let titleH = uni.createSelectorQuery().select('.scroll-view'); //想要获取高度的元素名（class/id）
					titleH
						.boundingClientRect(data => {
							_this.swiperHeight = wHeight - data.top -
								10; //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
						})
						.exec();
				}
			});
			console.log(this.swiperHeight);


		},

swiperHeight: '',

:style="{ height: swiperHeight + 'px' }"

10.选择时间周期筛选

data:

itemList: [],
				itemList1:[],
				startDate:"",
				endDate:"",

methods:

this.itemList = res.data.data;
					this.itemList1=this.itemList

//点击选择日期---触发点击事件
			change(e) {
				console.log(e);
				this.startDate = e.startDate + ' 00:00:00';
				this.endDate = e.endDate + ' 24:00:00';
				console.log(this.startDate);
				this.itemList = this.itemList1.filter(item => {
					return item.paymentTime > this.startDate && item.paymentTime < this.endDate
				})
				console.log(this.itemList);
			},

11.修改uniapp组件的样式需要在前面写/deep/