微信小程序数组增删改查
第一次接触微信小程序，不管接触什么新东西，个人觉得只要写好数组的增删改查，就会了解大部分东西了（个人爱好），新手写的东西，代码可能会很胖。
大概就是这么样子，本文只是记录自己摸索微信小程序的过程，可能并无实际作用
wxml：
<view>
<view 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
})
}
})