移動端+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