微信小程序--新增 / 删除数据列表（自定义弹窗组件、数组去重）

最新推荐文章于 2023-01-12 11:38:55 发布

嗒_嗒嗒

最新推荐文章于 2023-01-12 11:38:55 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：小程序 js javascript

本文链接：https://blog.youkuaiyun.com/weixin_45561258/article/details/105790763

本文介绍了如何在微信小程序中实现数据列表的新增和删除功能。通过点击新增按钮触发自定义弹窗，输入数据后，点击确定将数据添加到页面列表展示。详细涉及index.wxml的页面布局和index.js的交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、点击新增，弹窗跳出，输入数据
在这里插入图片描述
2、点击弹窗的确定，添加的数据显示在页面列表上

一、页面布局 index.wxml

<!--index.wxml-->
<view class="container">
	<view class='col'>
		<view class='lt'>送货地址<text wx:if="{
  
  {addressList.length}}"> ({
  
  {addressList.length}}个)</text></view>
		<view class="mt" bindtap="newAddressModel">新增</view>
	</view>
	<block wx:for="{
  
  {addressList}}" wx:key="*this">
		<view class='col-d fontSize'>
			<view class='ltd'>导航</view>
			<view class='mtd'>{
  
  {item}}</view>
			<view class="d-quxiao" data-index="{
  
  {index}}" bindtap="deteteChange">
				<image src="/images/qx.png"></image>
			<