028-86922220
建站资讯

网站建设资讯

为你提供网站建设行业资讯、网站优化知识、主机域名邮箱、网站开发常见问题等。
当前位置：首页 - 全部资讯

手把手教你用前端实现短视频App（滑动切换）

 前言

创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、成都网站建设、外贸网站建设、青冈网络推广、小程序设计、青冈网络营销、青冈企业策划、青冈品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供青冈建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

平常在玩短视频App时，喜欢看的视频可以多看一会，不喜欢看的视频直接往上一划，这个功能一直深受用户喜爱。今天我们不妨实现一个这样功能的App。

功能

  1. 上下滑动切换视频
  2. 可查看对应视频下的评论

示例

下面我挑出了几张代表性的图片，供大家参考。

下载链接

以上是我自己做的一款App的示例图，如果感兴趣的小伙伴，大家可以下载到手机上体验。目前只是开发了安卓版本。

 
 
 
 
    
  
  
  
  
  1. 链接: https://pan.baidu.com/s/1dbgx9eht54qh-Ig04w2JAg  
    2.   
  
  
  
  2. 提取码: 96ta  
    3.   
  
  
  
  3. 复制这段内容后打开百度网盘手机App，操作更方便哦 
    4.

核心代码

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. .main { 
    6.   
  
  
  
  6.   height: 100%; 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8. .footbox { 
    9.   
  
  
  
  9.   position: relative; 
    10.   
  
  
  
  10.   bottom: 0; 
    11.   
  
  
  
  11.   width: 95%; 
    12.   
  
  
  
  12.   margin: 0 auto; 
    13.   
  
  
  
  13.   display: flex; 
    14.   
  
  
  
  14.   justify-content: space-between; 
    15.   
  
  
  
  15.   align-items: center; 
    16.   
  
  
  
  16. } 
    17.   
  
  
  
  17. .user { 
    18.   
  
  
  
  18.   font-size: 14px; 
    19.   
  
  
  
  19. } 
    20.   
  
  
  
  20. .user, 
    21.   
  
  
  
  21. .name { 
    22.   
  
  
  
  22.   text-overflow: ellipsis; 
    23.   
  
  
  
  23.   overflow: hidden; 
    24.   
  
  
  
  24.   white-space: nowrap; 
    25.   
  
  
  
  25. } 
    26.   
  
  
  
  26. .foot { 
    27.   
  
  
  
  27.   width: 80%; 
    28.   
  
  
  
  28.   color: #fff; 
    29.   
  
  
  
  29.   font-size: 16px; 
    30.   
  
  
  
  30.   z-index: 10001; 
    31.   
  
  
  
  31. } 
    32.   
  
  
  
  32. .pl { 
    33.   
  
  
  
  33.   width: 10%; 
    34.   
  
  
  
  34.   color: #fff; 
    35.   
  
  
  
  35.   font-size: 16px; 
    36.   
  
  
  
  36.   z-index: 10001; 
    37.   
  
  
  
  37. } 
    38.   
  
  
  
  38. .sheet { 
    39.   
  
  
  
  39.   height: 50vh; 
    40.   
  
  
  
  40.   .pll { 
    41.   
  
  
  
  41.     overflow: hidden; 
    42.   
  
  
  
  42.     padding: 10px; 
    43.   
  
  
  
  43.     border-bottom: 1px solid #f4f4f4; 
    44.   
  
  
  
  44.     .pl-l { 
    45.   
  
  
  
  45.       width: 20%; 
    46.   
  
  
  
  46.       float: left; 
    47.   
  
  
  
  47.     } 
    48.   
  
  
  
  48.     .pl-l img { 
    49.   
  
  
  
  49.       width: 55%; 
    50.   
  
  
  
  50.       border-radius: 50%; 
    51.   
  
  
  
  51.       animation: all ds 0.5s; 
    52.   
  
  
  
  52.     } 
    53.   
  
  
  
  53.     @keyframes ds { 
    54.   
  
  
  
  54.       from { 
    55.   
  
  
  
  55.         opacity: 0; 
    56.   
  
  
  
  56.       } 
    57.   
  
  
  
  57.       to { 
    58.   
  
  
  
  58.         opacity: 1; 
    59.   
  
  
  
  59.       } 
    60.   
  
  
  
  60.     } 
    61.   
  
  
  
  61.     .pl-r { 
    62.   
  
  
  
  62.       width: 78%; 
    63.   
  
  
  
  63.       float: left; 
    64.   
  
  
  
  64.     } 
    65.   
  
  
  
  65.     .name1 { 
    66.   
  
  
  
  66.       font-size: 14px; 
    67.   
  
  
  
  67.       color: #666; 
    68.   
  
  
  
  68.       font-weight: bold; 
    69.   
  
  
  
  69.       margin-bottom: 5px; 
    70.   
  
  
  
  70.     } 
    71.   
  
  
  
  71.     .con { 
    72.   
  
  
  
  72.       width: 100%; 
    73.   
  
  
  
  73.       line-height: 24px; 
    74.   
  
  
  
  74.       color: #333333; 
    75.   
  
  
  
  75.       font-size: 14px; 
    76.   
  
  
  
  76.     } 
    77.   
  
  
  
  77.   } 
    78.   
  
  
  
  78. } 
    79.   
  
  
  
  79.  
    80.

 完整代码库

恭请各位大佬指正。

https://github.com/maomincoding/zm_mv2


当前文章：手把手教你用前端实现短视频App（滑动切换）
转载来于：http://www.whjierui.cn/article/cdshsci.html

其他资讯