用原生小程序实现简单的水果列表

用原生小程序实现水果列表

主要运用了原生小程序的基本语法以及setData的使用

新建文件夹

index.wxml

<!--pages/work/index.wxml-->
<view class="title">水果列表</view>
<view class="top">
  <input type="text" placeholder="请输入水果" model:value="{{fName}}" bindtap="doInput" />
  <button bindtap="doAddd">确认</button>
</view>
<view wx:if="{{list.length!==0}}">
  <view class="list" wx:for="{{list}}" wx:key="id" bindtap="doDel" data-index="{{index}}">
    {{item.name}}
  </view>
</view>
<view wx:else>没有水果数据</view>

index.wxss

/* pages/work/index.wxss */
.title {
  text-align: center;
  font-size: 25px;
}
.top {
  display: flex;
}
.top input {
  padding: 10px;
  border: 1px solid #000;
}
.top button {
  background-color: #f4f;
}
.list {
  padding: 10px;
  background-color: green;
}

index.js

// pages/work/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [{
      id: 1,
      name: '苹果'
    }, {
      id: 2,
      name: '葡萄'
    }, {
      id: 3,
      name: '香蕉'
    }, ],
    fName: ""
  },
  doInput() {},
  //添加
  doAddd() {
    const fName = this.data.fName
    //先判断添加的元素在不在数组中
    const index = this.data.list.findIndex(item => item.name === fName)
    if (index > -1) {
      return wx.showToast({
        title: '请勿重复添加',
        icon: 'none'
      })
    }
    this.data.list.unshift({
      id: Date.now(),
      name: fName
    });
    this.setData({
      list: this.data.list,
      fName: ''
    })
  },
  //删除
  doDel(event) {
    const index = event.target.dataset.index
    this.data.list.splice(index, 1)
    this.setData({
      list: this.data.list
    })
  },
})