移动端复制动态内容到剪切板，数据采用上拉加载的方式，点击按钮将选中的数据复制到剪切板，到需要粘贴的地方粘贴就可以了。
自测微信浏览器没有什么问题。按钮样式问题、下拉刷新问题还在处理中，尽快更新上来。（若发现其他问题请留言，谢谢！）
<!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>后台传入数据格式及前台显示样式如下图，仅供参考。
952
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
