极客观点
项目管理
HarmonyOS
需要做一个特效，是在原有项目上进行的二次开发，要做的一个效果是
点击视频出现下面这个功能，相关视频下面还有视频列表但因为是静态页面所以没有显示
点击评论出现下面这个功能模块
相关代码
html：
<div class="container-videos" id="container-Tactics">
<div class="classIfication">
<ul>
<li>
<span>视频</span>
</li>
<li>
<span>评论</span>
</li>
</ul>
</div>
<div class="All_video">
<div class="swiper_video">
<div class="Grand_patrol jiepan">
<div class="jiepan_swiper" data-comment="title_video" data-Template="Template1">
<!--<div class="Title Title-video clearfix">
<div class="Title-video-left">
相关视频
</div>
<div class="Title-video-right">
<a href="">更多 >></a>
</div>
</div>-->
</div>
</div>
<div class="Read_the_tape jiepan">
<div class="jiepan_swiper" data-comment="title_comment" data-Template="Template2">
<div class="Title Title-comment clearfix">
<div class="Title-video-left">
评论（568）
</div>
<div class="Title-video-right">
<a href="">更多 >></a>
</div>
</div>
<div class="Grand_Template" id="Grand_Template_1">
<div class="Grand_Template-center">
<div class="Grand_Template-title clearfix">
<div class="left">
<nav><img src="../images/images/user_infor.png"></nav>
<h2>张哈哈哈哈</h2>
</div>
<div class="right">
<i class="iconfont"></i><span>39</span>
</div>
</div>
<div class="Grand_Template-text">
<p>潘老师讲的就是好，上次买的他推荐的票，几天就涨了30%。希望今天退的股继续大涨。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="send_comment">
<div class="send_comment_center">
<input type="text" name="content" class="content" placeholder="我来说一说···" /><button class="send">发送</button>
</div>
</div>
</div>
<div class="box hide">
<p><i class="iconfont"></i></p>
</div>
js：
var aJpSwiper=document.querySelectorAll(".jiepan_swiper");
tabLoad.prototype.bind(aJpSwiper[0],'title_video',function(){
this.innerHTML=`
<div class="Title Title-video clearfix">
<div class="Title-video-left">
相关视频
</div>
<div class="Title-video-right">
<a href="v_senior.html">更多 >></a>
</div>
</div>
`
});tabLoad.prototype.bind(aJpSwiper[1],'title_comment',function(){
this.innerHTML=`
<div class="Title Title-video clearfix">
<div class="Title-video-left">
评论（${num}）
</div>
<div class="Title-video-right"></div>
</div>
`
});
加载的js：
function tabLoad(obj,oJson){
var This=this; //构造出来的对象
var oDir=oJson.dir?oJson.dir:"y";
var oPrevent=oJson.prevent!='undefinde'?oJson.prevent:true;
if(!oJson.prevent){
document.addEventListener("touchstart",function(e){e.preventDefault();},false);
document.addEventListener("touchmove",function(e){e.preventDefault();},false);
document.addEventListener("touchend",function(e){e.preventDefault();},false);
}
this.target=oJson.flag?oJson.flag:false;
this.link=oJson.link; //接口地址
this.aLink=oJson.data; //接口参数
this.oGetMessage=this.getWindow();
this.oParent=document.querySelector(obj);
console.log(this.oParent)
this.oClassFinc=this.oParent.querySelector(".classIfication");
this.aLi=this.oParent.querySelectorAll("li");
this.oIndex=oJson.add?oJson.add:0;//判断是哪个页面显示出来
this.oVideo=this.oParent.querySelector(".All_video");
this.oSwiper=this.oParent.querySelector(".swiper_video");
this.aJieS=this.oParent.querySelectorAll(".jiepan_swiper");
this.oJp=this.oParent.querySelectorAll(".jiepan");
this.oWidth=this.oJp[0].offsetWidth;
this.oSwiper.style.width=this.oWidth*this.oJp.length+'px';
this.oSwiper.style.transform="translateX(-"+this.oIndex*this.oJp.length+'px)';
//这里是滑屏配置变量
this.oFn=oDir=='y'?"offsetHeight":'offsetWidth';
this.oPage=oDir=='y'?"pageY":"pageX";
this.dir=oDir=='y'?'Y':'X';
this.oTran=oDir=='y'?"translateY":"translateX";
this.setHeight();//设置高度
window.onresize=function(){ //页面发生变化的时候
This.oGetMessage=This.getWindow();
This.setHeight();
};
for(var i=0;i<this.aLi.length;i++){
(function(index){
This.aJieS[i].style.cssText="";
This.aJieS[i].dataset.translateX=0;
This.aJieS[i].dataset.translateY=0;
This.aJieS[i].indexs=0;
This.aJieS[i].index=index;
This.aJieS[i].innerHTML="";
This.aJieS[i].Loding=false;
This.aLi[i].flag=true;
This.aLi[i].className="";
if(!This.aLi[i].addEvent){
This.aLi[i].addEventListener("touchend",This.iOpen.bind(This,index),false);
This.aLi[i].addEvent=true;
}
}(i))
};
this.iOpen(this.oIndex);//第一次的触发
};
tabLoad.prototype={
"constructor":tabLoad, //修正函数指向
"getWindow":function(){
return {
"clientWidth":document.documentElement.clientWidth||document.body.clientWidth,
"clientHeight":document.documentElement.clientHeight||document.body.clientHeight
}
},
"hasClass":function(obj,attr){
var oIndex="";
for(var i=0;i<obj.length;i++){
if(obj[i].className.indexOf(attr,0)!=-1){
oIndex=i;
break
}
}
return oIndex
},
/*任意进制加密*/
"EnChTo":function(text,h){
window.localStorage.setItem("base36",h);
var monyer = new Array();var i,s;
for(i=0;i<text.length;i++){
monyer+=text.charCodeAt(i).toString(h)+" ";
}
return monyer;
},
/*任意进制解密*/
"DeChTo":function(text){
var monyer = new Array();var i;
var s=text.split(" ");
for(i=0;i<s.length;i++){
monyer+=String.fromCharCode(parseInt(s[i],window.localStorage.getItem("base36")));
}
return monyer;
},
"setHeight":function(){
this.oVideo.style.height=this.oGetMessage.clientHeight-this.oClassFinc.offsetHeight+'px';
this.oSwiper.style.height=this.oGetMessage.clientHeight-this.oClassFinc.offsetHeight+'px';
this.oJp.forEach((item,index)=>{
item.style.height=this.oGetMessage.clientHeight-this.oClassFinc.offsetHeight+'px';
});
},
"iOpen":function(oIndex){
this.aLi[this.oIndex].classList.remove("active");
this.oIndex=oIndex;
this.oSwiper.style.transition="transform 0.6s cubic-bezier(0.64, -0.35, 0.35, 1.47)";
this.oSwiper.style.transform="translateX(-"+this.oIndex*this.oWidth+"px)";
this.aLi[this.oIndex].classList.add("active");
if(this.aLi[this.oIndex].flag){
this.aJieS[this.oIndex].dataset.comment&&this.triggle(this.aJieS[this.oIndex],this.aJieS[this.oIndex].dataset.comment)
this.aLi[this.oIndex].flag=false;
this.getData({
"link":this.aLink[this.oIndex],
"oIndex":this.oIndex
});
if(!this.aJieS[this.oIndex].addEvent){
this.Sliding_screen({
el:this.aJieS[this.oIndex],
});
};
}
},
"getData":function(data){
var This=this;
var oShowE=this.aJieS[data.oIndex];
//这里进行接口调用
var oData=data.link?data.link:{};
oShowE.indexs+=1;
oData.page=oShowE.indexs;
var url=$.type(this.link).toLowerCase()=='array'?this.link[data.oIndex]:this.link;
$.ajax({
"url":url,
"data":oData,
"dataType":"json",
"type":"get",
"success":res=>{
if(res.data){
var oTemp=oShowE.dataset.template?oShowE.dataset.template:"Template1";
for(var i=0;i<res.data.length;i++){
oShowE.innerHTML+=this[oTemp](res.data[i],i);
}
var oLoading=oShowE.querySelector(".Loading");
if(oLoading){
oLoading.remove();
oShowE.Loding=false;
}
this.after&&this.after();
}else{
oShowE.Loding=true;
if(oShowE.indexs!=1){
var oLoading=oShowE.querySelector(".Loading");
oLoading.remove();
oShowE.innerHTML+="<p style='font-size: 20px; color:#f00; text-align: center;'>没有更多数据了...</p>"
setTimeout(function(){
var obj=oShowE.children[oShowE.children.length-1];
obj.remove();
This.oMaxS=(oShowE.parentNode[This.oFn]-oShowE[This.oFn]-20)>0?0:(oShowE.parentNode[This.oFn]-oShowE[This.oFn]-20);//最大上拉值
oShowE.style.transform=This.oTran+"("+This.oMaxS+"px)";
oShowE.dataset[This.oTran]=This.oMaxS;
},5000);
}else{ //第一次没有数据
oShowE.style.height="100%"
oShowE.innerHTML+="<div class='null' style='position:relative;height:100%'>\
<div style='position:absolute;width:100%'>\
<img src='../images/beijin.jpg'>\
<p style='font-size: 20px; color:#9C9C9C; position: absolute; top: 100%; transform: translateY(-50%); width: 100%; text-align: center;'>暂时没有数据<br/>╥﹏╥</p>\
</div>\
</div>"
}
};
},
"error":function(res){
}
})
}，
"bind":function(obj,events,fn){
obj.oJson=obj.oJson||{};
obj.oJson[events]=obj.oJson[events]||[];
obj.oJson[events].push(fn);
console.log(obj)
},
}
要怎么做才能使用bind方法绑定这两个功能,在点击视频或评论功能时加载这两个功能模块啊，或者怎么改进一下也行
html5
java