列表的增删、弹框提醒
列表的增删：
1.数据绑定输入时获取数据model:value="{{inptValue}}
2.列表渲染：会自动获取index
弹框提醒：常用交互api：wx.showToast、wx.showModal、wx.showLoading
完整代码：环境-微信开发者工具
/* pages/fromList/fromList.wxml */
<view class="title">
张三经典语录
</view>
<view class="box">
<block wx:if="{{isArr.length}}">
<view class="list" wx:for="{{isArr}}" wx:key="id">
<view>{{index+1}}.{{item.title}}</view>
<view data-index="{{index}}" bind:tap="clear"><icon type="clear" /></view>
</view>
<view class="tip" wx:if="{{isArr.length}}">共同{{isArr.length}}条评论</view>
</block>
<view wx:else style="text-align: center;">暂无数据~</view>
<view class="discuss">
<input type="text" bindconfirm="btn" placeholder="请输入评论内容~" model:value="{{inptValue}}"/>
<button bind:tap="btn" type="default" size="mini" disabled="{{!inptValue.length}}">发布</button>
</view>
</view>
{{inptValue}}
/* pages/fromList/fromList.wxss */
.title{
font-size: 50rpx;
text-align: center;
}
.box{
margin: 0 auto;
width: 700rpx;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.list{
margin-top: 25rpx;
padding: 25rpx;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ccc;
}
.tip{
padding: 20rpx 0;
text-align: center;
}
.discuss{
padding: 25rpx;
display: flex;
justify-content: space-between;
}
.discuss input{
background-color: rgb(235, 235, 235);
width: 76%;
padding: 15rpx;
}
// pages/fromList/fromList.js
Page({
/**
* 页面的初始数据
*/
data: {
inptValue:"",
isArr:[
{id:5488,title:'幽默感和配件'},
{id:7878,title:'pink'},
{id:2356,title:'漫画电影花木兰'}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
btn(){
wx.showToast({
title:'添加成功',
icon:'none'
})
let value=this.data.inptValue
let arr=this.data.isArr
arr.push({
id:Date.now(),
title:value
})
this.setData({
isArr:arr,
inptValue:''
})
},
clear(e){
wx.showModal({
title:'确认删除该条吗？',
success:res=>{
if(res.confirm){
wx.showToast({
title: '删除成功',
icon:'none'
})
let {index}=e.currentTarget.dataset
let arr=this.data.isArr
arr.splice(index,1)
this.setData({
isArr:arr
})
}
}
})
return
},
....
})
