uniApp uView插件里的 SwipeAction 滑动单元格
它自带了两个参数,如果给它设置其他参数,将会覆盖掉原有的参数
两个参数:
- name:无参数,这里用来判断是第几条数据
- index:你选择的第几个按钮,从0开始
官方文档:https://www.uviewui.com/components/swipeAction.html
这里使用的是:多个按钮并列
代码:
<template>
<view>
<u-swipe-action>
<!-- :options用来连接下面return里的值,而值的名称叫做options2-->
<!-- v-for为循环,index是第几行,item是这一行里的数据,list是数据源 -->
<!-- key="index"让index可以索引到某某行数据,:name="index"把index的值赋到name上面,@click="onButton"执行下面的onButton方法-->
<!-- 只要在这里使用click就会自带index和name,如果再添加数据则会覆盖掉index和name -->
<u-swipe-action-item :options="options2" v-for="(item,index) in list" :key="index" :name="index" @click="onButton">
<view class="swipe-action u-border-top u-border-bottom" :style="'background-color:'+item.bgcolor" >
<view class="swipe-action__content">
<image :src="item.icon" />
<view class="swipe-action__content__text">{{item.title}}</view>
</view>
</view>
</u-swipe-action-item>
</u-swipe-action>
</view>
</template>
<script>
export default {
data() {
return {
options2: [{
text: '修改',
style: {
backgroundColor: '#3c9cff'
}
}, {
text: '题库',
style: {
backgroundColor: '#f8e582'
}
}, {
text: '删除',
style: {
backgroundColor: '#f56c6c'
}
}],
list:[{'title':'春节篇',
'icon':"../../static/logo.png",
'bgcolor':'#007AFF'},
{'title':'春节篇',
'icon':"../../static/logo.png",
'bgcolor':'#007AFF'},
{'title':'春节篇',
'icon':"../../static/logo.png",
'bgcolor':'#007AFF'},
{'title':'春节篇',
'icon':"../../static/logo.png",
'bgcolor':'#fc131b'}],
list2:""
};
},
onShow() {
this.getindex();
},
methods: {
onButton(e) {
console.log(e);
// 定义一个id用来存放后端放回的id
var id=this.list[e.name].id
console.log(id);
},
test(x){
console.log('成功' + x );
},
getindex(){
let rzl = "http://192.168.1.101:8085/template/select"
let rg = "http://192.168.1.105:8889/citiao/list"
uni.request({
"url": this.$url.getindex,
success:res=>{
console.log(res.statusCode)
console.log(res)
this.list=res.data.data
this.list2=res.data.data
}
})
}
}
};
</script>
<style lang="scss">
@import url("admin.scss");
</style>
Warning: Undefined variable $aria_req in /www/wwwroot/l.lvovl.cn/wp-content/themes/JieStyle-Two-master/comments.php on line 26
Warning: Undefined variable $aria_req in /www/wwwroot/l.lvovl.cn/wp-content/themes/JieStyle-Two-master/comments.php on line 27
Warning: Undefined variable $aria_req in /www/wwwroot/l.lvovl.cn/wp-content/themes/JieStyle-Two-master/comments.php on line 28