位置: 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攻防之业务安全实战指南在线阅读)

  • 山东省增值税发票查验平台
  • 增值税的附加税比例
  • 存货跌价准备在财务报表哪里看
  • 医疗服务有增值业务吗
  • 税控盘服务费抵减有效期几年
  • 股本权益性投资是什么
  • 免单计入什么科目
  • 支付的劳务派遣服务费现金流量
  • 购买税控盘的钱能全额抵扣增值税吗
  • 增值税普票未上传怎么办
  • 营改增后房地产企业增值税如何核算
  • 有进项没有销项可以零申报吗
  • 合伙企业个人所得税经营所得怎么申报
  • 股东转入实收资本
  • 购进货物赠送客户增值税处理
  • 工资结算天数
  • 财政专项资金不征税收入
  • 设置戴尔笔记本锁屏时间
  • 年度成本费用利润率多少合适
  • 企业废业实收资产怎么算
  • 公司绿化工程计入什么科目
  • 在linux系统中拥有
  • 微信小程序分成比例
  • 长期借款和短期借款的区别是什么
  • 不带息票据按面值入账
  • 巴芬岛旅游
  • 利用python自动填问卷
  • arcore如何使用
  • 办公用品属于会计科目中的什么
  • 劳务公司成本核算方法选择什么
  • java上传文件 multipartfile
  • 数字图像处理实验一实验报告
  • php短信验证
  • php静态方法可以被继承吗
  • php递归算法经典题目
  • mysql分表数量取决于什么
  • 计提短期借款利息会计分录怎么写
  • 代发工资范围
  • 农民工工资专用账户打款比例
  • 防伪税控技术服务费订单号怎么查
  • mysql的索引是什么
  • 关于python序列类型
  • 无产权证房屋转让需要公证吗
  • 烟草专卖生产企业许可证
  • 计提工资 个人所得税
  • 计提和实际发放的区别
  • MSSQL 2008 自动备份数据库的设置方法
  • 运输企业税负率一般控制在多少?
  • 进出口贸易公司取名字大全
  • 公司收到拆迁补偿金,于评估公司的区别
  • 税收优惠附加税怎么计算
  • 外汇收入需要缴纳增值税吗
  • 入账价值有
  • 会计科目表2023
  • 单位发放职工2000元慰问金申请怎么写
  • 房租押金不退如何处理
  • 企业筹建期间利润计算
  • 目标考核奖金做什么科目
  • dos命令win10
  • mysql8.0 主从
  • mysql解压版安装教程5.7.20
  • 指定为fvtpl
  • win7系统打开软件就停止工作
  • XP系统提示QQprotect.exe损坏文件的解决方法图文教程
  • 多种工具安装系统怎么用
  • ubuntu下安装windows
  • SmoothView.exe - SmoothView是什么进程
  • win7声音扬声器设置
  • dos所有命令的命令格式
  • perl编程
  • js的继承方式
  • unity shader视频教程
  • javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解
  • js中tolocalestring
  • javascript函数的定义
  • python批量ping
  • 大气污染物环保税计算
  • 大渡口在重庆吗
  • 广州市公安局分局待遇
  • 黄金消费税如何征收
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设