uniapp框架学习

uniapp框架学习

uniapp官网：https://uniapp.dcloud.io/

HBuilderX：官方IDE下载地址

输出为集合形式：

​

v-for遍历数组的两种方式：

<view v-for="(leftItem, key) in left" :key="key">{{ leftItem.text }}</view>
			</view>
			<view class="main_part_value">
				<view v-for="(rightItem, key) in right" :key="key">{{ rightItem.text }}元</view>
			</view>
			export default {
			return{
			left:[
			{ text: '1'},
			{ text: '2'},
			{ text: '3'},
			],
				right: [
				{text:'cherry'},
				{text:'cherry'},
				{text:'cherry'}
				]
			 
			}
			

<view class="main_part_view" v-for="(row,index) in listData" :key="key" style="display: flex;">
				<view class="main_part_title">{{row.title}}</view>
				<view class="main_part_value">{{row.value}}元</view>
			</view>
			
			return {
			listData:[
					{
						title:'岗位工资',
						value:'1000',
						key:'money'
					},
					{
					
					}
					],
			}

时间选择器：

如果要显示栏从下面弹出来，拥有选择按钮能够确定完成

设置年的
<view class="pivker_view">
				<picker @change="bindPickerChange" id="year" :value="indexYears" :range="years">
					<view class="uni-input">{{years[indexYears]}}</view>
				</picker>
			</view>
设置月的
			<view class="pivker_view">
				<picker @change="bindPickerChange" id="months" :value="indexMonths" :range="months">
					<view class="uni-input">{{months[indexMonths]}}</view>
				</picker>
				<image mode="widthFix" class="uni-tip" src="../../static/salary.png"></image>
			</view>
	
    
    
    <script>
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			for (let i = 2011; i <= date.getFullYear(); i++) {
				years.push(i+'年')
			}

			for (let i = 1; i < 13; i++) {
				months.push(i+'月')
			}
			return {
				years,
				year,
				months,
				month,
				indexYears: 0,
				indexMonths: 0,
				value: [9999, month - 1],
				}

		},
		methods: {
			bindPickerChange: function(e) {
				/* console.log(e) */
				if (e.target.id === "year") {
					this.indexYears = e.target.value
				} else if (e.target.id === "months") {
					this.indexMonths = e.target.value
				}
			},
			}
</script>
然后在style标签中设置需要的属性。

margin:上下的，左右的；
line-height:设置行高；
border-radius:设置边角的弧度。

flex布局

flex布局也就是跨平台布局，使用flex布局可以进行不同平台的使用，可以在任意一个平台开发代码，最后每个平台都适用：一维的布局模型；

flex布局上决定主轴方向上子项的对齐方式的属性是：justify-content；

可以设置的属性值包括：

flex-start：子项都去起始位置对齐。
flex-end：子项都去结尾位置对齐。
center:子项都去中心位置对齐。
space-between : 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-around : around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly : evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。
flex布局决定每一行中的子元素上下对齐方式的属性是：align-items
它的属性值包括：
flex-start;子项都去上端对齐。
center;子项都去上下的中间对齐。
flex-end;子项都去下端对齐。
在flex布局中，可以通过给父元素添加样式，来实现水平垂直居中
水平居中：

下面是一些常用的属性值的介绍

 display: flex;
                flex-wrap: wrap;
				padding-left: 40rpx;
				 justify-content:space-around;/* 调整之间的间距让其实现with的宽度 */
				 padding-top: 60rpx;
				/* justify-content:space-evenly; 调整第一个和最后一个的检间距让他们和中间的间距一样 */

上面图片下面字的模板样式

 <view class="viewStyle">
            <view class="item_view">
                    <navigator url="../index/index">
                            <image class="other"src="../../static/details/ic-首页-通讯录.png"></image>
                            <text>通讯录</text>
                    </navigator>
            </view>
            <view class="item_view">
                    <navigator url="../index_detial/index_detial">
                            <image class="other"src="../../static/details/ic-首页-公文中心.png"></image>
                            <text>公文中心</text>
                    </navigator>
            </view>
            <view class="item_view">
                    <navigator url="../index/index">
                            <image class="other"src="../../static/details/ic-首页-待办中心.png"></image>
                            <text>代办中心</text>
                    </navigator>
            </view>
            <view class="item_view">
                    <navigator url="../index_detial/index_detial">
                            <image class="other"src="../../static/details/ic-首页-督办中心.png"></image>
                            <text>督办中心</text>
                    </navigator>
            </view>
			<view class="item_view">
			        <navigator url="../index_detial/index_detial">
			                <image class="other"src="../../static/details/ic-首页-任务中心.png"></image>
			                <text>任务中心</text>
			        </navigator>
			</view>
			<view class="item_view">
			        <navigator url="../index_detial/index_detial">
			                <image class="other" src="../../static/ic-首页-会议.png"></image>
			                <text>会议中心</text>
			        </navigator>
			</view>
			<view class="item_view">
			        <navigator url="../index_detial/index_detial">
			                <image class="other"src="../../static/details/ic-首页-文档中心.png"></image>
			                <text>文档中心</text>
			        </navigator>
			</view>
    </view>

.mescroll-body {
	position: relative; /* 下拉刷新区域相对自身定位 */
	height: auto; /* 不可固定高度,否则overflow:hidden导致无法滑动; 同时使设置的最小高生效,实现列表不满屏仍可下拉*/
	overflow: hidden; /* 当有元素写在mescroll-body标签前面时,可遮住下拉刷新区域 */
	box-sizing: border-box; /* 避免设置padding出现双滚动条的问题 */
}

绑定点击显示数组形式的时候

例如如下格式的：

salary: {岗位工资: "1", 绩效工资: "2", 工龄工资: "3", 津补贴: "4", 其他补贴: "5", 奖罚: "6", 全勤奖: "7", 加班工资: "8", 考勤扣款: "9",…}

展示的时候可以现在对应的代码块上绑定方法，例如如下绑定的是：salaryDetails() 方法。
<view class="main_part_view" v-for="(row,index) in listData" :key="index" style="display: flex;"
				@click="salaryDetails">
				<view class="main_part_title">{{row.label}}</view>
				<view class="main_part_value">{{row.value}}</view>
			</view>
			<view class="main_part_fact">
					<!-- 封装的对象进行页面展示绑定 -->
					<!-- 实发工资 -->
					{{acturalSalary.label1}}
				</view>
				<view class="main_part_fact_value">
					<!-- 8900 -->
					{{acturalSalary.value1}}
				</view>
			
return {
				/* 返回数组 */
				listData: [],
				/* 返回对象 */
				acturalSalary: {},
				}
	methods: {
	salaryDetails() {
				console.log(api);
				const _userData = uni.getStorageSync('userInfo'); /* 获取本地缓存 */
				const _workId = _userData.WorkNum;
				const index = _userData.salary;/* 对键key也就是index进行赋值，此后台返回的数据中，键为salary*/
				console.log(this.listData);
				api.salaryDetails(this.years[this.indexYears].toString(), this.months[this.indexMonths].toString(),
					_workId).then((res) => {
					if (res.statusCode === 200) { 
						let hourFee = res.data.hourFee;
						let salary = res.data.salary;
						let listData = []; 
						/* 对key为salary的进行遍历取值 */
						for (let key in salary) {
						/* 定义空数组将遍历到的值加入该数组中 */
							let obj = {
								label: key,
								value: salary[key]
							}
						/* 将该数组加入到页面中返回的数组中。 */
							listData.push(obj);
								if(key==='应发工资'){
								let obj1 = {
									label1:key,
									value1:salary[key]
								}
								this.acturalSalary = obj1;
							}
						}	
						/* 对key为hourFee的进行遍历 */
						for(let key in hourFee){
							let obj = {
								label:key,
								value:hourFee[key]
							}
							listData.push(obj)
						}
						this.listData = listData;
					}
				}).catch( ()=>{
					/* 加一个空的占位符 用于在不符合条件的情况下进行判断 不加的话，显示出来的数据会将错误情况下的页面占用。 */
					this.listData = [];
				})
			}
			}

[Vue warn]: Error in render: “TypeError: Cannot read property ‘slice’ of undefined” found in 问题：

<!-- <view class="explain-box" v-for="row in listData.slice(1)" :key="row.index"> -->  出错的  
<view class="explain-box" v-for="row in (listData || '').slice(1)" :key="row.index">  不出错的

uniapp中接口之间的数组传参

一个接口中的数组传递给另一个接口：

	// 获取亲属信息
			async getFamilyInfo() {
				let params = {
					"RI_CheckStatusType": "0",
				}
				let res = await api.getFamilyInfo(params);
				this.familayInfo = res.data;
				console.log(res);
				console.log(this.familayInfo);
				// console.log(this.familayInfo[0].RelationshipPhotoPath[0]);
				// this.familayInfo = res.data;
				// console.log(this.familayInfo);
			},

获取familyInfo中的ID字段：

可以先将遍历的familyInfo数组中的item绑定到所属的那个中的一个按钮然后那个按钮触发事件传递给事件然后事件再传递给另外一个数组，

<view class="middle" v-for="item in familayInfo" :key="item.index" v-if="familayInfo">
<view class="button" type="primary" @click="togglePopup('center', 'tip',item)">拒绝</view>
</view>
<view class="uni-submit" @click="submitbtn('tip')">
					<view class="uni-font">提交</view>
				</view>
方法中取出对应的值：
togglePopup(type, open, item) {
				this.itemId = item.ID;
				console.log(item.ID)
			},
async submitbtn(type) {
				this.$refs['show' + type].close()
				let params = {
					"ID": this.itemId,
					"RI_CheckResult": "2",
					"RI_RejectReason": this.text,
				}
				await api.getRefuseInfo(params);
				//操作成功，刷新数据  直接再掉一遍接口就可以
				this.getFamilyInfo();
				console.log(params);
				// ToastUtil.hideLoading()
				// this.isEditClick = false;
			}

CSS z-index层级浮动

一般是image的层级高于普通的view层级，所以如果被覆盖，可以通过z-index来增加层级。来解决层级浮动问题。

uni.previewImage（图片放大，缩小）

单个图片放大：

//动态
<image class="avatar" :src="userInfo.Avatar" v-if="userInfo.Avatar" mode="aspectFill" @click="clickImg">
//静态  <image class="logo" src="/static/logo.png" @click="clickImg"></image>

clickImg() {
				uni.previewImage({
				//静态图片放大  urls: ["/static/logo.png"],
					urls: [this.userInfo.Avatar], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					/* 接口调用成功的回调函数 */
					fail: function(res) {},
					/* 接口调用失败的回调函数 */
					complete: function(res) {},
					/* 接口调用结束的回调函数（调用成功、失败都会执行） */
				})
			}

遍历数组依次摆放图片：

	<uni-grid :column="3" :show-border="false" :highlight="false" :square="false" class="middle-photo">

						<image v-for="(item1,index1) in item.RelationshipPhotoPath" :key="index1"
							v-if="item.RelationshipPhotoPath" class="photo-details" mode="aspectFill" :src="item1"
							@click="previewPhoto(item.RelationshipPhotoPath,index1)"></image>

					</uni-grid>


previewPhoto(photos, index) {
				uni.previewImage({
					current: index,
					urls: photos
				});