普通的文本里面实现长按复制功能
效果如下:
![图片[1]-微信小程序实现可以复制文本功能-VUM星球](https://www.vumstar.com/wp-content/uploads/2024/01/20240113001603268-IMG_8636-472x1024.png)
实现方式:
- index.wxml
<text user-select="{{true}}">报修单号:{{orderDetail.order_num}}</text>
在需要复制的内容出加入text标签
![图片[2]-微信小程序实现可以复制文本功能-VUM星球](https://www.vumstar.com/wp-content/uploads/2024/01/20240113001931620-截屏2024-01-13-00.17.43-1024x737.png)
<picker>选框中实现复制选框中的内容
效果如下:
![图片[3]-微信小程序实现可以复制文本功能-VUM星球](https://www.vumstar.com/wp-content/uploads/2024/01/20240113000412980-IMG_8633-472x1024.png)
![图片[4]-微信小程序实现可以复制文本功能-VUM星球](https://www.vumstar.com/wp-content/uploads/2024/01/20240113000503490-IMG_8635-472x1024.png)
![图片[5]-微信小程序实现可以复制文本功能-VUM星球](https://www.vumstar.com/wp-content/uploads/2024/01/20240113000542298-IMG_8634-472x1024.png)
实现方式:
- index.wxml页面
<view class="item ccc">
<view class="item-title">售后地址<i>*</i></view>
<picker value="{{addressModelIndex}}" range="{{addressModelArr}}" bindchange="changeAddressModel">
<view class="picker">
{{addressModelArr[addressModelIndex]}}
</view>
</picker>
<!-- 添加复制按钮 -->
<button bindtap="copyAddress">复制地址</button>
</view>
添加一个复制按钮
![图片[6]-微信小程序实现可以复制文本功能-VUM星球](https://www.vumstar.com/wp-content/uploads/2024/01/20240113000846866-截屏2024-01-13-00.07.55-1024x737.png)
- index.js页面
Page({
data: {
// ...其他数据
// 复制地址的处理函数
copyAddress() {
const addressToCopy = this.data.addressModelArr[this.data.addressModelIndex];
wx.setClipboardData({
data: addressToCopy,
success: function (res) {
wx.showToast({
title: '复制成功',
icon: 'success',
duration: 2000
});
},
fail: function (res) {
console.log(res);
}
});
}
})
![图片[7]-微信小程序实现可以复制文本功能-VUM星球](https://www.vumstar.com/wp-content/uploads/2024/01/20240112235550521-截屏2024-01-12-23.55.07-1024x737.png)
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容