仿淘宝菜单栏线条滚动

模拟淘宝/支付宝——实现tab栏左右拖动,进度条同步滑动距离 01 需求简单效果图 02 代码 html js LAST 监听事件 附上代码: // 导航栏滑动 slide () { let that = this let left = this.$refs.navTabItems.scrollLeft // 导航栏向左滑动的距离 that.scrollLeft = left ... 阅读详情

布局

布局代码
<LinearLayout
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </android.support.v7.widget.RecyclerView>
    <RelativeLayout
        android:id="@+id/parent_layout"
        android:layout_gravity="center"
        android:layout_width="100dp"
        android:layout_height="5dp"
        android:background="@drawable/bg_fast_view">
        <View
            android:id="@+id/main_line"
            android:layout_width="30dp"
            android:layout_height="5dp"
            android:background="@drawable/bg_scroll_bar"
            android:layout_centerVertical="true"/>
    </RelativeLayout>

</LinearLayout>
adapter代码 主要是设置item的宽度。
public class IndexMenuAdapter extends RecyclerView.Adapter<IndexMenuAdapter.ViewHolder> {
    private List<MenuBean.DataEntity> data=new ArrayList<>();
    private Context mContext;
    private int width;

    public IndexMenuAdapter(Context context) {
        mContext=context;
        width = (ScreenUtils.getScreenW(context) - ScreenUtils.dip2px(context,20)) / 5;
    }

    public List<MenuBean.DataEntity> getData() {
        return data;
    }

    public void setData(List<MenuBean.DataEntity> data) {
        this.data = data;
        notifyDataSetChanged();
    }


    @Override
    public IndexMenuAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View contentView = LayoutInflater.from(parent.getContext()).inflate(R.layout.index_menu_item, parent, false);
        IndexMenuAdapter.ViewHolder viewHolder = new IndexMenuAdapter.ViewHolder(contentView);
        ViewGroup.LayoutParams params = contentView.getLayoutParams();
        params.width = width;
        contentView.setLayoutParams(params);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        RequestOptions options=new RequestOptions();
        options.placeholder(R.mipmap.index_zwt_icon);
        options.error(R.mipmap.index_zwt_icon);
        Glide.with(mContext).load(data.get(position).getImg()).apply(options).into(holder.icon);
        holder.name.setText(data.get(position).getName());
    }

    @Override
    public int getItemCount() {
        if (data!=null) {
            return data.size();
        }else{
            return 0;
        }
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        private ImageView icon;
        private TextView name;

        public ViewHolder(View itemView)
        {
            super(itemView);
            icon = (ImageView) itemView.findViewById(R.id.index_menu_icon);
            name = (TextView) itemView.findViewById(R.id.index_menu_name);
        }
    }
}


滑动主要代码
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
    @Override
    public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
        super.onScrollStateChanged(recyclerView, newState);

    }

    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);

        //整体的总宽度,注意是整体,包括在显示区域之外的。
        int temp=mRecyclerView.computeHorizontalScrollRange();
        if (temp>range){
            range=temp;
        }
        int offset = mRecyclerView.computeHorizontalScrollOffset();
        int extent = mRecyclerView.computeHorizontalScrollExtent();

        float proportion = (float) (offset*1.0 / (range-extent));
        //计算滚动条宽度
        float transMaxRange = mLayout.getWidth() - mLineView.getWidth();
        //设置滚动条移动
        mLineView.setTranslationX(transMaxRange * proportion);
        Log.e("scrll",transMaxRange+"---"+range+"---"+"---"+proportion+"---"+offset+"----"+extent);

    }

});
豆包AI图片批量无水印下载技术方案 AI生成图片的本地化归档是内容创作者、教育工作者和电商运营的基础需求。其核心在于区分‘渲染层水印’与‘原始图像数据’——豆包等平台采用前端Canvas叠加SVG水印,原始图以带时效签名的OSS直链形式存在,未嵌入像素。掌握DOM资源提取与URL解码技术,即可绕过界面限制,合法获取无水印源文件。该方法不依赖插件、不调用私有API、不经过第三方服务器,符合《个人信息保护法》最小必要原则,适用于Chrome/Firefox/Edge等主流浏览器。本文聚焦豆包平台,详解如何通过浏览器控制台执行轻量JavaScrip 阅读详情

相关推荐

3Dmax从入门到精通:建模、渲染与崩溃问题全解析

三维建模与渲染是数字内容创作的核心技术,其原理在于通过计算机图形学算法,在虚拟三维空间中构建、修饰并最终生成逼真或风格化的图像。这项技术的核心价值在于能够高效、精准地实现从概念设计到可视化呈现的全流程,广泛应用于建筑可视化、游戏开发、影视特效及工业设计等领域。在实际工程实践中,Autodesk 3ds Max(简称3Dmax)作为行业标准软件之一,凭借其强大的多边形建模工具、灵活的材质系统和丰富的插件生态,成为众多设计师和艺术家的首选。然而,软件使用中常遇到如“3dmax一保存就崩溃”和“3dmax渲染完保

weixin_30437847的博客 388

仿淘宝菜单栏左右滑动(VUE 移动端)

可通过左右滑动上方的结构来实现下方滑块的跟随移动; 个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用 具体效果: HTML *使用两个数组分为上下两行 单个盒子设置固定宽度(以便后面进行计算)在包裹这两行数组的最外层盒子“menuItemsNav”添加 @scroll="scrollEvent 事件 *如果后台返回的是一个数组,可以根据下标奇、偶数来划分为两个数组 <!-- 菜单分类 --> <div class="menuItems"> .

qq_44481903的博客 3441

tablayout+recyclerview 实现仿淘宝、京东商品详情滑动切换tab效果

仿淘宝、京东商品详情上滑切换tab实现,实现基于: tablayout + recyclerview

仿淘宝侧边栏

仿淘宝侧边栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .slider-ba

xiaoqingwa156的博客 217

仿拼多多,淘宝水,平滑动宫格,自定义滚动条

主要实现水平滑动recyclerView处理滚动条,以及可滑动区域,实现仿拼多多,淘宝水平滑动

android仿淘宝聚划算UI左右滑动带分页显示

NULL 博文链接:https://yafei.iteye.com/blog/1172772

仿Android淘宝顶部导航栏的HorizontalScrollView Demo实例(源码在文末)

Android仿淘宝顶部导航栏的 HorizontalScrollView的实例,涉及自定义View的实践、布局优化、不同设备分辨率的UI一致性等

weixin_43959610的博客 553

高仿淘宝首页菜单滑动效果

高仿淘宝首页菜单滑动效果,不分页。 重要逻辑:通过菜单的偏移量计算PageControl的偏移量 pageControl的偏移量为pageControl的总宽度减去滑块的总宽度, 同理scrollView的偏移量为scrollView的内容宽度减去scrollView的宽度。 通过比例计算可得出pageControl的偏移量, 即offsetX:scrollView可偏移的总距离=x:pageControl可偏移的总距离 整理得x = offsetX*pageControl可偏移的总距离/scrollView可偏移的总距离

recyclerView横条指示器——仿淘宝菜单模块

找了好久没看到JAVA代码的 只好自己根据思路自己改了,话不多说 上代码 新建HIndicators.java类 public class HIndicators extends View { private Paint mBgPaint = new Paint(Paint.ANTI_ALIAS_FLAG); private RectF mBgRect = new RectF(); private Float mRadius = 0f; private P...

pengtaQ的博客 1890

仿淘宝网带滑动二级导航菜单

蓝色横向二级导航,div+css,网上下的,需要的拿去

web app实现左右滑动控制菜单

这可是我花了2天时间摸索敲打出来的,如果没积分的同学可以在http://blog.youkuaiyun.com/wowkk/article/details/22699611 留下你的邮箱。

RecycleView + 线条滚动

仿淘宝菜单栏线条滚动 滑动主要代码 mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrollStateChanged(RecyclerView recyclerView, int newState) { super.onScrollStateChan...

qq_36964120的博客 228

jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)

淘宝网上的菜单滑动伸展收缩想必大家不会很陌生吧,接下来本文也使用jquery+css实现一个,代码很简洁功能很使用,感兴趣的各位可以不要错过了哈

淘宝白底图有什么要求 淘宝白底图权重及注意事项

  淘宝商品白底图就是白色背景加宝贝展示图,白底图能够突出宝贝,而且能与手机淘宝首页白色背景融合,达到整体美感,干净清爽,其实也就是红花与绿叶的关系,因为有了白底图才能存托出主图的优势,那么白底图有什么要求呢?   1、白底图的形状必须是800x800的正方形的,并且因为目前的图片格式有很多,因此淘宝对白底图特意做了要求,必须是JPG格式,大小则要求大于38k小于300K。   2、白底图...

小雨点的博客 1万+

麒麟银河操作系统V10下ffmpeg的完整部署指南(兼容Linux系统)

本文提供在麒麟银河操作系统V10上从源码编译部署FFmpeg的完整指南,涵盖环境准备、核心依赖库(如x264)编译、FFmpeg本体配置安装、系统集成及常见问题排查。步骤详细,同样适用于Ubuntu、CentOS等主流Linux发行版,帮助用户打造功能强大的多媒体处理工具链。

weixin_29205061的博客 255

一周涨十万星,GitHub 爆火的 REA 逆向工程到底是什么?

REA 这波热度里,我一直没太想明白的是它为什么火在 AI 圈而不是安全圈。同类的 MCP 工具早就在了,技术上也谈不上新,真正变的只有一件事:门槛。门槛一降,参与的人就从"会逆向的工程师"变成了"会打字的任何人"。这大概也是争议的根源。护城河这件事,多数报道的共识是它从"你看不到我的代码"挪到了"你拿不走我的服务能力和业务理解"。这话对不对,现在没人拿得出证据,只能等下一批真实案例。哪天有人拿 REA 把某个还在卖钱的闭源软件啃出可维护的工程,那个答案才算落地。

优快云zhizunbao的博客 1178

Qwen3-VL增强推理版部署:Thinking模型与Instruct版本对比教程

本文介绍了如何在星图GPU平台上自动化部署Qwen3-VL-2B-Instruct镜像,实现高效图文理解与指令响应。该镜像适用于电商商品图批量解析、客服截图答疑、无障碍屏幕描述等典型场景,显著提升多模态内容处理效率与准确性。

weixin_42600128的博客 412

从0开始部署基础的AlwaysOn

在这个快餐文化盛行的时代,应该没多少人真的会沉下心来看理论和具体步骤,加上我自己也需要一篇可以扩展的快速搭建环境的指引,所以特别写了这篇文章。 我们在这里要做的事情有以下几个:安装环境。包括虚拟机和网络配置等。安装Windows域、配置必要的账号密码及功能。搭建域环境并进行配置。安装配置Windows Server Failover Cluster(WSFC)。安装SQL Server。配置Alw

MVP黄钊吉(發糞塗牆) 7567

recyclerView 横条指示器——仿淘宝菜单模块

电商首页菜单模块,可以横向滑动,底部的滑动位置指示器 如何实现呢? 下图是淘宝首页的示例。 首页思路很清晰: 1、横向滑动recyclerView: 内容长度w1 大于recyclerView的视图长度w2(这里就是屏幕宽度),两者差值就是在屏幕外的长度。 2、位置指示器: 固定的灰色背景 理解为 对应 recyclerView 内容长度w1,可滑动的 橙色指示器 对应recycl...

胡飞洋的技术积累 4894

SLG项目开发经验二_大地图设计与实现

本文深入探讨了SLG游戏大地图设计与实现的关键技术,包括网格化业务框架、AOI系统优化、边界处理方案以及行军系统实现。通过Unity引擎的实践案例,详细解析了大地图性能优化的核心策略,如分块加载、GPU Instancing和差异同步协议,为SLG项目开发提供宝贵经验。

weixin_29001419的博客 216

LLC同步整流实战:从驱动时序到调试仿真,效率提升与避坑指南

同步整流技术是提升开关电源效率的关键手段,尤其在LLC谐振变换器中,通过低导通电阻MOSFET替代二极管可显著降低副边整流损耗。然而,驱动时序、电流过零检测及轻载模式切换是工程实践中的核心难点。从Vds检测原理到死区调节,再到仿真与实测验证,工程师需掌握完整的调试方法论。该技术广泛应用于通信电源、服务器电源及车载DC/DC,合理设计LLC同步整流方案能实现满载效率提升约1.8个百分点,同时优化热分布。本文以600W半桥LLC样机为线索,深入分析工作模态、驱动芯片选型、波形判断与仿真模型搭建,为电源设计提供可

weixin_29165465的博客 293
上一篇: NDK 调用so包以及找不到类出错。
下一篇: 仿微信朋友圈图片浏览动画效果,大图,超长图。
SXH_Android
博客等级 码龄11年 16粉丝 19原创
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值