uniapp微信小程序按钮分享定制动态传参

news2024/9/24 12:30:36

打印 onShareAppMessage 中的传参(注意:上方我定义了一个open-type为share的按钮)

打印之后如下:

给按钮绑定  data-id  可以在这里的  dataset  中取到 

然后根据  from  的值来动态返回分享的参数

示例代码:

<template>
	<view class="container">
		<view v-for="(item,index) in 2" :key="index" class="item flexRowCenterAll" @click="todo">
			<view class="left flexColumn">
				<text class="inf">报价单名称:工商报价单</text>
				<text class="inf">客户:张三</text>
				<text class="inf">创建时间:2024.05.02 13:02:05</text>
			</view>
			<view class="right flexColumnCenterAll">
				<text style="color: #0581FE;margin-bottom: 16rpx;">已同步客户</text>
				<view class="flexRowCenterAll">
					<button class="shareBtn" :data-id="1" open-type="share" @click.stop>
						<u-icon name="share-fill" color="#2979ff" size="28"></u-icon>
					</button>
					<u-icon name="list-dot" color="#2979ff" size="28" @click.stop="showMenu"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		onShareAppMessage(res){
			console.log(res);
			if(res.from == 'button'){
				let id = res.target.dataset.id
				let name = res.target.dataset.name
				return {
					path:'',
					title:``
				}
			}
		},
		methods:{
			showMenu(){
				uni.showActionSheet({
					itemList:[
						'编辑报价单',
						'同步至客户',
						'删除'
					]
				})
			},
			todo(){
				console.log('1111');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		.item{
			padding: 16rpx;
			justify-content: space-between;
			background: white;
			border-bottom: 1rpx solid #efefef;
			font-size: 24rpx;
			.inf{
				margin-bottom: 16rpx;
				&:last-child{ margin-bottom: 0; }
			}
			.shareBtn{
				background: transparent;
				border: none;
				&::after{
					border: none;
				}
			}
		}
	}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1966325.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

通过材质节点Panner实现球体自转

纹理坐标的移动&#xff0c;可以达到球体自转的功能&#xff0c;从而减少代码的复杂度。由于是绕着一个轴转动&#xff0c;所以在u方向移动即可。 材质&#xff1a; 材质实例 运行如下&#xff1a;

怎么把视频转换成mp4格式?分享几款视频转换软件

在数字化时代&#xff0c;视频已经成为我们日常生活和工作中的重要组成部分。然而&#xff0c;不同的设备和软件可能支持不同的视频格式&#xff0c;这常常导致兼容性问题。MP4作为一种广泛支持且高质量的视频格式&#xff0c;经常被用作解决这类问题的首选方案。那么&#xff…

医疗器械维修培训哪里好

医疗器械维修培训哪里好 医学技术的应用离不开医疗设备的支持,近几年医疗行业发展迅速&#xff0c;城镇、县级、市级医院设备也都越来越多&#xff0c;医疗机构拥有大量的医疗设备&#xff0c;需要专业的维修团队来保障设备的正常运行。医疗设备的论证、验收、使用、维护、维修…

多语言海外AEON抢单可连单加额外单源码,java版多语言抢单系统

多语言海外AEON抢单可连单加额外单源码&#xff0c;java版多语言抢单系统。此套是全新开发的java版多语言抢单系统。 后端java&#xff0c;用的若依框架&#xff0c;这套代码前后端是编译后的&#xff0c;测试可以正常使用&#xff0c;语言繁体&#xff0c;英文&#xff0c;日…

WebSocket 协议与 HTTP 协议、定时轮询技术、长轮询技术

目录 1 为什么需要 WebSocket&#xff1f;2 WebSocket2.1 采用 TCP 全双工2.2 建立 WebSocket 连接2.3 WebSocket 帧 3 WebSocket 解决的问题3.1 HTTP 存在的问题3.2 Ajax 轮询存在的问题3.3 长轮询存在的问题3.4 WebSocket 的改进 参考资料&#xff1a; 为什么有 h…

leetcode提示LeetCode extension needs Node.js installed in environment path

背景 系统&#xff1a;mac node版本 已通过nvm安装了多个版本node&#xff0c;并通过nvm alias default XX指定了node默认版本 描述&#xff1a;vscode安装了leetcode后&#xff0c;提示&#xff1a;LeetCode extension needs Node.js installed in environment path 问题…

leetcode958. 二叉树的完全性检验,层序遍历的巧用

leetcode958. 二叉树的完全性检验 给你一棵二叉树的根节点 root &#xff0c;请你判断这棵树是否是一棵 完全二叉树 。 在一棵 完全二叉树 中&#xff0c;除了最后一层外&#xff0c;所有层都被完全填满&#xff0c;并且最后一层中的所有节点都尽可能靠左。最后一层&#xff0…

Web安全学习顺序:从零到精通的指南

随着互联网的迅猛发展&#xff0c;Web安全已成为一个日益重要的领域。无论是企业还是个人&#xff0c;都需要关注并提升自身的Web安全防护能力。对于初学者而言&#xff0c;如何系统地学习Web安全知识&#xff0c;掌握相关技能&#xff0c;成为了一个亟待解决的问题。本文将为你…

C# 串口通信(通过serialPort控件发送及接收数据)

连接串口 界面设计打开串口发送数据通过文件发送发送数据 接收数据 首先可以在 工具箱中搜索serialport&#xff0c;将控件拖到你的Winfrom窗口。 界面设计 打开串口 private void Connect_Click(object sender, EventArgs e){serialPort1.PortName comboBox2.Text;//端口名s…

颜色传感器 - 从零开始认识各种传感器【二十三期】

颜色传感器|从零开始认识各种传感器 1、什么是颜色传感器 颜色传感器&#xff08;Color Sensor&#xff09;是一种能够检测和识别颜色的传感器&#xff0c;它广泛应用于工业自动化、机器人技术、智能家居、消费电子等领域。颜色传感器通过测量物体表面反射的光来确定其颜色&a…

类和对象(上) - c++

1.类的定义 1.1 类定义格式 class 是定义类的关键字 ,后跟类的名字,{}部分为类的主体,(注意:最后类定义结束时不要忘了 ; )。 类体中内容称为类的成员&#xff1a;类中的变量称为成员变量; 类中的函数称为成员函数。在c中,struct也可以定义类(c兼容c语言),同时struct升级成类…

武汉流星汇聚:跨境电商桥梁连接中国与世界,中国产品畅销全球

在全球经济一体化的大背景下&#xff0c;零售电商行业以其独特的魅力和无限潜力&#xff0c;正引领着全球商业模式的深刻变革。特别是中国卖家&#xff0c;通过跨境电商平台这一桥梁&#xff0c;轻松触达全球消费者&#xff0c;实现了商品的快速流通和市场的广泛覆盖&#xff0…

Spark 基础 与 安装

Spark 基础 一、MapReduce编程模型的局限性 1、繁杂&#xff1a;只有Map和Reduce两个操作&#xff0c;复杂的逻辑需要大量的样板代码 2、处理效率低&#xff1a; Map中间结果写磁盘&#xff0c;Reduce写HDFS&#xff0c;多个Map通过HDFS交换数据 任务调度与启动开销大 3、…

十城联动共建生态登陆山东 纷享销客从原厂型向生态型CRM进化

7月30日&#xff0c;纷享销客渠道生态伙伴发展共建会之山东专场盛大举行&#xff0c;百余家优秀伙伴到场共享CRM领域高质量增长新机遇。2024年&#xff0c;纷享销客将坚定不移地从原厂型向生态型CRM厂商进化&#xff0c;把伙伴们扶上马&#xff0c;送一程&#xff0c;共发展&am…

Java--异常

目录 异常的概念异常的体系结构异常抛出异常处理异常throws声明try-catch捕获 异常处理流程自定义异常类 异常的概念 Java中&#xff0c;程序执行过程中发生的不正常的行为称为异常。 我们之前学数组的时候可能会遇到的数组越界异常&#xff1a;ArrayIndexOutOfBoundsException…

Reeder + RSS+ - 订阅RSS信息

文章目录 引言ReederRSS 源微博Bilibilirsshub自己发现 feed RSS 使用 引言 信息越来越多&#xff0c;也层次不齐&#xff0c;难以花时间筛选&#xff0c;但也不能闭目塞听。 使用爬虫 每日定时 去爬取不同网站需要的信息&#xff0c;还是有些繁琐&#xff0c;又让人想到 RSS …

odoo 去掉新手简介

很多模块有这样的提示&#xff0c;这种是可以动态关闭的 菜单 设置-技术-入职 可以动态切换&#xff0c;是否再次展示

不同类型的生物反应器在支架成熟过程中具有哪些特点和应用?

3D Bioprinting of Human Tissues: Biofabrication, Bioinks, and Bioreactors是发表于《International Journal of Molecular Sciences》的一篇综述&#xff0c;详细介绍了3D生物打印人体组织的相关技术进展&#xff0c;包括数据处理、生物打印技术、生物墨水配方、生物反应器…

设计理念中——抽象与接口和用(C#)

前言 在程序设计中&#xff0c;使用抽象类还是用接口应该是一个需要考虑的场景&#xff0c;有时我们感觉这两者并没有太大的区别&#xff0c;有时又有很大区别。这里是一些说明和示例。 一、抽象类和接口 1、相同点&#xff1a; 1)都可以被继承 2&#xff09;都不能被实例化…

paddleSeg项目实战

问题1&#xff1a;cmake 编译报错 解决办法&#xff1a;添加一条语句 set(DEMO_NAME "test_seg") #这里的test_seg就是src里的文件名问题2&#xff1a; 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 LNK2038 检测到“RuntimeLibrary”的不匹配项: 值“MT_Stat…