微信小程序获取列表中某一栏的信息
最近遇到一个问题,需要获取列表中的某一栏的信息,如下,列表是根据后端实时获取的,(向左滑动可以有相应操作),但是如何根据这一栏的按钮获得该栏的信息呢?
向左滑动效果:
只需要在操作的按钮里写上 data-[自定义名字]
,写上你想要获取的信息。
讲解“删除”按钮的功能
附上具体代码:
wxml代码
<view class="cu-list menu card-menu">
<view class="cu-item {{modalName=='move-box-'+index?'move-cur':''}}" wx:for="{{classList}}" wx:for-item='item'
wx:key bindtouchstart="ListTouchStart" bindtouchmove="ListTouchMove" bindtouchend="ListTouchEnd"
data-target="move-box-{{index}}">
<view class="content">
<text class="cuIcon-profilefill text-green"></text>
<text class="text-grey">{{item.name}}</text>
</view>
<view class="action">
<text class="text-grey text-sm">{{item.r_count}} / {{item.t_count}}人</text>
</view>
<view class="move bg-white align-center">
<button style="width:11vw" class="cu-btn sm bg-grey text-sm" data-cid="{{item.cid}}" open-type='share'>分享</button>
<button style="width:11vw" class="cu-btn sm bg-green text-sm" bindtap="changeClassNum" data-target="DialogModal2" data-name="{{item.name}}" data-count="{{item.t_count}}" data-cid="{{item.cid}}">修改</button>
<button style="width:11vw" class="cu-btn sm bg-red text-sm"bindtap="deleteClass" data-cid="{{item.cid}}">删除</button>
</view>
</view>
</view>
在这里,后端需要获取cid
的参数,所以我在删除这一栏写了data-cid="{{item.cid}}"
,item是该栏的所有信息,可以在console打印,看看里面的内容,然后item点后面就是后台返回的名称。
js文件:
// 删除班级名单
deleteClass:async function(e){
console.log("e",e.target.dataset.cid)
await wx.User.deleteClass({
data:{
cid:e.target.dataset.cid
}
})
},
通过控制台打印输出可以获得cid是在e.target.dataset.cid这里获得的
如图所示,写法的话,下一级就往下加点。
wx.User是自己封装的接口,方便调用。