微信小程序小案例实战

.wxml:

XML 复制代码

<view class = "title">
  狂飙经典语录
</view>
<view class="out">
  <block wx:if="{{listArr.length}}">  <!--  bloock不会影响排版-->
      <view class="list">
        <view class="row" wx:for="{{listArr}}" wx:key="id">
            <view class="text">{{index+1}}.{{item.title}}</view> <!--  data-nums:传参数nums-->
            <view class="close" bind:tap="clickClose" bind:tap="clickClose" data-nums="{{index}}">
                <icon type ="clear" size="26"></icon>
            </view>
        </view>
    </view>
    <view class="count">
        共 {{listArr.length}} 条评论
    </view>
  </block>
  <view wx:else style="text-align: center;font-size: 38rpx; color: #555;padding: 20rpx 0 ;">暂无语录，请添加</view>
  <!--
      <view class="count" wx:if="{{listArr.length}}">
            共 {{listArr.length}} 条评论
        </view>
        <view  wx:else style="text-align: center;font-size: 38rpx; color: #555;padding: 20rpx 0 ;">暂无语录，请添加</view>
  -->
  <view class="comment"> <!-- model:value="{{iptValue}} 双向绑定-->
   <!-- bindconfirm="onSubmit" 敲回车和点击发布按钮功能一样-->
      <input type="text" placeholder="请输入评论内容..."placeholder-style="color:#aaa;font-size:30rpx;"
          model:value="{{iptValue}}"   bindconfirm="onSubmit"
      />
      <button size="mini" type="primary" disabled="{{!iptValue.length}}" bind:tap="onSubmit">发布</button>
  </view>
</view>

.js:

XML 复制代码

// pages/test1/test1.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    iptValue:"",
    listArr:[
      {id:12345678,title:"告诉老墨，我想吃鱼！！"},
      {id:12345679,title:"咖啡不用冲，迟早会成功"},
      {id:12345670,title:"妻管严，很幸福的"}
    ]
  },
  onSubmit(){
    
      console.log(this.data.iptValue);
      let value = this.data.iptValue;
      let arr = this.data.listArr;
      arr.push({
        id:Date.now(),//设置时间戳，保证id不会重复；
        title:value
      });
      this.setData({
        listArr:arr,
        iptValue:""//把输入框清空
      });
       //发布成功，来个showToast提示:
       wx.showToast({
         title:"发布成功"
       })
  },
  clickClose(e){
    //点击删除的时候不能立即删除：
    wx.showModal({
       title: "是否确认删除",
       content:"删除之后不可恢复，请谨慎删除",
       success:res=>{
         if(res.confirm){
            console.log("留言的下标index为："+e.currentTarget.dataset.nums);
            let {index} = e.currentTarget.dataset;
            let arr = this.data.listArr;
            arr.splice(index,1);//从下标index开始，移出几个元素
            this.setData({
              listArr:arr
            })
         }
       }
    })
 
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

.wxss:

XML 复制代码

.title{
    font-size: 50rpx;
    text-align:center;
    color: #161515;
    border:solid pink;
    padding: 50rpx 0  30rpx;
}
.out{
  border:solid pink;
  width: 690rpx;
  margin: 30rpx;
  box-shadow:0 15rpx 40rpx rgba(0,0,0,0.5);/*它可以向框添加一个或多个阴影*/
  border-radius: 15rpx;/*设置边框圆角*/
  padding: 30rpx;
  /*border-box就是将border和padding数值包含在width和height之内, 好处就是修改border和padding数值盒子的大小不变*/
  box-sizing:border-box;
}

.out .list .row{
  padding: 15rpx 0;/*上下左右的内边距*/
  border-bottom: 5rpx solid #e8e8e8;/*设置元素下边框的样式*/
  display:flex;/*布局*/
  /*可以均匀排列盒子中的每个元素,首个元素放置于起点,末尾元素放置于终点。达到左右对齐的效果:*/
  justify-content: space-between; 
  align-items: center;/*align-items常用来设置垂直方向对齐方式  align-items: center;常用设置居中 */
  font-size: 34rpx;
  font-weight: 500;
  color: #161515;
}

.out .list .row .text{
  padding-right: 10rpx;
  box-sizing:border-box;
}

.out .count{
  padding: 20rpx 0;
  text-align: center;
  color: #888;
  font-size:30rpx;
}

.out .comment{
  display: flex;
  margin-top: 20rpx;
}

.out .comment input{
  flex:4 ;
  background: #f4f4f4;
  margin-right: 10rpx;
  height: 100%;
  height: 64rpx;
  border-radius: 15rpx;
  color: #333;
  padding: 0 0rpx;
 
}

.out .comment button{
  flex :1;
}