仿抖音首页界面

最新推荐文章于 2024-05-06 16:48:32 发布
最新推荐文章于 2024-05-06 16:48:32 发布
阅读量939 收藏 5
点赞数 2
文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouandyuan/article/details/125546440
版权

目录

效果图

顶部相关代码

顶部效果图

内容相关代码 

内容效果图

 底部导航栏相关代码

底部导航栏效果图

完整代码

 html

css

js

​flexible.js

要想做出抖音短视频的首页界面，我们要引用swiper插件、还需要用到iconfont图标（可自行到官网上下载）等。

效果图

 

我们可以将这个界面分为三个部分分别是：顶部（关注、推荐、附近）、中间（视频部分和右边点赞、评论、转发）、底部导航栏。利用swiper插件进行几个视频的滑动（swiper插件的用法可以去官网查看详细教程）。

顶部相关代码

我们可以用header组件来写该界面的顶部内容，又可以将顶部的分为三个部分（左边图标、中间文字、右边图标），下面看代码部分：

 

顶部效果图

最低0.47元/天 解锁文章
哆啦A梦没有口袋Y
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
android 高仿抖音界面,2018-11-05 Android 仿抖音选择封面自定义控件
weixin_36242516的博客
05-26 848
写在前头，抖音里面很多控件，效果很不错，但是，Android 跟iOS的表现形式以及实现方式，都是有区别的，这里实现Android左右拖拉控件进行视频封面选择。public class ChoiceCover extends View {private int mWidth;private int mHeight;private Paint mPaint;private RectF rectF;p...
Android实现个人中心
02-20
Android实现个人中心列表效果，以及个人中心的圆形图像和磨砂头像背景
Android 利用CoordinatorLayout实现高仿抖音个人中心 下拉越界回弹 图片放大
12-04
利用CoordinatorLayout仿抖音个人中心 下拉越界回弹 图片放大，viewPager嵌套效果。效果基本一致，并且稳定。
【web前端】开源仿抖音项目
最新发布
weixin_45880295的博客
05-06 305
仿抖音项目
flutter仿抖音首页面效果
03-14
本课程将使用 flutter 实现类似抖音首页面效果 通过 TabBar 与 TabBarView 结合使用 实现仿抖音APP首页面 关注 与推荐 页面左右滑动ui构建通过 PageView 来实现上下整屏切换效果使用 VideoPlayer组件实现视频播放功能通过 CircularProgressIndicator实现 有圆形背景样式的按钮浮在视频列表上方来实现控制视频的播放与暂停，并会综述一个 Align 在手机坐标系中的对齐方式通过 ClipOval、CachedNetworkImage 实现圆形头像通过 showModalBottomSheet 实现从页面底部上滑的弹框，结合 ListView 实现弹框显示评论列表功能通过 showModalBottomSheet 实现从页面底部上滑的弹框，结合 GridView 实现弹框显示九宫格列表功能
Flutter 从入门实践到开发一个APP之开发实战基础篇
12-11
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 本课程将使用 flutter 从0 打造一个创业级的应用。 最基础的应用加框包括 应用欢迎页面、引导页面、广告页面、类似微信的底部导航栏等等世面上所常见的应用
仿抖音“我的”界面设计图制作
weixin_33851429的博客
05-09 2066
最近在做一个仿抖音的APP（萌音）前一段时间将主页完成接下来打算做一下我的界面，然后今天就把设计图先做出来了，因为个人毕竟能力有限所以相对于抖音的界面我自己制作的界面做了一些改动 仿抖音“我的”界面设计图 附上psd源文件感兴趣的同学可以看看 个人博客https://myml666.github....
仿抖音界面随机图片HTML源码
02-01
高仿抖音界面随机美图浏览，上下滑动界面可自行获取不同的美图浏览，点击继续浏览或点击刷新页即可重新加载更多精品美图内置上千万美图数据采集（性感美女模特写真，cos美图，GIF动态图，高清壁纸，综合美图秀，卖家...
仿抖音自动播放以及评论界面
03-08
【标题】"仿抖音自动播放以及评论界面"所涉及的知识点涵盖了移动应用开发、视频播放技术、用户交互设计以及评论系统构建。以下是对这些知识点的详细解析： 1. 移动应用开发：仿抖音App的开发主要是针对Android或iOS...
最新高仿抖音短视频APP源码 原生java双端源码
07-12
"高仿抖音短视频APP源码"这个标签突出了源码的主要特点，即其设计目标是复制抖音的关键功能和界面设计，对于想要快速进入短视频市场的开发者来说，这样的源码提供了便捷的起点。 【文件名称列表】 "ja开发抖音视频...
Android 仿抖音的评论列表的UI和效果的实现代码
01-20
抖音是一款音乐创意短视频社交软件，是一个专注年轻人的15秒音乐短视频社区。用户可以通过这款软件选择歌曲，拍摄15秒的音乐短视频，形成自己的作品。此App已在Android各大应用商店和APP Store均有上线。 在design包里面 有一个 BottomSheetDialogFragment 这个Fragment，他已经帮我们处理好了手势，所以实现起来很简单。下面是代码: public class ItemListDialogFragment extends BottomSheetDialogFragment { // TODO: Customize parameter argumen
仿抖音个人中心，下拉放大缩小效果
08-12
仿抖音个人中心下拉放大，松手缩回弹性效果，使用design CoordinatorLayout，自定义behavior
使用css+html制作的抖音首页
08-19
模仿着写了一个抖音首页,主要使用了上中下部分百分比布局,定位.整体上用的技术太简单,也不是很完善.大家伙们参考参考就行.
北大青鸟网页大赛仿抖音官网作品
08-31
班上一个同学写的一个仿抖音官网的网页,虽然只实现了一部分,但是个人觉得还是模仿的非常好的
仿抖音小视频单页html源码 引流必备
05-30
【标题】"仿抖音小视频单页html源码 引流必备"所涉及的知识点主要集中在Web前端开发领域，特别是HTML5技术的应用。这个标题暗示我们这里有一个网页模板，其设计灵感来源于抖音短视频平台，目的是为了帮助用户创建...
Android仿抖音主页效果实现
乔布奇的博客
12-08 9453
“抖音”都玩过吧，是不是很好玩，我反正是天天刷，作为一个非著名的Android低级攻城狮，虽然技术菜的一匹，但是也经常刷着刷着会思考：咦？这玩意是用哪个控件做的？这个效果是咋实现的啊？由于本人技术水平有限，所以今天咱就先挑个比较简单的来看看是如何实现的，思考再三，我们就拿抖音首页的这个效果来练练手吧，话不多说，开搞！
毕业设计-基于Android的短视频设计与实现（仿抖音）
u014388322的专栏
11-02 897
管理员身份功能介绍：1：用户管理：管理用户的注册信息2：类型管理：添加和查看书籍类型用户功能介绍：1：注册模块，用户在使用软件前需要进行用户信息的注册2：用户登录：用户通过自己的注册信息进行软件的登录3：短视频录制：用户可以通过录制视频或者选择本地视频的方式上传视频文件4：视频搜索：用户可以通过视频名称对视频进行搜索5：好友添加：用户可以搜索好友和添加好友信息，以及查看好友的动态6：个人信息：用户可以浏览个人信息，以及对密码进行修改；详细的客户端演示可以上上面的图片文件。
android仿抖音效果
我是一只小菜鸟，飞丫飞丫飞~~~
10-24 2388
https://blog.csdn.net/JArchie520/article/details/110791624
android recyclerview 仿抖音
10-19
Android的RecyclerView是一个用于展示大量数据列表的视图控件，而仿抖音则是模仿抖音的界面和交互方式进行开发。在开发仿抖音的RecyclerView时，我们可以按照以下步骤进行： 1. 创建RecyclerView和Adapter：首先，我们需要创建一个RecyclerView和一个自定义的Adapter，用于展示数据列表。Adapter负责将数据绑定到RecyclerView上，我们可以在Adapter中重写`onCreateViewHolder`和`onBindViewHolder`方法，分别用于创建列表项的视图和绑定数据。 2. 创建列表项布局：仿抖音的列表项通常包含一个视频播放器和相关的交互按钮，我们可以通过创建一个对应的列表项布局来实现。可以使用FrameLayout来容纳视频播放器和按钮，并设置正确的权重和布局参数。 3. 加载视频数据：仿抖音需要加载大量的视频数据，我们可以使用网络请求库如Retrofit来获取数据，然后将数据传递给Adapter进行展示。 4. 实现视频播放功能：为了实现仿抖音的视频播放功能，我们需要使用一些开源的视频播放库如ExoPlayer或者ijkplayer，并在RecyclerView中的列表项布局中添加播放器视图。在Adapter中，我们可以在列表项被绑定时通过调用播放器的相应方法来实现视频的播放和暂停。 5. 实现列表滑动自动播放功能：仿抖音的一个重要特点是列表滑动到可见区域时自动播放视频，而滑出屏幕后则停止播放。我们可以通过RecyclerView的滑动监听来实现这一功能，当滑动停止时，判断可见区域内的列表项是否包含播放器，如果包含则开始播放，否则停止播放。 6. 实现交互按钮功能：仿抖音的视频列表通常还包含一些交互按钮，如点赞、评论、分享等。我们可以在列表项布局中添加相应的按钮，并设置点击监听器，在按钮点击时执行相应的操作。 通过以上步骤，我们可以实现一个仿抖音的RecyclerView，展示大量的视频数据，并实现视频播放、滑动自动播放和交互按钮等功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值