9.5.2 留言反馈界面开发企业站uni-app实战【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】

9.5.2 留言反馈

本小节讲解留言反馈页面的制作，效果如图9-14。

布局代码如下：

template>
<view class='group'><view class='group-header'>留言内容</view><view class='group-body'><textarea placeholder='请输入留言' name="neirong" ></textarea></view><view class='group-header'>联系信息</view><view class='group-body'><view class='input-item'><text class='input-item-label'>联系人</text><view class='input-item-content'><input type='text' name="lianxiren" placeholder='请输入姓名'></input></view></view><view class='input-item'><text class='input-item-label'>手机号码</text><view class='input-item-content'><input type='text' name="shouji" placeholder='请输入手机号码'></input></view></view><view class='input-item'><text class='input-item-label'>联系邮箱</text><view class='input-item-content'><input type='text' name="youxiang" placeholder='请输入邮箱'></input></view></view>            </view><view class='btn-submit'><button class='btn'  form-type="submit">确认提交</button></view><view class='tiwen'><text>如问题无法简单描述清楚</text><text>可以直接拨打电话</text><view @click='dadianhua' data-tel='400-123-456'>400-123-456</view></view></view>
</template>

样式代码如下：

<style>
.group{display: flex;  /*Flex布局*/flex-direction: column;/*更改Flex默认布局row为column*/box-sizing: border-box;/*宽度包含padding*/
}
.group-header{line-height: 30px; /*行高*/background-color: #f9f9f9; /*背景颜色*/padding: 0 5px;  /*内边距 0px 5px 0px 5px*/border-bottom: 1px solid gainsboro; /*下划线*/
}
.group-body{border-bottom: 1px solid gainsboro;/*下划线*/padding: 0 5px;/*内边距 0px 5px 0px 5px*/
}
.input-item{padding: 5px;  /*内边距*/display: flex; /*Flex布局*/border-bottom: 1px dotted gainsboro; /*下划线*/
}
.input-item-label{display: block; /*块级元素*/width: 5em;     /*宽度*/color: gray;    /*字体颜色*/
}
.input-item-content{color: gray;  /*字体颜色*/flex:1;       /*占据剩余空间*/
}
.btn-submit{padding: 5px;/*内边距*/
}
.btn{border-radius: 5px; /*圆角*/background: orange; /*背景颜色*/color: white;       /*字体颜色*/
}
.tiwen{display: flex;  /*Flex布局*/flex-direction: column;/*更改Flex默认布局row为column*/text-align: center; /*居中*/
}
.tiwen text{color: grey;     /*字体颜色*/font-size: 12px; /*字体大小*/
}
.tiwen view{color: orange;   /*字体颜色*/font-size: 18px; /*字体大小*/
}
</style>

【uniapp参考资料】

（1）uni-app跨平台开发入门到实战
https://ke.qq.com/course/package/26512

（2）uni-app 完整商城界面设计实战
https://ke.qq.com/course/2381059

（3）基于vue的uniapp商城完整项目源代码
https://ke.qq.com/course/3064977

（4）小白教程资料 http://www.2d5.net

（5）毕业设计网http://www.pc-365.net
（6）小程序编程网www.4317.org

（7）计算机编程网http://www.05423.com/

9.5.2 留言反馈界面开发企业站uni-app实战【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】相关推荐

uni-app从入门到精通在线教程-目录（黄菊华-跨平台开发系列教程）
前言 2 第一部分基础知识 11 第1章 uni-app入门 11 1.1 uni-app概要 11 1.2 快速上手 15 1.2.1 HbuilderX开发工具 15 1.2.2 通过 HBui ...
3.3.4 h5 -manifest.json-常用配置【uni-app从入门到精通在线教程（黄菊华-跨平台开发系列教程）】
自定义模板需要使用自定义模板的场景,通常有以下几种情况:  调整页面 head 中的 meta 配置  补充 SEO 相关的一些配置(仅首页)  加入百度统计等三方js 使用自定义模板时,1. ...
5.3.2 表单内数据的获取 -表单的使用- 常用语法【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】
5.3.2 表单内数据的获取在表单的组件,我们需要定义name的值,然后我们在提交表单的时候,就可以通过name获取对应的值,获取内容的格式如下: e.detail.value.组件的name 提示 ...
5.1.9 数组的定义和for语句的使用- 常用语法【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】
5.1.9 数组的定义和for语句的使用我们在uni-app中,实际制作作品中,要显示资讯列表.商品列表等都需要用到数组的循环显示,我们使用v-for语句来实现. 我们用 v-for 指令根据一组数 ...
2.10 WXS ---uni-app框架简介【uni-app从入门到精通在线教程（黄菊华-跨平台开发系列教程）】
WXS是微信小程序的一套脚本语言,规范详见. 它的特点是运行在渲染层.当需要避免逻辑层和渲染层交互通信折损时,可采用wxs. uni-app可以将wxs代码编译到微信小程序.QQ小程序.APP.H5上 ...
25-微信小程序商城联系客服（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
联系客服本节主要讲解会员功能中的联系客服界面的实现.效果如图15-11所示. 1.布局分析结构布局分析示意如图15-12所示. 根据上面的布局分析,我们会产生基础的框架,代码示例如下: <v ...
20-微信小程序商城下单页面的产品列表和留言（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
下单页面的产品列表和留言本节主要讲解下单页面中的产品列表和留言界面如何实现.效果如图14-9所示. 根据上面的布局分析,我们会产生基础的框架,代码示例如下: <view><!-第1 ...
07-微信小程序商城精品推荐（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
精品推荐本节讲解精品推荐"区域标题"和"产品列表"的界面实现.效果如图12-15所示. 1.应用知识点分析应用知识点包括:  一行2列的布局使用.  本 ...
11-微信小程序商城分类和产品产品页面顶部切换功能（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
产品页面顶部切换功能本节主要讲解产品详细页面中顶部切换界面和功能的实现,效果如图13-9所示. 1.布局分析结构布局分析示意如图13-10所示. 根据上面的布局分析,我们会产生基础的框架,代码示例 ...

9.5.2 留言反馈界面开发企业站uni-app实战【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】

9.5.2 留言反馈

布局代码如下：

样式代码如下：

【uniapp参考资料】

9.5.2 留言反馈界面开发企业站uni-app实战【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】相关推荐

最新文章

热门文章

9.5.2 留言反馈 界面开发 企业站uni-app实战【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】

9.5.2 留言反馈

布局代码如下：

样式代码如下：

【uniapp参考资料】

9.5.2 留言反馈 界面开发 企业站uni-app实战【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】相关推荐

最新文章

热门文章

9.5.2 留言反馈界面开发企业站uni-app实战【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】

9.5.2 留言反馈界面开发企业站uni-app实战【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】相关推荐