Uni-App直播小视频|仿微信聊天界面|uniapp仿抖音

U直播是一个基于Nvue+vue+uniapp技术开发的仿抖音小视频、陌陌直播的项目。小视频及直播页面均实现了类似抖音上下滑动切换效果，还有点赞、评论、商品等功能展示。

运行效果：

技术实现：

• 编辑器+技术：HBuilderX + vue/NVue/uniapp/vuex

• iconfont图标：阿里字体图标库

• 自定义导航栏 + 底部Tabbar

• 弹窗组件：uniPop（uni-app封装自定义Modal弹窗）

• 测试环境：H5端/小程序/App端/真机

项目中消息模块中聊天功能就不详细介绍，大家可以去参考这篇：uniapp仿微信聊天室|vue+uniapp仿微信聊天界面

uniapp仿火山/抖音小视频

如何实现仿抖音界面滑动效果，且有点赞、评论及商品等功能，可以单击、双击判断。

    
        
            
                
                
                
                
                
                
                    
                        
                            ＃ {{kwItem}}
                        
                        {{item.subtitle}}
                        
                            {{item.author}} {{item.attention ? '已关注' : '关注'}}
                        
                         写评论...
                    
                    
                        
                        {{ item.likeNum+(item.islike ? 1: 0) }}
                        {{item.replyNum}}
                        {{item.shareNum}}
                    
                
            
        
    

原生video、map等组件层级较高，虽说提供了cover-view组件可以覆盖其上，但其不能嵌套子组件，且限制较大，故只能采用编写.nvue(native vue)页面了。

nvue页面编写和vue无太大差别，只是需要注意css编写方式，且只能使用flex布局模式，另外一些css属性无效。引入iconfont也有差异。

beforeCreate() {
    // 引入iconfont字体
    // #ifdef APP-PLUS
    const domModule = weex.requireModule('dom')
    domModule.addRule('fontFace', {
        fontFamily: "nvueIcon",
        'src': "url('../../../static/fonts/iconfont.ttf')"
    });
    // #endif
},

作者：xiaoyan2015
链接：https://juejin.im/post/5dc97bfef265da4d026271b5
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。