微信小程序数组增删改查

悠悠 2022-05-24 08:51 212阅读 0赞

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

![20180524115406759][]![20180524115419793][]![20180524115426419][]

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

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 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 >

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（中间的曲折离奇，个中滋味得自己体会）

[20180524115406759]: https://img-blog.csdn.net/20180524115406759
[20180524115419793]: https://img-blog.csdn.net/20180524115419793
[20180524115426419]: /images/20220524/eb4a70d159264b06b9bdd2eeffc360c2.png

微信小程序数组增删改查

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关微信小程序对数组的增删改查

相关增删改查

相关微信小程序数组增删改查

相关微信小程序增删改查

相关微信小程序云开发增删改查

相关小程序JSON数组操作，增删改查元素

相关增删改查

相关 Spring Boot 整合微信小程序实现登录与增删改查

相关小程序云数据库增删改查、聚合

相关微信小程序云开发数据库增删改查