小程序多数据按钮复制功能

最新推荐文章于 2024-07-19 09:45:14 发布

原创最新推荐文章于 2024-07-19 09:45:14 发布 · 365 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了在小程序中实现社区图文内容复制功能的方法，通过按钮触发复制事件，利用wx.setClipboardData API将指定文本复制到系统剪贴板，实现一键复制功能。

业务是小程序内有社区，展示类似朋友圈图文结合，可以长按复制，也可按钮复制

这里介绍下按钮复制：

  <view class="content">
    <view wx:for="{{duplicate}}">
      <button bindtap="copy" data-id="{{item.id}}">复制</button>
      <text>{{item.txt}}</text>
    </view>
  </view>

// 假数据
Page({
  data: {
    duplicate:[
          {txt:'占位1占位1占位1占位1占位1占位1',id:0},
          {txt:'占位2占位2占位2占位2占位2占位2',id:1},
          {txt:'占位3占位3占位3占位3占位3占位3',id:2}
        ],
       }
    })

// 复制按钮事件
  copy:function(e) {
    var i =e.currentTarget.dataset.id; // 取按钮的索引
    var that =this;
    wx.setClipboardData({
      data: that.data.duplicate[i].txt, // 取数据对应值
      success: function (res) {
          wx.getClipboardData({
              success: function (res) {
                  wx.showToast({
                      title: '复制成功'
                  })
              }
          })
      }
  })
  },

数据是遍历的，按钮也是，那我就想到按钮索引取数据对应值，easy