微信小程序：前台数据的增删改查

删除操作

this.data.goods.splice(clickIndex,1);

效果图：

 代码

 good,js

// pages/goods/goods.js
Page({

  /**
   * 页面的初始数据
   */
  data: {


    //对数据的增删改查
    goods:["华为手机","小米手机","OPPO手机","一加手机","魅族手机"],


    newgoods:["苹果手机","三星手机","诺基亚手机"]

  },
  delitem(event)
  {
      let  clickIndex=event.currentTarget.dataset.index;
      console.log("点击的index为:"+clickIndex);


      //1.删除goods数组中的点击这项  splice(删除的当前项，几项)
      this.data.goods.splice(clickIndex,1);
      console.log(this.data.goods);


      //2.把删除后goods数组通过setData({});模型数据驱动视图
      this.setData({goods:this.data.goods});



  },
  
  beforeadd()
  {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

good.json

{
  "usingComponents": {}
}

good.wxml

<!--pages/goods/goods.wxml-->
<view  class="pageview">
   <scroll-view  class="scrollview" scroll-y="true">
        <block wx:for="{{goods}}">
           <view  class="listview">
               <view>{{item}}</view>
               <view class="btnview" bindtap="delitem"  data-index="{{index}}">删除</view>
           </view>
        </block>
   </scroll-view>
<view  class="opview">
  <view class="btnview"  bindtap="beforeadd">前置增加</view>
  <view class="btnview">后置增加</view>

</view>

</view>

good.wxss

/* pages/goods/goods.wxss */
.pageview{
    width: 100%;
    height: 100vh;
    background-color: cadetblue;
}
.scrollview{
    width: 100%;
    height: 100%;
}
.listview{
    width: 100%;
    height: 12%;
    border:1px  solid  black;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btnview{
    width: 80px;
    height: 40px;
    background-color: greenyellow;
    color:white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4px;
}
.opview{
    width: 100%;
    height: 10%;
    background-color: silver;
    position: fixed;
    left: 0px;
    bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}