小程序增删改查【下篇】

版权声明：菜鸟老五 https://blog.csdn.net/qq_35695041/article/details/86694268

 

<view class="cont">
  <!-- 顶部搜索模块 -->
  <view class='head_sele_view'>
    <input bindinput='select_name' type='text' class='select_name' placeholder='请输入要搜索的昵称' />
    <view class='selec_btn' bindtap='btn_select'>搜索</view>
  </view>
  <!-- 默认显示列表数据 -->
  <view class='list' wx:for="{{list}}" wx:key="key">
    <label class='list_title'>{{item.list_title}}</label>
    <view class='list_base_list'>
      <label class='list_add' bindtap='btn_add'>添加</label>
      <label class='list_add'bindtap="btn_updata"data-index='{{index}}' >修改</label>
      <label class='list_add' bindtap='btn_del' data-index='{{index}}'>删除</label>
    </view>
  </view>
<!--  -->
</view>
<!-- 引入弹窗组件 -->
<layter bind:myevent="myevent" id="layerID"></layter>

//WXSS
/**index.wxss**/

.cont {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部搜索模块 */

.head_sele_view {
  position: relative;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  background-color: tomato;
}

.select_name {
  width: 70%;
  position: absolute;
  left: 30rpx;
  font-size: 30rpx;
  padding-left: 30rpx;
  height: 80rpx;
  top: 10%;
  background-color: #fff;
}

.selec_btn {
  position: absolute;
  right: 30rpx;
  width: 125rpx;
  top: 10%;
  text-align: center;
  font-size: 30rpx;
  padding: 10rpx 0rpx;
  display: inline-block;
  background-color: #fff;
  height: 63rpx;
  line-height: 63rpx;
}

/* 列表数据 */

.list {
  position: relative;
  top: 20rpx;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  margin-bottom: 15rpx;
  font-size: 30rpx;
  background-color: #fff;
}

/* 标题 */

.list_title {
  position: absolute;
  width: 500rpx;
  height: 100rpx;
  left: 30rpx;
}

/* 功能视图 */

.list_base_list {
  position: absolute;
  width: 273rpx;
  height: 100rpx;
  padding: 0rpx 10rpx;
  line-height: 100rpx;
  float: left;
  right: 0rpx;
}

/* 添加 */

.list_add {
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  padding: 10rpx 10rpx;
  margin: 5rpx 10rpx;
  font-size: 28rpx;
  background-color: #333;
  color: #fff;
  text-align: center;
}

//JS
const app = new getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 默认数据列表
    list: app.globalData.list,
    name: null
  },
  // 这里子组件传值修改当前要修改的值
  myevent: function(obj) {
    console.warn("获取到组件传递过来的参数===>", obj.detail.val);
    if (obj.detail.val != null && obj.detail.val!=""){
      // 获取选中的索引
      var index = obj.detail.val.index;
      // 更改选中的参数
      app.globalData.list[index].list_title = obj.detail.val.name;
      // 修改成功重新渲染
      this.setData({
        list: app.globalData.list
      })
    }
   
  },
  //  获取到输入昵称
  select_name: function(res) {
    this.setData({
      name: res.detail.value
    })
  },
  /**
   * 搜索
   */
  btn_select: function() {
    console.error("搜索==>", this.data.name);
    var newarray = [];
    for (var i = 0; i < app.globalData.list.length; i++) {
      var name = app.globalData.list[i].list_title.slice(0, 1);
      console.warn(name);
      if (this.data.name == name) {
        newarray.push(app.globalData.list[i]);
        this.setData({
          list: newarray
        })
      }
    }
  },
  // 删除指定元素
  btn_del: function(res) {
    var index = res.currentTarget.dataset.index;
    var that = this;
    wx.showModal({
      title: '提示',
      content: '确定删除吗？',
      success: function(res) {
        if (res.confirm) {
          app.globalData.list.splice(index, 1);
          console.log("list", app.globalData.list);
          app.globalData.list = app.globalData.list;
          that.setData({
            list: app.globalData.list
          })
        }
      }
    })

  },

  // 添加数据
  btn_add: function() {
    // 模拟死数据
    var name = {
      list_name: "",
      list_title: "你说呢",
      list_img: ""
    };
    // 追加元素
    app.globalData.list.push(name);
    // 重新渲染数据列表
    this.setData({
      list: app.globalData.list
    })
  },

  // 点击修改传递到组件并掉起弹窗组件
  btn_updata: function(res) {
  // 获取到当前选中索引
    var index = res.currentTarget.dataset.index;
    // 传递参数
    var data = {
      index: index,
      modal: true
    };
    // 掉起弹窗组件
    var layerID = this.selectComponent("#layerID");
    layerID.openlayer(data);
  }
})

//JSON
{
  "navigationBarTitleText":"首页",
  "usingComponents": {
    "layter":"../layter/layter"
  }
}

//组件WXML
<view class="content"  hidden="{{!modal}}">
	<!-- 遮罩视图容器 -->
	<mask class='mask' bind:tap="btn_close" />
  <!-- 弹窗组件 -->
  <view class='layer'>
  <!-- 弹板 -->
<view class='list'>
<input type='text' placeholder='请输入文本！' bindinput='bindinput' placeholder-style='color:#fff;' class='layter-title'></input>
<view class='layer-button'>
<label class='layer-btn' bindtap='btn_close'>取消</label>
<label class='layer-btn' bindtap='btn_submit'>确定</label>
</view>
</view>
  </view>
</view>

//组件JS
/**
 * > 组件名:layter
 * > 调用方式第一步:JSON引入"layter":"../components/layter/layter"
 * > 调用方式第二步:页面引入<layter></layter>
 * > 开发者:老五
 * > 编辑时间:2018.1.29
 */
const app = new getApp();

Component({
  properties: {},
  data: {
    modal: false,
    name: null,
    index:null
  },
  lifetimes: {
    attached() {},
    ready() {},
    detached() {},

  },

  methods: {

    // 关闭弹窗
    btn_close: function() {
      this.setData({
        modal: false
      })
    },
    // 输入
    bindinput: function(res) {
      this.setData({
        name: res.detail.value
      })
    },
    // 确定
    btn_submit: function() {
      if (this.data.name != null) {
        var val ={
          index:this.data.index,
          name:this.data.name
        };
        var myEventDetail = {
          val: val
        } // detail对象，提供给事件监听函数
        this.triggerEvent('myevent', myEventDetail) //myevent自定义名称事件，父组件中使用
        this.setData({
          modal: false
        })
      }else{
        wx.showToast({
          title: '请输入',
          icon:"none",
          duration:2000
        })
      }
    },
    openlayer:function(res){
      this.setData({
        modal: res.modal,
        index: res.index
      })
    }
  }
})

//组件WXSS
@import "../anmiate.wxss";
.content {
  width: 100%;
  height: 100%;
}

.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #000;
  top: 0;
  left: 0;
  z-index: 9;
  opacity: 0.8;
}

.layer {

  position: fixed;
  z-index: 999;
  width: 100%;
  text-align: center;
  top: 20%;
}

.list {
     animation: rotate-btn-close linear 0.3s infinite;
  position: relative;
  display: inline-block;
  width: 80%;
  height: 300rpx;
  background-color: #fff;
}

.layter-title {
  position: relative;
  top: 15%;
  width: 80%;
  text-align: left;
  padding-left: 30rpx;
  font-size: 30rpx;
  height: 80rpx;
  display: inline-block;
  color: #fff;
  line-height: 80rpx;
  border: 1rpx solid #f5f5f5;
  background-color: #999;
  border-radius: 10rpx;
}

.layer-button {
  position: absolute;
  width: 100%;
  bottom: 0rpx;
  height: 130rpx;
  border-top: 1rpx solid #ccc;
  line-height: 130rpx;
}

.layer-btn {
  background-color: #333;
  color: #fff;
  width: 200rpx;
  height: 80rpx;
  text-align: center;
  font-size: 30rpx;
  border-radius: 10rpx;
  padding: 15rpx 30rpx;
  margin: 10rpx 50rpx;
  line-height: 80rpx;
}

//组件JSON
{
  "navigationBarTitleText": "弹窗组件",
  "component": true
}