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

编辑：rootadmin

微信小程序实现文字长按复制、一键复制功能一、不引入外部组件的实现方式 <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中

效果

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

赶快去试试吧~

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

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

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