⼩程序实现简易留⾔板
⼩程序现在很⽕，于是也就玩玩，做了⼀个简易的留⾔板，让⼤家看看，你们会说no picture you say a j8 a，好吧先上图。
样⼦就是的，功能⼀⽬了然，下⾯我们就贴实现的代码，⾸先是HTML页⾯，好吧，其实⼩程序的是wxml（ml）总感觉怪怪的，有⽊有。
1<!--index.wxml-->
2<view class="msg-box">
3<!--留⾔-->
4<view class="send-box">
5<input bindinput="changeInputValue" class="input" type="text" value="{{inputVal}}" placeholder="请输⼊留⾔……" placeholder-class="place-input"/>
6<button size="mini" type="primary" bindtap="addMsg">添加</button>
楼宇智能化工程技术7</view>
8<!--留⾔列表-->
妹网名大全9<text class="msg-info" wx:if="{{msgData.length==0}}">暂⽆留⾔……^_^</text>
10<view class="list-view">
11<view class="item" wx:for="{{msgData}}" wx:key="{{index}}">
12<text class="text1">{{item.msg}}</text>
13<!--button size="mini" plain class="close-btn" type="default">删除</button-->
14<icon type="cancel" bindtap="DelMsg" data-index="{{index}}" class="close-btn"/>
15</view>
16</view>
17</view>
家人幽默名
⼩程序⾥把div改成了view，听说div也可以⽤，没有实验过，不知道真假。不过就这样吧，反正原理都⼀样，页⾯效果主要看css，⼜错了，是wxss（ss）说实话总觉得……这种感觉不好多说。
看我们的布局代码，超简单，完全和css⼀样
2021年立秋是几点几分几秒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 }
<1{
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//获取应⽤实例
3var app = getApp();
4Page({
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，这个数字多顺啊。哈哈哈，
好了，所有的功能代码都在这⾥了，⼤家赶快也去玩玩吧。
注明⼀下代码出处，这个我是按照腾讯课堂⾥的某个课程写的，，，，，，，，，，，，具体的忘了，也不查了，好⽍说明⼀下，不要说我盗版，因为这个本⾝就是为了⼤家学习⽤的，……………………
不要纠结那么多了。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论