市面上大多数带货直播系统源码的商品介绍详情页,都是仿照淘宝的商品详情页的制作的,那么这个模块是如何通过代码建立起来的呢?下面小编将会通过代码来描述其实现过程。
1. 实现滑动控制到导航栏的显示和隐藏
代码语言:javascript复制mScrollView.setOnScrollChangeListener(new View.OnScrollChangeListener() {
@Override
public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
float alpha=(float)scrollY/(float)300; //aplpha值控制范围在0-300
ViewUtil.setAlpha(mVTab,alpha); //设置导航栏的透明度
public static void setAlpha(View view,float alpha) {
if(view==null||view.getAlpha()==alpha){
return;
}
if(alpha>1){ //大于1过滤
alpha=1F;
}
view.setAlpha(alpha);
}
2. 实现点击导航栏切换到对应的模块
代码语言:javascript复制private void checkDffect(int item) { //item 0,1,2,3 分别对应的4个模块
if(mCurrentItem==item){
return;
selectTabLine(item);
switch (item){
case 0:
scroll(mPannelViewProxy);
break;
case 1:
scroll(mGoodsEvaluateViewProxy);
break;
case 2:
scroll(mGoodsRecommendViewProxy);
break;
case 3:
scroll(mGoodsWebViewProxy);
private void scroll(final BaseGoodItemViewProxy goodItemViewProxy) {//goodItemViewProxy是view的管理器
if(mScrollView!=null&&goodItemViewProxy!=null&&goodItemViewProxy.getTop()!=-1){
mScrollView.post(new Runnable() { //通过post方法延迟执行
@Override
public void run() {
mScrollView.scrollTo(0,goodItemViewProxy.getTop());//传入view的top
}
});
}else {
DebugUtil.sendException("scroll报错了");
}
}
3. 手指滑动页面,tab自动切换到对应的显示位置
代码语言:javascript复制mScrollView.setOnScrollChangeListener(new View.OnScrollChangeListener() {
@Override
public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
if(mPannelViewProxy!=null){
if(mPannelViewProxy.isScrollTop(scrollY)){ //每一个view都去监听scrollview的滚动位置
selectTabLine(0);
if(mPannelViewProxy.getOffectTabHeight()==0){
//将tab栏高度传入,加入偏移量,目的是控制view滑动到tab栏正下面属于复合条件
mPannelViewProxy.setOffectTabHeight(mVTab.getHeight());
}
}
}
public boolean isScrollTop(int dy){
boolean isUp=lastScroolDy-dy>0;//是否是上滑
dy=dy mOffectTabHeight; //加入偏移量
if(mContentView!=null){
mTop=mContentView.getTop(); //
mBottom=mContentView.getBottom();
/*因为onScrollChange不是绝对实时的,并不能精确控制到没有误差,所以加入30上下到允许值*/
if(Math.abs((dy-mTop))<30){ //当滑动到view顶部的时候
return true;
}else if(isUp&&Math.abs((dy-mBottom))<30){//当向上滑到view的底部的时候,也应该切换到对应的栏目
return true;
}
}
lastScroolDy=dy; //记录上一次滑动的值
return false;
}
以上就是带货直播系统源码中,商品介绍详情页是被如何搭建起来的。
声明:以上内容为作者本人原创,未经作者本人同意,禁止转载,否则将追究相关法律责任。