前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >带货直播系统源码中,商品详情页是如何搭建起来的

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

原创
作者头像
万岳教育系统
修改2020-07-17 17:27:26
7090
修改2020-07-17 17:27:26
举报
文章被收录于专栏:万岳科技那些事儿

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

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

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

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档