小程序模板网

问答小程序开发《二》:提问页UI设计及前端代码编写

发布时间:2017-12-09 16:58 所属栏目:小程序开发教程
微信小程序开发者社区(www.mntuku.cn)为您提供:问答小程序开发《二》:提问页UI设计及前端代码编写
相关的资讯,希望对您有帮助。
 

问答小程序开发《二》:提问页UI设计及前端代码编写

js部分似乎代码不全,所以本文仅供参考来自原文地址UI图:为方便用户使用,提问页即为首页。提问页有问题输入框、问题描述输入框、图片上传、提交/重置表单元素。index.wxss代码:/**index.wxss**/page{ background- ...

 
 
 
js部分似乎代码不全,所以本文仅供参考


UI图:

为方便用户使用,提问页即为首页。提问页有问题输入框、问题描述输入框、图片上传、提交/重置表单元素。

index.wxss代码:

 

			
  1. /**index.wxss**/
  2. page{
  3. background-color: #efeff4;
  4. }
  5. .container{
  6. padding:0px;
  7. }
  8. .container .tip{
  9. width: 100%;
  10. background-color: #FFFFFF;
  11. margin-bottom: 10px;
  12. }
  13. .container .tip text{
  14. display:block;
  15. padding: 10px;
  16. text-align: center;
  17. font-size: 14px;
  18. line-height: 30px;
  19. }
  20. .container .form{
  21. width: 100%;
  22. height:100%;
  23. background-color: #FFFFFF;
  24. }
  25. .container .form form{
  26. height:100%;
  27. display: block;
  28. padding: 10px;
  29. text-align: center;
  30. }
  31. .container .form form .section{
  32. text-align: left;
  33. margin: 10px 0px;
  34. }
  35. .section.upload{
  36. margin: 20px 0px!important;
  37. }
  38. .img-upload{
  39. height: 100%;
  40. width: 100%;
  41. position: relative;
  42. }
  43. .img-upload .img-icon-box{
  44. display: inline-block;
  45. margin:0px 20px 15px 0px;
  46. }
  47. .img-upload icon{
  48. position: absolute;
  49. margin: -15px 0px auto 80px;
  50. }
  51. .img-upload .img-box{
  52. border: 1px #eee solid;
  53. }
  54. .img-upload image{
  55. width: 80px;
  56. height: 80px;
  57. }
  58. input{
  59. width: 95%;
  60. border-radius: 5px;
  61. border: 1px #eee solid;
  62. font-size: 14px;
  63. padding: 2%;
  64. }
  65. textarea{
  66. width: 95%;
  67. border-radius: 5px;
  68. border: 1px #eee solid;
  69. height: 100px;
  70. font-size: 14px;
  71. padding: 2%;
  72. }
  73. .container .form form .btns{
  74. width: 100%;
  75. }
  76. /*版权*/
  77. .copyright{
  78. height:40px;
  79. line-height: 40px;
  80. color:#8f8f94;
  81. font-size:12px;
  82. float: left;
  83. bottom: 20px;
  84. }
  85. /*字体图标*/
  86. @font-face {
  87. font-family: iconfont;
  88. /*字体base64 https://transfonter.org/*/
  89. src: url(data:font/truetype;charset=utf-8;base64,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*BrKxsiWS2wGSyxABgrLbAaLLEBGCstsBsssQIYKy2wHCyxAxgrLbAdLLEEGCstsB4ssQUYKy2wHyyxBhgrLbAgLLEHGCstsCEssQgYKy2wIiyxCRgrLbAjLCBgsA5gIEMjsAFgQ7ACJbACJVFYIyA8sAFgI7ASZRwbISFZLbAkLLAj*AjKi2wJSwgIEcgILACRWOwAUViYCNhOCMgilVYIEcgILACRWOwAUViYCNhOBshWS2wJiyxAAVFVFgAsAEWsCUqsAEVMBsiWS2wJyywByuxAAVFVFgAsAEWsCUqsAEVMBsiWS2wKCwgNbABYC2wKSwAsANFY7ABRWKwACuwAkVjsAFFYrAA*AAFrQAAAAAAEQ+IzixKAEVKi2wKiwgPCBHILACRWOwAUViYLAAQ2E4LbArLC4XPC2wLCwgPCBHILACRWOwAUViYLAAQ2GwAUNjOC2wLSyxAgAWJSAuIEewACNCsAIlSYqKRyNHI2EgWGIbIVmwASNCsiwBARUUKi2wLiywABawBCWwBCVHI0cjYbAGRStlii4jICA8ijgtsC8ssAAWsAQlsAQlIC5HI0cjYSCwBCNCsAZFKyCwYFBYILBAUVizAiADIBuzAiYDGllCQiMgsAlDIIojRyNHI2EjRmCwBEOwgGJgILAAKyCKimEgsAJDYGQjsANDYWRQWLACQ2EbsANDYFmwAyWwgGJhIyAgsAQmI0ZhOBsjsAlDRrACJbAJQ0cjRyNhYCCwBEOwgGJgIyCwACsjsARDYLAA*AFJWGwBSWwgGKwBCZhILAEJWBkI7ADJWBkUFghGyMhWSMgILAEJiNGYThZLbAwLLAAFiAgILAFJiAuRyNHI2EjPDgtsDEssAAWILAJI0IgICBGI0ewACsjYTgtsDIssAAWsAMlsAIlRyNHI2GwAFRYLiA8IyEbsAIlsAIlRyNHI2EgsAUlsAQlRyNHI2GwBiWwBSVJsAIlYbABRWMjIFhiGyFZY7ABRWJgIy4jICA8ijgjIVktsDMssAAWILAJQyAuRyNHI2EgYLAgYGawgGIjICA8ijgtsDQsIyAuRrACJUZSWCA8WS6xJAEUKy2wNSwjIC5GsAIlRlBYIDxZLrEkARQrLbA2LCMgLkawAiVGUlggPFkjIC5GsAIlRlBYIDxZLrEkARQrLbA3LLAuKyMgLkawAiVGUlggPFkusSQBFCstsDgssC8riiAgPLAEI0KKOCMgLkawAiVGUlggPFkusSQBFCuwBEMusCQrLbA5LLAAFrAEJbAEJiAuRyNHI2GwBkUrIyA8IC4jOLEkARQrLbA6LLEJBCVCsAAWsAQlsAQlIC5HI0cjYSCwBCNCsAZFKyCwYFBYILBAUVizAiADIBuzAiYDGllCQiMgR7AEQ7CAYmAgsAArIIqKYSCwAkNgZCOwA0NhZFBYsAJDYRuwA0NgWbADJbCAYmGwAiVGYTgjIDwjOBshICBGI0ewACsjYTghWbEkARQrLbA7LLAuKy6xJAEUKy2wPCywLyshIyAgPLAEI0IjOLEkARQrsARDLrAkKy2wPSywABUgR7AAI0KyAAEBFRQTLrAqKi2wPiywABUgR7AAI0KyAAEBFRQTLrAqKi2wPyyxAAEUE7ArKi2wQCywLSotsEEssAAWRSMgLiBGiiNhOLEkARQrLbBCLLAJI0KwQSstsEMssgAAOistsEQssgABOistsEUssgEAOistsEYssgEBOistsEcssgAAOystsEgssgABOystsEkssgEAOystsEossgEBOystsEsssgAANystsEwssgABNystsE0ssgEANystsE4ssgEBNystsE8ssgAAOSstsFAssgABOSstsFEssgEAOSstsFIssgEBOSstsFMssgAAPCstsFQssgABPCstsFUssgEAPCstsFYssgEBPCstsFcssgAAOCstsFgssgABOCstsFkssgEAOCstsFossgEBOCstsFsssDArLrEkARQrLbBcLLAw*A0Ky2wXSywMCuwNSstsF4ssAAWsDArsDYrLbBfLLAxKy6xJAEUKy2wYCywMSuwNCstsGEssDErsDUrLbBiLLAx*A2Ky2wYyywMisusSQBFCstsGQssDIrsDQrLbBlLLAy*A1Ky2wZiywMiuwNistsGcssDMrLrEkARQrLbBoLLAz*A0Ky2waSywMyuwNSstsGossDMrsDYrLbBrLCuwCGWwAyRQeLABFTAtAABLuADIUlixAQGOWbkIAAgAYyCwASNEILADI3CwDkUgIEu4AA5RS7AGU1pYsDQbsChZYGYgilVYsAIlYbABRWMjYrACI0SzCgkFBCuzCgsFBCuzDg8FBCtZsgQoCUVSRLMKDQYE*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) format(truetype);
  90.  
  91. }
  92.  
  93. .iconfont {
  94. font-family:iconfont !important;
  95. font-size:16px;
  96. font-style:normal;
  97. -webkit-font-smoothing: antialiased;
  98. -webkit-text-stroke-width: 0.2px;
  99. }
  100. .icon-zengjia:before { content: e64e; }

index.js代码:

 

			
  1. var app = getApp();//初始化实例
  2. var functions = require(../../function.js);//引入公共函数库
  3. var Promise = require(../../es6-promise.min.js);//引入ES6
  4. var imgUrls=Array();
  5. Page({
  6. //初始化数据
  7. data: {
  8. },
  9. onLoad: function () {
  10. var that = this;
  11. //更新用户信息
  12. var getUserInfo = function(){
  13. return new Promise(function(resolve,reject){
  14. app.getUserInfo();
  15. resolve();
  16. });
  17. };
  18. getUserInfo().then(function(){
  19.  
  20. });
  21. },
  22. //分享
  23. onShareAppMessage: function () {
  24. return {
  25. title: 搜问网,
  26. desc: 一键提交问题,坐等答案自动推送到您的微信上。,
  27. path: pages/index/index
  28. }
  29. },
  30. //下拉刷新
  31. onPullDownRefresh: function(){
  32.  
  33. wx.stopPullDownRefresh();
  34. },
  35. //选择图片
  36. chooseImage:function(){
  37. var that=this;
  38. wx.chooseImage({
  39. count: 1,
  40. sizeType: [compressed],
  41. success: function(res){
  42. var tempFilePaths = res.tempFilePaths;
  43. console.log(tempFilePaths);
  44. wx.uploadFile({
  45. url: https://www.soswen.com/weixin/Question/upload, //仅为示例,非真实的接口地址
  46. filePath: tempFilePaths[0],
  47. name: file,
  48. header: {
  49. content-type: multipart/form-data
  50. },
  51. success: function(res){
  52. var data = JSON.parse(res.data);
  53. if(data.status){
  54. console.log(data.data);
  55. imgUrls.push(data.data);
  56. that.setData({
  57. imgUrls:imgUrls
  58. });
  59. console.log(imgUrls);
  60. }else{
  61. console.log(res);
  62. }
  63. },
  64. fail:function(res){
  65. console.log(res);
  66. }
  67. });
  68. }
  69. });
  70. },
  71. //预览图片
  72. previewImage:function(e){
  73. wx.previewImage({
  74. current:e.currentTarget.dataset.src,
  75. urls: imgUrls
  76. });
  77. },
  78. //删除图片
  79. delImage:function(e){
  80. console.log(e.currentTarget.dataset.key);
  81. var tempimgUrls=Array();
  82. for(var i=0;i


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18107.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询