小程序该如何实现留言功能?

2017-12-14 1878

样子就是的,功能一目了然,下面我们就贴实现的代码,首先是HTML页面,好吧,其实微信小程序的是wxml(微信ml)总感觉怪怪的,有木有。

  微信小程序里把div改成了view,听说div也可以用,没有实验过,不知道真假。不过就这样吧,反正原理都一样,页面效果主要看css,又错了,是wxss(微信ss)说实话总觉得……这种感觉不好多说。

  看我们的布局代码,超简单,完全和css一样

  1 /**index.wxss**/

  2 .msg-box{

  3 padding: 20px;

  4 }

  5 .send-box{

东北二八杠下载  6 display: flex;

  7 }

东北二八杠下载  8 .input{

  9 border: 1px solid #B0C4DE;

东北二八杠下载  10 padding: 5px;

  11 }

东北二八杠下载  12 .msg-info{

  13 display: block;

东北二八杠下载  14 margin: 10px 0 0 0 ;

东北二八杠下载  15 color: #339900;

  16

  17 }

  18 .place-input{

东北二八杠下载  19 color: salmon;

  20 }

  21 .list-view{

东北二八杠下载  22 margin: 20px 0 0 0;

  23 }

  24 .item{

  25 overflow: hidden;

  26 border-bottom: 1px dashed #87CEFF;

  27 height: 30px;

  28 line-height: 30px;

  29 }

东北二八杠下载  30 .text1{

  31 float: left;

  32 }

  33 .close-btn{

东北二八杠下载  34 float: right;

东北二八杠下载  35 margin: 5px 5px 0 0;

  36 }

  才36行,现在一看,好吧,真特么简单。微信小程序的功能实现主要看js部分,好在这个他们没有叫(wxjs),微信小程序的js写法,怎么说呢,假如你会vue.js React或者是AngularJS,完全是玩一样的就会了,好吧,不过这三个我暂时都不会!!!!!!!!!!!!!!!

  js代码如下:

东北二八杠下载  1 //index.js

东北二八杠下载  2 //获取应用实例

  3 var app = getApp();

  4 Page({

东北二八杠下载  5 data: {

  6 msgData:[]

  7 },

  8 changeInputValue(ev){

  9 this.setData({

东北二八杠下载  10 inputVal:ev.detail.value

  11 })

  12 },

东北二八杠下载  13 //删除留言

  14 DelMsg(ev){

  15 var n=ev.target.dataset.index;

  16

  17 var list = this.data.msgData;

  18 list.splice(n,1);

  19

东北二八杠下载  20 this.setData({

东北二八杠下载  21 msgData:list

  22 });

  23 },

东北二八杠下载  24 //添加留言

东北二八杠下载  25 addMsg(){

东北二八杠下载  26 var list = this.data.msgData;

东北二八杠下载  27 list.push({

  28 msg:this.data.inputVal

  29 });

  30 //更新

  31 this.setData({

  32 msgData:list,

  33 inputVal:''

  34 });

  35 },

  36 })

  完美的36行,早知道wxml注释写一堆应该也凑个36,这个数字多顺啊。哈哈哈,

  好了,所有的功能代码都在这里了,大家赶快也去玩玩吧。

  注明一下代码出处,这个我是按照腾讯课堂里的某个课程写的,,,,,,,,,,,,具体的忘了,也不查了,好歹说明一下,不要说我盗版,因为这个本身就是为了大家学习用的,……………………

东北二八杠下载  不要纠结那么多了。


tel-bg.jpg

Online 7x24小时无节假日,直接拨打热线电话:

023-62823078

井知科技

扫一扫微信咨询

document.write ('');