uniApp uView插件里的 SwipeAction 滑动单元格

作者: gu_lao_rou-p 分类: uniapp,uView 发布时间: 2022-02-03 15:21

它自带了两个参数,如果给它设置其他参数,将会覆盖掉原有的参数

两个参数:

  • 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
标签云