小程序 — 表格页面布局及删除(一)

最新推荐文章于 2022-11-16 14:33:41 发布

原创最新推荐文章于 2022-11-16 14:33:41 发布 · 2k 阅读

7 ·

CC 4.0 BY-SA版权

本文探讨了在微信小程序中创建表格页面布局以及实现数据删除的功能。通过在onLoad()中保存this的引用以避免作用域问题，并展示了JS代码来循环展示表格数据以及处理删除操作。

玩过vue的大多数都会说不就和vue差不多吗？！会玩vue小程序就很so easy了！！！(我却不难认为)话不多说，看代码喽

因为这里的this是相对于wx:request()的当前对象，所以我们可以在onLoad()中定义一个变量that ，将this赋值给that，那么此时的that代表相对于onLoad()的当前对象，然后在其方法中就直接使用that看来替代this，防止报错

一：布局如下的页面，循环表格中的数据
在这里插入图片描述

wxml中的代码
 <view class='table'>
    <view class='tr'>
      <view class='th'>学号</view>
      <view class='th'>姓名</view>
      <view class='th'>年龄</view>
      <view class='th'>性别</view>
      <view class='th'>操作</view>
    </view>
    <view class='tr'wx:for="{{info}}" wx:key="key">
      <view class='td'>{{item.id}}</view>
      <view class='td'>{{item.name}}</view>
      <view class='td'>{{item.age}}</view>
      <view class='td'>{{item.sex}}</view>
      <view class='td'>
        <button bindtap='updateInfo' data-indexdel="{{index}}">编辑</button>
        <button bindtap='deleInfo' data-indexdel="{{index}}">删除</button>
      </view>
    </view>

wxss样式代码
.table{
  border: 1px solid #ccc;
  width: 100%;
}
.tr{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.th{
  font-weight: 900;
  color: blue;
}
.th,.td{
  padding: 10px;
  width: 100%;
  text-align: center;
}
.td{
  font-size: 14px; 
  height: 65px;
  line-height: 65px;
  border-top: 1px solid #ccc; 
  border-left: 1px solid #ccc;
}
button{
  width: 60px;
  height: 30px;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  margin-top: 2px; 
}

JS内容自行编译
二：删除所选数据
在这里插入图片描述

js代码块  其删除的方法
/**
   * 删除信息
   */
  deleInfo:function(e){
    let index = e.currentTarget.dataset.indexdel;
    let info = this.data.info
    let that = this
    // console.log(info)
    wx.showModal({
      title: '是否确定删除所选内容？',
      success:function(res){
        if(res.confirm){
          info.splice(index,1)
          that.setData({
            info: info
          });
        }
      }
    })
  }