微信小程序> 微信小程序数组增删改查

微信小程序数组增删改查

浏览量:1665 时间: 来源:百味苦

        第一次接触微信小程序,不管接触什么新东西,个人觉得只要写好数组的增删改查,就会了解大部分东西了(个人爱好),新手写的东西,代码可能会很胖。

 

小程序小程序小程序

大概就是这么样子,本文只是记录自己摸索微信小程序的过程,可能并无实际作用

wxml:

viewview class="{{showView?'show':'hide'}}"  input bindinput ="userNameInput" placeholder="请输入修改内容"/input  button bindtap="queding"确定/button  button bindtap="quxiao"取消/button/view  view class='v1'    view wx:for="{{array1}}" wx:for-index="index" wx:for-item="item"      view class='line-main'        view class='line-buck'{{index+1}}、{{item}}/view        view class="line-buck  line-img" bindtap="addarray" id="{{index}}"          image class='button-add ub-img1 ' src="../../image/icon-add.png"/image        /view        view class="line-buck  line-img" bindtap="selectarray" id="{{index}}"          image class='button-add ub-img1 ' src="../../image/icon-edit.png"/image        /view      /view    /view     /view   view class='v2'  view wx:for="{{array2}}" wx:for-index="index" wx:for-item="item"      view class='line-main'        view class='line-buck'{{index+1}}、{{item}}/view        view class="line-buck  line-img" bindtap="delarray" id="{{index}}"          image class='button-add ub-img1 ' src="../../image/icon-close.png"/image        /view      /view    /view    /view  /view

css:(本来可以更好看,但是懒得弄了)

.line-main{    font-size: 1em;  vertical-align: middle;}.line-buck{  display: inline-block;  line-height: 50px;  text-align: center;}.line-img{  display: inline-block;  position: relative;  float: right;  }.v0{  width: 100%;}.v1{  float: left;  width:45%; }.v2{  float:right;  width:45%;}.button-add{    border-radius:15px;  vertical-align: middle;  background-color: black;  text-align: center;  height: 30px;  width: 30px;}
.ub-img{  -webkit-background-size:contain;  background-size:contain;  background-repeat:no-repeat;  background-position:center;}.ub-img1{   -webkit-background-size:cover;  background-size:cover;  background-repeat:no-repeat;  background-position:center;}.ub{  display: -webkit-box !important;  display: box !important;  position:relative;}.ub-rev{  -webkit-box-direction:reverse;  box-direction:reverse;}.text-input{
}.text-button{
}.text-main{
}.hide{display: none;}.show{display: block;}

js:

//index.js//获取应用实例const app = getApp()
Page({  data: {    motto: 'Hello World',    userInfo: {},    hasUserInfo: false,    canIUse: wx.canIUse('button.open-type.getUserInfo'),    i:0,    array1:["UZI","MLXG","小虎","卡莎","Letme","Ming"],    array2:[],    showView: false,    userName: "",    index : 0  },  //事件处理函数  bindViewTap: function() {    wx.navigateTo({      url: '../logs/logs'    })  },  add: function (e) {    var that = this;    var i = Number(that.data.i) + Number(1);           console.log("加完",i);    that.setData({      i : i,      motto: 'Hello World+' + i    })          },  addarray:function(index){       console.log(index);      var id = index.currentTarget.id;      var value = this.data.array1[id];      console.log("value",value);      var array2 = this.data.array2;      array2.push(value);      console.log("array2",array2);      var array1 = this.data.array1;      array1.splice(id,1);      console.log("array1", array1);      this.setData({        array2: array2,        array1: array1      })  },  delarray: function (index) {    console.log(index);    var id = index.currentTarget.id;    var value = this.data.array2[id];     console.log("value", value);    var array1 = this.data.array1;    array1.push(value);    console.log("array1", array1);    var array2 = this.data.array2;    array2.splice(id, 1);    console.log("array1", array2);    this.setData({      array2: array2,      array1: array1    })
 },  selectarray : function(index){    var id = index.currentTarget.id;    this.setData({      showView: true,      index : Number(id)    })
   
 },  quxiao : function(){    this.setData({      showView: false    })
 },  queding : function(){    this.setData({      userName: ""    })
   this.setData({      showView: false    })
 },  userNameInput : function(e){        this.setData({      userName: e.detail.value    })    var array1 = this.data.array1;    array1[this.data.index] = this.data.userName;    this.setData({      array1: array1    })  },  onLoad: function () {    if (app.globalData.userInfo) {      this.setData({        userInfo: app.globalData.userInfo,        hasUserInfo: true      })    } else if (this.data.canIUse){      // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回      // 所以此处加入 callback 以防止这种情况      app.userInfoReadyCallback = res = {        this.setData({          userInfo: res.userInfo,          hasUserInfo: true        })      }    } else {      // 在没有 open-type=getUserInfo 版本的兼容处理      wx.getUserInfo({        success: res = {          app.globalData.userInfo = res.userInfo          this.setData({            userInfo: res.userInfo,            hasUserInfo: true          })        }      })    }  },  getUserInfo: function(e) {    console.log(e)    app.globalData.userInfo = e.detail.userInfo    this.setData({      userInfo: e.detail.userInfo,      hasUserInfo: true    })  }})
完成代码差不多就这样,OK(中间的曲折离奇,个中滋味得自己体会)

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎