产品效果
首先完成输入框和按钮部分
<view>
<input model:value="{{inpText}}" type="text" class="inp-box" />
</view>
<button bindtap="cli">添加</button>
Component({
options:{
// 启用多插槽功能，否则只能有一个插槽
multipleSlots:true
},
/**组件的属性列表*/
properties: {
inpText:''
},
methods: {
cli(){
this.triggerEvent('cli', this.data.inpText)
this.setData({inpText:''})
}
}
})
完成底部渲染部分
<view class="box">
<view bindtap="tes">--渲染记录--</view>
<view wx:for="{{list}}" wx:key="*this" > {{item}}
---{{index}}---
<text bindtap="del" data-index="{{index}}" >删除</text>
</view>
</view>
Component({
options:{
// 启用多插槽功能，否则只能有一个插槽
multipleSlots:true
},
/**组件的属性列表*/
lifetimes:{
attached(){
this.tes()
}
},
/**
* 组件的初始数据
*/
data: {
list:['123','abc']
},
/**
* 组件的方法列表
*/
methods: {
tes(){
console.log('生命周期页面',wx.getStorageSync('key'))
this.data.list = wx.getStorageSync('key')
this.setData({list: this.data.list})
},
del(e){
console.log('删除',e.target.dataset.index)
this.triggerEvent('del', e.target.dataset.index)
this.tes()
}
}
})
删除部分
<my-com7 bindcli="onCli"></my-com7>
<my-com8 binddel="onDel" id="tes" ></my-com8>
Page({
onCli(e){
this.data.list.push(e.detail)
wx.setStorageSync('key', this.data.list)
this.setData({list:this.data.list})
this.selectComponent('#tes').tes()
},
onDel(e){
let ar = wx.getStorageSync('key')
let res = this.data.list.filter((item,index) => index !== e.detail)
console.log('传值',res)
wx.setStorageSync('key', res)
this.setData({list:res})
},
/**
* 页面的初始数据
*/
data: {
list:['CSH']
}
})
