位置: IT常识 - 正文

微信小程序实现文字长按复制、一键复制功能(微信小程序实现轮播图)

编辑:rootadmin
微信小程序实现文字长按复制、一键复制功能 一、不引入外部组件的实现方式 <!-- index.wxml --><view> <!-- 长按复制 --> <view bindlongtap="copyText" data-key="{{item.cdkey}}">{{ item.cdkey }}</view> <text bindlongtap="copyText" data-key="{{item.cdkey}}">{{ item.cdkey }}</text> <!-- 一键复制 --> <view bindtap="copyText" data-key="{{item.cdkey}}" > 复制 </view></view>长按复制 可利用 bindlongtap 方法,手指长按 500ms 之后触发事件。一键复制 可利用 bindtap 方法,点击立即触发事件。// index.js copyText(e) { let key = e.currentTarget.dataset.key; wx.setClipboardData({ //设置系统剪贴板的内容 data: key, success(res) { console.log(res, key); wx.getClipboardData({ // 获取系统剪贴板的内容 success(res) { wx.showToast({ title: '复制成功', }) } }) } }) }

推荐整理分享微信小程序实现文字长按复制、一键复制功能(微信小程序实现轮播图),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:微信小程序实现懒加载,微信小程序实现轮播图,微信小程序实现轮播图,微信小程序实现轮播图,微信小程序实现聊天功能,微信小程序实现发红包,微信小程序实现聊天功能,微信小程序实现轮播效果的组件,内容如对您有帮助,希望把文章链接给更多的朋友!

注:样式可自行添加适合的样式

效果:

二、引入外部组件的实现方式微信小程序实现文字长按复制、一键复制功能(微信小程序实现轮播图)

select-text 可选文本组件。该组件有两种使用模式:长按出现选区,与浏览器默认效果一致;长按出现复制按钮,点击复制拷贝全部内容至剪贴板,常见于聊天对话框等场景。 需注意的时,为实现点击其它区域隐藏复制按钮,开发者可在页面最外层监听 tap 事件,并将 evt 对象赋值给 on-document-tap。 安装

npm install @miniprogram-component-plus/select-text

在页面 page.json 中

// page.json{ "usingComponents": { "mp-select-text": "@miniprogram-component-plus/select-text" }}

在页面index.wxml中

<view bind:tap="handleTap"> <view class="demo-block"> <block wx:for="{{arr}}" wx:key="placement"> <view class="list-item"> <mp-select-text show-copy-btn placement="{{item.placement}}" value="{{item.value}}" data-id="{{index}}" bindcopy="onCopy" on-document-tap="{{evt}}" > </mp-select-text> </view> </block> <view class="list-item"> <mp-select-text value="默认的长按效果与浏览器一致"></mp-select-text> </view> </view></view>

效果

具体实现请参考:select-text组件

赶快去试试吧~

本文链接地址:https://www.jiuchutong.com/zhishi/299253.html 转载请保留说明!

上一篇:npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。(无法将node项识别为)

下一篇:Web 攻防之业务安全:密码找回安全案例总结.(web攻防之业务安全实战指南在线阅读)

  • 偷税行为五年后被发现要接受行政处罚吗?
  • 可以从开发成本直接结转至主营业务成本吗
  • 事业单位下属企业员工转事业编
  • 生产车间领用的低值易耗品
  • 公司收到的拆迁补偿款计入哪个科目
  • 销售材料取得的进项税额
  • 道路占用挖掘费要交印花税吗
  • 特别纳税调整后 需要更正申报吗
  • 在建工程转固后又发生成本
  • 酒店客房主营业务支出明细表怎么写
  • 税务局买税控盘需要的资料
  • 保险公司赔偿计入营业外收入
  • 公园门票可以开发票吗
  • 同一控制下企业合并商誉
  • 分公司会有股东吗
  • 工会经费可以用于哪些支出
  • 一般纳税人和小规模纳税人的区别
  • 冲账与挂账之间有什么区别?
  • 物业公司收取的广告费开什么发票
  • 退税收入要不要交所得税?
  • PRISMSVR.EXE - PRISMSVR是什么进程 有什么用
  • 预付款项属于什么会计要素
  • 环境保护税入账什么会计科目
  • 网关设置
  • win10开机强制进入高级选项怎么退出
  • 提取企业发展基金用到银行存款科目吗
  • web渗透实战
  • json与json字符串
  • 麒麟软件的linux桌面操作系统
  • 计入职工福利费的有哪些
  • wordpress shortcode
  • 纳税人性质是什么
  • csdn创作激励
  • 什么是大语言模型(LLM)?
  • 损益类科目资产增加在借方还是贷方
  • php怎么上传图片并保存到数据库
  • 收购发票的开具管理
  • 企业在什么情况下可以不交税
  • 城市道路占用费的收费标准
  • 26个字母!
  • mongodb进阶与实战下载
  • 所得税做账是否需要发票
  • 免税蔬菜交企业所得税吗
  • 公司借个人借款协议书范本
  • 增值税发票抵扣期限是多久
  • sql的where条件怎么写
  • 金税三期业务操作手册
  • 给天猫开的服务怎么关闭
  • 营业收入是指从全部营业收入中扣除
  • 实收资本在核算上有哪些要求
  • 借款可以抵扣企业所得税
  • 收到银行手续费已做后期收到发票怎么做
  • 技能培训费属于哪个科目
  • 建筑图纸设计费多少钱
  • 企业注销时应收帐款如何处理
  • 收到红字发票如何入账
  • 企业专家咨询费标准
  • 国有资产无偿划转税收政策
  • 以前年度应收账款无法收回
  • 异地成立子公司能用母公司的名称吗?
  • 供应商销售折让怎么入账
  • ubuntu 桌面
  • 在windows中创建用户的步骤
  • 深度u盘装xp系统教程
  • win10系统打开网页一会儿就没了
  • win7系统补丁包
  • linux开发经验指的什么
  • CentOS技巧:减小Linux swap分区的方法
  • linux常用命令清除
  • win8.1使用技巧
  • win 10系统怎么查看网络连接
  • three.js入门教程(合集)
  • python迭代器生成器
  • javascript面向对象编程
  • 无锡吴氏字辈
  • 内蒙古国地税网上办税服务厅
  • 计算车辆购置税公式
  • 教师资格证认定流程
  • 河南省纳税服务平台
  • 增值税纳税申报表附列资料(三)
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设