创新实训——飞讯（五）

如（四）中所说，之后为移动端开发相关内容；

目录

一、基础学习

二、编写修改弹框

---

一、基础学习

对于uni-app相关内容的学习，主要包括函数、组件样式设置等；

二、编写修改弹框

        <view class="modify":style="{bottom:-+widHeight+'px'}" :animation="animationData">
			<view class="modify-header">
				<view class="close" @tap="modify">取消</view>
				<view class="title">{{this.modifyTitle}}</view>
				<view class="define" @tap="modifyStbmit">确定</view>
			</view>
			<view class="modify-main">
				<input type="text" v-model="pwd" class="modify-pwd" placeholder="请输入原密码" placeholder-style="color:#aaa;font-weight:400" :style="{display:needpwd}"></input>
				<textarea v-model="data" class="modify-content"></textarea>
			</view>
		</view>

在信息页面处点击相应内容应有对应修改弹框；

通过设置widHeight,添加动画，点击可修改项时可以从下方上移到界面处。

样式部分代码：

		.modify-main{
			display: flex;
			padding: $uni-spacing-col-base;
			flex-direction: column;
			.modify-pwd{
				margin-bottom: $uni-spacing-col-base;
				padding: 0 20rpx;
				box-sizing: border-box;
				width: 100%;
				flex:auto;
				height: 88rpx;
				background: $uni-bg-color-grey;
				border-radius:$uni-border-radius-base;
				font-size:$uni-font-size-lg;
				color: $uni-text-color;
				line-height: 88rpx;
			}
			.modify-content{
				padding: 16rpx 20rpx;
				box-sizing: border-box;
				flex:auto;
				width:100%;
				height:386rpx;
				background: $uni-bg-color-grey;
				border-radius:$uni-border-radius-base;
				font-size:$uni-font-size-lg;
				color: $uni-text-color;
				line-height: 44rpx;
			}
		}

效果如下：