uniapp项目技巧总结

uniApp项目开发总结

一分页功能

1. vue代码

<view class="chy-main-box">
			<view class="chy-list">
				<u-list @scrolltolower="scrolltolower">
					<u-list-item v-for="(item, index) in contractList" :key="index">
						<view class="chy-item">
							<view class="item-title-box">
								<view class="item-title-box-left">{{item.templateName}}</view>
								<view class="item-title-box-right">
									<u-button type="primary" :text="stateFormatter(item)" class="custom-style"
										size="mini"></u-button>
								</view>
							</view>
							<view class="item-box-info">
								<view class="item-box-line">
									<view class="box-line-left">合同对象：</view>
									<view class="box-line-right">{{item.objectName}}</view>
								</view>
								<view class="item-box-line">
									<view class="box-line-left">合同编号：</view>
									<view class="box-line-right">{{item.contractCode}}</view>
								</view>
								<view class="item-box-line">
									<view class="box-line-left">签约方：</view>
									<view class="box-line-right">{{item.signObjectJson}}</view>
								</view>
								<view class="item-box-line">
									<view class="box-line-left">发起时间：</view>
									<view class="box-line-right">{{item.createTime}}</view>
								</view>
								<view class="item-box-line">
									<view class="box-line-left">完成时间：</view>
									<view class="box-line-right">{{item.completeTime||''}}</view>
								</view>
								<view class="chy-btn-list">
									<view class="btn-left">

									</view>
									<view class="btn-right">
										<u-button type="primary" :plain="true" text="重新发起" class="custom-style"
											shape="circle" size="small" v-if="
										  item.contractState == 3 ||
										  item.contractState == 5 ||
										  item.contractState == 7
										" @click="handleRelaunch(item)">
										</u-button>
										<u-button type="error" :plain="true" text="删除" class="custom-style"
											shape="circle" size="small" v-if="
                    item.contractState == 3 ||
                    item.contractState == 5 ||
                    item.contractState == 7
                  " @click="handleDelete(item)">
										</u-button>
										<u-button type="primary" :plain="true" text="催办" class="custom-style"
											shape="circle" size="small" v-if="
                    item.contractState == 0 ||
                    item.contractState == 1 
                  " @click="handleReminder(item)">
										</u-button>
										<u-button type="primary" :plain="true" text="撤回" class="custom-style"
											shape="circle" size="small" v-if="
										  item.contractState == 0 ||
										  item.contractState == 1 
										" @click="handleWithdrawal(item)">
										</u-button>

									</view>

								</view>
							</view>
						</view>
					</u-list-item>
				</u-list>

			</view>
		</view>

2. js 代码

   	contractList: [], //合同列表
   				total: 0,
   				pageNum: 1,
   				queryParams: {
   					current: 1,
   					size: 10,
   					signObjectJson: undefined,
   					templateName: undefined,
   					contractState: undefined,
   					objectName: undefined,
   					queryCreateTime: undefined,
   					completeTime: undefined,
   					queryCreateTimeTemp: undefined,
   					completeTimeTemp: undefined,
   					keyword: undefined
   				},
                                      
   

   方法

   	getList() {
   				let that = this;
   				if (that.queryParams.queryCreateTimeTemp) {
   					this.queryParams.queryCreateTime = this.dateToTimestamp(
   						that.queryParams.queryCreateTimeTemp
   					);
   				}
   				if (that.queryParams.completeTimeTemp) {
   					this.queryParams.completeTime = this.dateToTimestamp(
   						that.queryParams.completeTimeTemp
   					);
   				}
   				//console.log(that.total,"that.queryParams.current",that.customerManageList.length)
   				//有已的数据少于总条数
   				if (that.total > that.contractList.length) {
   					uni.showLoading({
   						title: '加载中'
   					});
   					that.queryParams.size = 10;
   					that.pageNum = that.pageNum + 1;
   					that.queryParams.current = that.pageNum;
   					list(that.queryParams).then((response) => {
   						if (response.resultStateVo.code == '200') {
   							if (response.rows) {
   								that.contractList.push(...response.rows);
   								that.total = response.total;
   							}
   
   						}
   						uni.hideLoading();
   					});
   				} else if (that.total == 0) {
   					uni.showLoading({
   						title: '加载中'
   					});
   					//首次加载
   					that.queryParams.size = 10;
   					that.queryParams.current = 1
   					list(that.queryParams).then((response) => {
   						if (response.resultStateVo.code == '200') {
   							if (response.rows) {
   								that.contractList.push(...response.rows);
   								that.total = response.total;
   							}
   
   						}
   						uni.hideLoading();
   					});
   				}
   
   			},
   			scrolltolower() {
   				this.getList();
   			},
   

   3. css 代码

      .chy-main-box {
      		padding: 20rpx 0;
      		margin-bottom: 160rpx;
      
      		.chy-list {
      
      			.chy-item {
      				background: #ffffff;
      				border-radius: 20rpx;
      				width: 100%;
      				min-height: 450rpx;
      				height: auto;
      				border-bottom: 1px solid #EAEAEA;
      				padding:  20rpx;
      				.item-title-box {
      					margin: 10rpx 0;
      					display: flex;
      					justify-content: space-between;
      					align-items: center;
      
      					.item-title-box-left {
      						flex: 1;
      						font-size: 32rpx;
      						font-weight: bold;
      					}
      
      					.item-title-box-right {
      						width: 120rpx;
      						padding: 20rpx;
      					}
      				}
      
      				.item-box-info {
      					padding: 10rpx;
      
      					.item-box-line {
      						padding: 10rpx 0;
      						display: flex;
      						justify-content: space-between;
      						align-items: center;
      						font-size: 28rpx;
      
      						.box-line-left {
      							width: 160rpx;
      						}
      
      						.box-line-right {
      							flex: 1;
      						}
      					}
      
      					.chy-btn-list {
      						padding-top: 10rpx;
      						display: flex;
      						justify-content: space-between;
      						align-items: center;
      
      						.btn-left {
      							flex: 3;
      						}
      
      						.btn-right {
      							flex: 7;
      							display: flex;
      							justify-content: space-between;
      							align-items: center;
      
      							.custom-style {
      								width: 220rpx;
      								height: 60rpx;
      								border-radius: 20rpx;
      							}
      						}
      
      					}
      				}
      			}
      		}
      	}
      

      效果图

二 uniApp v-show 无效

解决方法

<view class="chy-query-box-test" :style="showQueryDown?'':'display:none'"></view>

三 输入框限制两位小数方法

vue代码

	<input class="uni-input" type="digit" v-model="signingForm[item.key][item.key]"
								@input="checkNum($event,item.key)" :placeholder="`请输入${item.label}`" />
	<view class="chy-big-Num">

js代码

		checkNum(e, item) {
				let that = this;
				e.detail.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0];
				this.$nextTick(function() {
					try {
						// item = e.detail.value;
						that.signingForm[item][item] = e.detail.value;
					} catch (eb) {
						uni.showToast({
							title: '数字格式输入不正确！',
							icon: 'none'
						});
					}
				});
			},

四 自定义日期组件

vue 代码

<template>
	<view>
		<view>
			<u--input v-model="newDate" border="none" :placeholder="chyPlaceholder" @focus="selectShow">
			</u--input>
		</view>
		<u-calendar :show="chyDateShow" :mode="mode" @confirm="confirm" :monthNum="chyMonthNum" :minDate="minDate" @close="chyClose" >
		</u-calendar>
	</view>
</template>

<script>
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() - 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	import props from './props.js'
	export default {
		name: 'chy-date-select',
		data() {
			return {
				newDate: this.selectDate,
				mode: 'single',
				minDate: `${year}-${month}-${date + 10}`, //设置最小值范围
				chyDateShow:false,
			}
		},
		mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
		methods: {
			selectShow() {
				//this.$emit("openShow",true);
				this.chyDateShow=true;
			},
			confirm(e) {
				this.chyDateShow = false;
				//console.log(e, "console.log(e)");
				this.newDate = e[0];
				this.$emit("selectDateValue", this.newDate)
			},
			chyClose(){
				this.chyDateShow = false;
			}
		},
	}
</script>

<style>
</style>

js 代码

export default {
    props: {
        // 提示占位符   
		   chyPlaceholder:{
			   type: [String],
			   default: "请输入日期"
		   },
		   //最长日期
		   chyMonthNum:{
			   type: [Number,String],
			   default: 24
		   },
		   selectDate:{ //选中日期
			   type: [String],
			   default: ""
		   }
    }
}

组件使用

			<u-form-item :label="item.label" prop="item.key" borderBottom :required="item.required"
							v-if="item.type==3">
							<chy-date-select :chyPlaceholder="`请输入${item.label}`"
								:selectDate="signingForm[item.key][item.key]"
								@selectDateValue="(chyValue)=>{signingForm[item.key][item.key]=chyValue}">
							</chy-date-select>

						</u-form-item>

关键代码是这个@selectDateValue="(chyValue)=>{signingForm[item.key][item.key]=chyValue}"

五 复制粘贴

	//复制链接
			submitReminderCopy(url) {
				uni.setClipboardData({
					data: url,
					success: function() {
						console.log('success');
					}
				});
			},

			//粘贴
			getCopy() {
				uni.getClipboardData({
					success: function(res) {
						console.log(res.data);
					}
				});
			},

如果是整个区域的显示和隐藏不能使用block,必须使用view 组件

页面强制更新使用

this.$forceUpdate();

在小程序中undefined 是没有效果，只能使用null和‘’代替