微信小程序开发者社区（www.mntuku.cn）为您提供：问答小程序开发《二》：提问页UI设计及前端代码编写
相关的资讯，希望对您有帮助。
问答小程序开发《二》：提问页UI设计及前端代码编写
js部分似乎代码不全，所以本文仅供参考来自原文地址UI图：为方便用户使用，提问页即为首页。提问页有问题输入框、问题描述输入框、图片上传、提交/重置表单元素。index.wxss代码：/**index.wxss**/page{ background- ...
js部分似乎代码不全，所以本文仅供参考
UI图：
为方便用户使用，提问页即为首页。提问页有问题输入框、问题描述输入框、图片上传、提交/重置表单元素。
index.wxss代码：
-
/**index.wxss**/
-
page{
-
background-color: #efeff4;
-
}
-
.container{
-
padding:0px;
-
}
-
.container .tip{
-
width: 100%;
-
background-color: #FFFFFF;
-
margin-bottom: 10px;
-
}
-
.container .tip text{
-
display:block;
-
padding: 10px;
-
text-align: center;
-
font-size: 14px;
-
line-height: 30px;
-
}
-
.container .form{
-
width: 100%;
-
height:100%;
-
background-color: #FFFFFF;
-
}
-
.container .form form{
-
height:100%;
-
display: block;
-
padding: 10px;
-
text-align: center;
-
}
-
.container .form form .section{
-
text-align: left;
-
margin: 10px 0px;
-
}
-
.section.upload{
-
margin: 20px 0px!important;
-
}
-
.img-upload{
-
height: 100%;
-
width: 100%;
-
position: relative;
-
}
-
.img-upload .img-icon-box{
-
display: inline-block;
-
margin:0px 20px 15px 0px;
-
}
-
.img-upload icon{
-
position: absolute;
-
margin: -15px 0px auto 80px;
-
}
-
.img-upload .img-box{
-
border: 1px #eee solid;
-
}
-
.img-upload image{
-
width: 80px;
-
height: 80px;
-
}
-
input{
-
width: 95%;
-
border-radius: 5px;
-
border: 1px #eee solid;
-
font-size: 14px;
-
padding: 2%;
-
}
-
textarea{
-
width: 95%;
-
border-radius: 5px;
-
border: 1px #eee solid;
-
height: 100px;
-
font-size: 14px;
-
padding: 2%;
-
}
-
.container .form form .btns{
-
width: 100%;
-
}
-
/*版权*/
-
.copyright{
-
height:40px;
-
line-height: 40px;
-
color:#8f8f94;
-
font-size:12px;
-
float: left;
-
bottom: 20px;
-
}
-
/*字体图标*/
-
@font-face {
-
font-family: iconfont;
-
/*字体base64 https://transfonter.org/*/
-
src: url(data:font/truetype;charset=utf-8;base64,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A0NgWbADJbCAYmGwAiVGYTgjIDwjOBshICBGI0ewACsjYTghWbEkARQrLbA7LLAuKy6xJAEUKy2wPCywLyshIyAgPLAEI0IjOLEkARQrsARDLrAkKy2wPSywABUgR7AAI0KyAAEBFRQTLrAqKi2wPiywABUgR7AAI0KyAAEBFRQTLrAqKi2wPyyxAAEUE7ArKi2wQCywLSotsEEssAAWRSMgLiBGiiNhOLEkARQrLbBCLLAJI0KwQSstsEMssgAAOistsEQssgABOistsEUssgEAOistsEYssgEBOistsEcssgAAOystsEgssgABOystsEkssgEAOystsEossgEBOystsEsssgAANystsEwssgABNystsE0ssgEANystsE4ssgEBNystsE8ssgAAOSstsFAssgABOSstsFEssgEAOSstsFIssgEBOSstsFMssgAAPCstsFQssgABPCstsFUssgEAPCstsFYssgEBPCstsFcssgAAOCstsFgssgABOCstsFkssgEAOCstsFossgEBOCstsFsssDArLrEkARQrLbBcLLAwK7A0Ky2wXSywMCuwNSstsF4ssAAWsDArsDYrLbBfLLAxKy6xJAEUKy2wYCywMSuwNCstsGEssDErsDUrLbBiLLAxK7A2Ky2wYyywMisusSQBFCstsGQssDIrsDQrLbBlLLAyK7A1Ky2wZiywMiuwNistsGcssDMrLrEkARQrLbBoLLAzK7A0Ky2waSywMyuwNSstsGossDMrsDYrLbBrLCuwCGWwAyRQeLABFTAtAABLuADIUlixAQGOWbkIAAgAYyCwASNEILADI3CwDkUgIEu4AA5RS7AGU1pYsDQbsChZYGYgilVYsAIlYbABRWMjYrACI0SzCgkFBCuzCgsFBCuzDg8FBCtZsgQoCUVSRLMKDQYEK7EGAUSxJAGIUViwQIhYsQYDRLEmAYhRWLgEAIhYsQYBRFlZWVm4Af+FsASNsQUARAAAAAAAAAAAAAAAAAAAAAAAAAAAMgAyAxj/4QNY/6gDGP/hA1j/qAAAAAAAAAAAATwCMAAFACz/4QO8AxgAFgAwADoAUgBeAXdLsBNQWEBKAgEADQ4NAA5mAAMOAQ4DXgABCAgBXBABCQgKBgleEQEMBgQGDF4ACwQLaQ8BCAAGDAgGWAAKBwUCBAsKBFkSAQ4ODVEADQ0KDkIb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) format(truetype);
-
-
}
-
-
.iconfont {
-
font-family:iconfont !important;
-
font-size:16px;
-
font-style:normal;
-
-webkit-font-smoothing: antialiased;
-
-webkit-text-stroke-width: 0.2px;
-
}
-
.icon-zengjia:before { content: e64e; }
index.js代码：
-
var app = getApp();//初始化实例
-
var functions = require(../../function.js);//引入公共函数库
-
var Promise = require(. |
