Imitation Tiktok homepage interface

Catalog

design sketch

Top related code

Top rendering

Content related code  

Content rendering

  Bottom navigation bar related code

Bottom navigation bar rendering

Complete code

 html

css

js

​flexible.js

If you want to make the homepage interface of Tiktok short video , We're going to quote swiper plug-in unit 、 You need to use iconfont Icon （ You can download it on the official website by yourself ） etc. .

design sketch

 

We can divide this interface into three parts, namely ： Top （ Focus on 、 recommend 、 near ）、 middle （ Like the video part and the right 、 Comment on 、 forward ）、 Bottom navigation bar . utilize swiper The plug-in slides several videos （swiper For the usage of plug-ins, you can check the detailed tutorial on the official website ）.

Top related code

We can use header Component to write the top content of the interface , The top can be divided into three parts （ Left Icon 、 Middle text 、 Right icon ）, Let's look at the code ：

 

Top rendering

Content related code  

Video part , We need to use a box to put several videos 、 written words 、 Install the avatar, etc . This part can be divided into four parts ： Button 、 On the right （ give the thumbs-up 、 Comment on 、 forward ）、 Middle text 、 Loop Playback . Let's look at some of the code in this part （ Some other videos can be modified according to their own needs ）：

Content rendering

  Bottom navigation bar related code

The bottom navigation bar can be divided into five parts ： home page 、 friend 、 plus 、 news 、 I . Now let's look at the code ：

 

Bottom navigation bar rendering

Complete code

 html

css

js

flexible.js