移动端+PC端复制动态内容到剪切板

时间 2019-11-11
标签移动复制动态内容剪切板栏目无线繁體版
原文原文链接
移动端复制动态内容到剪切板，数据采用上拉加载的方式，点击按钮将选中的数据复制到剪切板，到须要粘贴的地方粘贴就能够了。javascript
自测微信浏览器没有什么问题。按钮样式问题、下拉刷新问题还在处理中，尽快更新上来。（若发现其余问题请留言，谢谢！）css
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="__TMPL__/public/assets/weui/lib/weui.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/weui/css/demos.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/weui/css/jquery-weui.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/main.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/mescroll.css">
<style>

/* 资源中心 */
.divide-line{
    background-color: #e2e2e2;
    height: 0.5rem;
}
.resource-center .checkbox-item-container {
    position: relative;
    border: 1px solid #f5f5f5;
}
.resource-center .checkbox-item-container .like-count{
    position: absolute;
    top: 0.35rem;
    right: 0.8rem;
    background-color: #f33900;

    border-radius: 0.8rem;
    padding: 0.2rem 0.3rem;
    color: #ffffff;

}
.resource-center .checkbox-item-container .like-count img{
    height: 1rem;
    vertical-align: middle;

}
.resource-center .checkbox-item-container .like-count span{
    position: relative;
    right: 0.1rem;
    display: inline-block;
    width: 2.5rem;
    text-align: center;
}

.weui-cells_checkbox{
   margin-top: 0;
   border: 0;

}
.weui-check__label{
   padding-top: 0.6rem;
   padding-bottom: 0.6rem;
}
.weui-check__label .weui-cell__bd p{
    font-size: 0.8rem;
    overflow: hidden;
    width: 11rem;
    white-space: nowrap;
    text-overflow:ellipsis;
   
   

}
#copyTarget,#copyArea {
    width: 0;
    height: 0;
    opacity: 0;
}

.resource-center .share-btn input{
    width: 100%;
    border-radius: 0;

    position: fixed;
    bottom: 0;
}
</style>


</head>

<body>

    <div id="app">

        <div class="resource-center" id="mescroll">
            <form action="">
                <div class="resource-list" >
                    <div class="weui-cells weui-cells_checkbox" id="list">

                    </div>
                </div>


                <textarea class="code-num" id="copyTarget" ></textarea>

                <div class="share-btn">
                    <button type="button" id="copyBtn" class="weui-btn weui-btn_primary copy_video_list"  data-clipboard-action="copy" data-clipboard-target="#copyTarget" >分享视频</button>
                </div>

            </form>
        </div>
    </div>

</body>
<script src="__TMPL__/public/js/jquery-1.10.2.min.js"></script>
<script src="__TMPL__/public/js/layer/layer.js"></script>
<script src="__TMPL__/public/js/clipboard.min.js"></script>
<script src="__TMPL__/public/js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>

<script>

    $(function () {

        var page = 1;
        //建立MeScroll对象
        var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id (1.3.5版本支持传入dom对象)
            //若是您的下拉刷新是重置列表数据,那么down彻底能够不用配置,具体用法参考第一个基础案例
            //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
            down: {
                    auto: false,
                    callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
                },
            up: {
                callback: upCallback, //上拉加载的回调
                //如下是一些经常使用的配置,固然不写也能够的.
                page: {
                    num: 0, //当前页 默认0,回调以前会加1; 即callback(page)会从1开始
                    size: 5 //每页数据条数,默认10
                },
                noMoreSize: 10, //若是列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
                toTop: {
                    //回到顶部按钮
                    src: "", //图片路径,默认null,支持网络图
                    offset: 1000 //列表滚动1000px才显示回到顶部按钮  
                },
                empty: {
                    //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
                    warpId: "list", //父布局的id (1.3.5版本支持传入dom元素)
                    icon: "", //图标,默认null,支持网络图
                    tip: "暂无相关数据~" //提示
                },
                lazyLoad: {
                    use: true, // 是否开启懒加载,默认false
                    attr: 'imgurl', // 网络图片地址的属性名 (图片加载成功会自动移除改属性): <img imgurl='网络图  src='占位图''/>
                    showClass: 'mescroll-lazy-in', // 图片加载成功的显示动画: 渐变显示,参见mescroll.css
                    delay: 500, // 列表滚动的过程当中每500ms检查一次图片是否在可视区域,若是在可视区域则加载图片
                    offset: 200 // 超出可视区域200px的图片仍可触发懒加载,目的是提早加载部分图片
                }
            }
        })

        /*下拉刷新的回调 */
        function downCallback(){
            window.location.reload();
        }

        /*上拉加载的回调*/
        function upCallback(param) {
            //加载层-默认风格
            layer.load();
            //获取动态数据
            $.ajax({
                url:".......",
                type:'post',
                dataType:'json',
                data:{
                    page:param.num,
                    size:param.size
                },
                success:function (res) {
                    console.log(res);
                    mescroll.endBySize(res.data.length, res.all_num);

                    if(res.code == 1){
                        var list = res.data;
                        //有数据
                        if(list.length>0){
                            for(var i=0;i<list.length;i++){
                                var str = '<div class="checkbox-item-container"><label class="weui-cell weui-check__label"><div class="weui-cell__hd"><input type="checkbox" class="weui-check" name="video_ids[]" value="'+list[i].video_title+' '+list[i].url+'" checked><i class="weui-icon-checked"></i></div><div class="weui-cell__bd"><p>'+list[i].video_title+'</p></div></label><div class="like-count"><img src="__TMPL__/public/assets/images/jianghu/like.png" alt=""><span>'+list[i].buy_num+'</span></div></div>';
                                $("#list").append(str);
                            }
                            //此处关闭加载
                            layer.closeAll('loading');
                        }else{
                            //显示暂无数据
                        }
                    }else{
                        //报错了
                    }
                }
            });
        }


        //加载层
        var index = layer.load(0, {shade: false}); //0表明加载的风格，支持0-2
        
    });
    
    //复制数据
    function clipcopy() {
        //实例化clipboard
        var clipboard = new ClipboardJS('#copyBtn');
        ClipboardJS.isSupported()　　//是否兼容
        clipboard.on("success", function(e){
            
            layer.closeAll('loading');

            if(!e.text){
                // layer.msg('复制失败');
            }else{
                layer.msg('复制成功');
                e.clearSelection();
                clipboard.destroy();
            }
            
        });
        clipboard.on("error", function(e){
            console.log(e)
            layer.closeAll('loading');
        });
    }

    $("#copyBtn").click(function(){
        //加载层-默认风格
        layer.load();

        var videos = new Array();

        $('input[name="video_ids[]"]:checked').each(function () {
            videos.push($(this).val());
        });

        //复制内容不得为空
        var copyNum = videos.length
        if(copyNum>0){
            var str = '';
            for(var k = 0;k<copyNum ;k++){
                str += (k+1)+'、'+videos[k]+'\r\n';
            }
            console.log(str);
            clipcopy();
            $('#copyTarget').text(str);
        }else{
            //未选择视频
            layer.msg('未选择视频');
            layer.closeAll('loading');
            return;
        }

    });

</script>
</html>
后台传入数据格式及前台显示样式以下图，仅供参考。html
移动端+PC端 复制动态内容到剪切板

移动端+PC端复制动态内容到剪切板
