微信小程序实现长按选中复制效果

微信小程序 --长按复制、点击复制简单实现

uni-app是一个跨平台的开发框架，可以基于vue.js语法开发小程序、H5、APP等多个平台的应用。uni-app提供了一些内置组件和API，可以方便地实现各种功能。其中，uni.setClipboardData函数是一个用于将数据复制到系统剪贴板的API，函数，你需要将为uni-app项目选择小程序平台（如微信小程序、支付宝小程序等）进行开发，并且确保相关平台的API支持。在开发小程序应用中，常常需要使用到长按复制功能。在上述示例中，当用户长按页面中的文本元素时，会触发。需要注意的是，为了使用。

【代码】微信小程序的复制功能。

长按复制

需注意的时，为实现点击其它区域隐藏复制按钮，开发者可在页面最外层监听 tap 事件，并将 evt 对象赋值给 on-document-tap。该组件有两种使用模式：长按出现选区，与浏览器默认效果一致；长按出现复制按钮，点击复制拷贝全部内容至剪贴板，在页面 page.json 中。注：样式可自行添加适合的样式。在页面index.wxml中。常见于聊天对话框等场景。

【代码】小程序中长按文字可进行复制。

微信小程序可长按移动控件 –包含超出边界监测，性能不够理想【原因：setData在毫秒级刷新时会极大程度影响渲染性能】 Javascript Page({ /** * 页面的初始数据 */ data: { //浮动按钮坐标 flow_y: 130, flow_x: 20, pre_y:0, pre_x:0, //标记移动 moveFlag: false, //标记控件是否可放置 canNotPlace: false

小程序长文本长按复制功能

微信小程序实现长按复制功能

在小程序中实现点击复制功能和长按复制功能,主要使用wx.setClipboardData 小程序的复制功能。

1、小程序如果需要长按复制文本，首先必须使用<text>标签，并且将selectable属性设置为true <text selectable='true'>xxxx</text> 2、按钮复制，使用微信内置api：wx.setClipboardDataAPI wx.setClipboardData({ data...

先来说明一下我们需要实现的最终效果： 用户点击之后复制页面内容。参考详情 一、长按复制： 长按复制，在微信小程序内的文字无法长按复制，除了text节点以外，但是要在text标签内加一个“selectable”属性。 话不多说，我们直接上代码 1.WXML < text selectable="true" >长按复制< text/> 二、一键复制： 添加点击事件，绑定...

wxml部分 <view class="basic-row" wx:if="{{role == 1 || lavel == 1}}" bindlongtap="copyLess" data-info="我是复制的文本"> </view> `` js部分 //复制 copyLess:function(event){ let info = event.currentTarget.dataset.info; wx.setClipboardDat

<textuser-select='true'>{{itext}}</text> 注意：<text selectable='true'>长按复制文本</text> selectable 属性已废弃