带货直播系统源码中,商品详情页是如何搭建起来的

2020-07-17 17:27:26 浏览数 (1)

市面上大多数带货直播系统源码的商品介绍详情页,都是仿照淘宝的商品详情页的制作的,那么这个模块是如何通过代码建立起来的呢?下面小编将会通过代码来描述其实现过程。

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;
}

以上就是带货直播系统源码中,商品介绍详情页是被如何搭建起来的。

声明:以上内容为作者本人原创,未经作者本人同意,禁止转载,否则将追究相关法律责任。

0 人点赞