Blazor如何实现类似于微信的Tab切换?

是否有小伙伴在使用tab的时候想进行滑动切换Tab?

并且有滑动左出左进,右出右进的效果 ,本文将讲解怎么在Blazor中去通过滑动切换Tab

本文中的UI组件使用的是MASA Blazor,您也可以是其他的UI框架,这个并不影响实际的运行效果,本文案例是兼容PC和Android的,演示效果是android中执行的,在PC中执行效果依然有效(亲测)

首先安装MASA Blazor 根据 MASA Blazor安装MASA Blazor

准备工作

  1. 创建 AppBar.razor文件

  2. 修改MainLayout.razor文件代码

@inherits LayoutComponentBase

<MApp>
    <AppBar>
        <div class="body">
            @Body
        </div>
    </AppBar>
</MApp>

<style>
.body {
    /*设置内容高度 需要减去导航栏的高度*/
    height: calc(100vh - 48px);
    max-height: calc(100vh - 48px);
}
</style>
  1. 创建 AppBar.razor.css 文件并且添加相关代码 ,以下代码是为了实现切换的时候有一个出入效果,具体代码案例来自Animista - On-Demand CSS Animations Library

    
    /*左边滑动出*/
    .slide-out-left {
        -webkit-animation: slide-out-left 0.5s;
        animation: slide-out-left 0.5s;
    }
    
    /*右边滑动出*/
    .slide-out-right {
        -webkit-animation: slide-out-right 0.5s;
        animation: slide-out-right 0.5s;
    }
    
    /*右边滑动进*/
    .slide-in-right {
        -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
    
    /*左边滑动进*/
    .slide-in-left {
        -webkit-animation: slide-in-left 0.5s;
        animation: slide-in-left 0.5s;
    }
    
    @-webkit-keyframes slide-out-left {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    
        100% {
            -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
            opacity: 0;
        }
    }
    
    @keyframes slide-out-left {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    
        100% {
            -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
            opacity: 0;
        }
    }
    
    
    @-webkit-keyframes slide-out-right {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    
        100% {
            -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
            opacity: 0;
        }
    }
    
    @keyframes slide-out-right {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    
        100% {
            -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
            opacity: 0;
        }
    }
    
    
    @-webkit-keyframes slide-in-left {
        0% {
            -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
            opacity: 0;
        }
    
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes slide-in-left {
        0% {
            -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
            opacity: 0;
        }
    
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    }
    @-webkit-keyframes slide-in-right {
        0% {
            -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
            opacity: 0;
        }
    
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes slide-in-right {
        0% {
            -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
            opacity: 0;
        }
    
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    
  2. 创建AppBar的模型用于动态添加导航栏, 创建AppBarDto.cs文件并添加相关代码

public class AppBarDto
{
    public string Key { get; set; }

    /// <summary>
    /// 标题
    /// </summary>
    public string Title { get; init; }

    /// <summary>
    /// 图标
    /// </summary>
    public string? Icon { get; set; }

    /// <summary>
    /// 路由
    /// </summary>
    public string Href { get; init; }

    public AppBarDto(string title, string href, string? icon = null)
    {
        Title = title;
        Icon = icon;
        Href = href;
        Key = Guid.NewGuid().ToString("N");
    }
}
  1. 添加相关页面,在Pages文件夹下,分别创建Index.razor,Feature.razor,Friend.razor,PersonalCenter.razor

文件相关代码:
Index.razor

@page "/"
<h3>Index</h3>

Feature.razor

@page "/feature"
<h3>Feature</h3>

Friend.razor

@page "/friend"
<h3>Friend</h3>

PersonalCenter.razor

@page "/personal-center"
<h3>PersonalCenter</h3>
  1. 修改AppBar.razor代码


<div class="@Class" @ontouchstart="TouchStart" @ontouchend="TouchEnd" @onmousedown="Mousedown" @onmouseup="Mouseup" style="height: 100%">
    @ChildContent
</div>

 @*这里也可以是其他组件的Tab,其实只是记录当前的导航的数据*@
<MTabs Centered
       BackgroundColor="indigo"
       ShowArrows="false"
       Value="selectModel.Key"
       Dark>
    @foreach (var i in AppBars)
    {
        <MTab Value="i.Key" OnClick="()=>GoHref(i)">
            @if (!string.IsNullOrEmpty(i.Icon))
            {
                <MIcon Dark>@i.Icon</MIcon>
            }
            @i.Title
        </MTab>
    }
</MTabs>

  1. 创建AppBar.razor.cs 添加以下代码

public partial class AppBar
{
    #region Inject

    [Inject]
    public required NavigationManager NavigationManager { get; set; }

    #endregion

    private readonly List<AppBarDto> AppBars = new();

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    private AppBarDto selectModel;

    private string Class { get; set; }

    protected override void OnInitialized()
    {
        AppBars.Add(new AppBarDto("首页", "/", "home"));
        AppBars.Add(new AppBarDto("好友", "/personal-center", "mdi-account-group-outline"));
        AppBars.Add(new AppBarDto("功能", "/feature", "mdi-wrench"));
        AppBars.Add(new AppBarDto("个人中心", "/personal-center", "mdi-badge-account-alert"));

        // 默认选择的导航标签
        selectModel = AppBars[0];

        base.OnInitialized();
    }

    /// <summary>
    /// 导航栏跳转
    /// </summary>
    /// <param name="appBar"></param>
    private void GoHref(AppBarDto appBar)
    {
        // 防止重复点击
        if(appBar == selectModel)
        {
            return;
        }

        // 当点击导航的索引大于现在导航时启动滑动效果
        if(AppBars.IndexOf(appBar) > AppBars.IndexOf(selectModel))
        {
            Class = "slide-out-left";
            Task.Run(async () =>
            {
                // 由于特效时间为0.5s 这里是等待特效完成
                await Task.Delay(450);
                NavigationManager.NavigateTo(selectModel.Href);
                Class = "slide-in-right";
                _ = InvokeAsync(StateHasChanged);
            });
        }
        // 当点击导航的索引小于现在导航时启动滑动效果
        else if (AppBars.IndexOf(appBar) < AppBars.IndexOf(selectModel))
        {
            Class = "slide-out-right";
            Task.Run(async () =>
            {
                // 由于特效时间为0.5s 这里是等待特效完成
                await Task.Delay(450);
                NavigationManager.NavigateTo(selectModel.Href);
                Class = "slide-in-left";
                _ = InvokeAsync(StateHasChanged);
            });
        }
        selectModel = appBar;
        NavigationManager.NavigateTo(appBar.Href);
    }


    /// <summary>
    /// 开始X坐标
    /// </summary>
    private double _startX;


    #region 移动端滑动处理

    /// <summary>
    /// 记录开始坐标
    /// </summary>
    /// <param name="args"></param>
    private void TouchStart(TouchEventArgs args)
    {
        var touch = args.ChangedTouches[0];
        _startX = touch.ScreenX;
    }

    private void TouchEnd(TouchEventArgs args)
    {
        var touch = args.ChangedTouches[0];
        Switchover((decimal)touch.ScreenX);
    }

    #endregion

    #region PC滑动处理

    /// <summary>
    /// 记录开始坐标
    /// </summary>
    /// <param name="args"></param>
    private void Mousedown(MouseEventArgs args)
    {
        _startX = args.ScreenX;
    }

    private void Mouseup(MouseEventArgs args)
    {
        Switchover((decimal)args.ScreenX);
    }

    #endregion

    private void Switchover(decimal screenX)
    {
        var index = AppBars.IndexOf(selectModel);
        // 限制过度滑动
        if (index == AppBars.Count || index > AppBars.Count)
        {
            return;
        }

        // 设置滑动最大位限制,达到这个限制才滑动生效
        var size = 200;

        // 需要滑动200才切换 如果开始坐标x大于 当前结束的x坐标往右边切换tab
        if ((decimal)_startX - size > screenX)
        {
            // 如果右边往左边滑动 当前索引是当前最大数量的话不需要切换
            if (index == AppBars.Count - 1)
            {
                return;
            }
            selectModel = AppBars[index + 1];
            Class = "slide-out-left";

            Task.Run(async () =>
            {
                // 由于特效时间为0.5s 这里是等待特效完成
                await Task.Delay(450);
                NavigationManager.NavigateTo(selectModel.Href);
                Class = "slide-in-right";
                _ = InvokeAsync(StateHasChanged);
            });
        }
        else if ((decimal)_startX + size < screenX)
        {
            // 如果左边往右边滑动 当前索引是0的话不需要切换
            if (index == 0)
            {
                return;
            }
            selectModel = AppBars[index - 1];
            Class = "slide-out-right";
            Task.Run(async () =>
            {
                // 由于特效时间为0.5s 这里是等待特效完成
                await Task.Delay(450);
                NavigationManager.NavigateTo(selectModel.Href);
                Class = "slide-in-left";
                _ = InvokeAsync(StateHasChanged);
            });
        }
    }
}

运行效果:

一个热爱学习的token

qq交流群:737776595
微信交流群:

本文转载于网络 如有侵权请联系删除

相关文章

  • golang race chan mutex 总结

    一般并发的bug有两种,死锁(block)和竞争(race)死锁发生时,gorun会直接报错race发生时,要加race才会在运行时报warninggorunxxx.go后面加上-race参数$gorun-racerace.go==================WARNING:DATARACEWriteat0x00c0000a2000bygoroutine6:main.main.func2()/Users/harryhare/git/go_playground/src/race.go:15+0x38Previouswriteat0x00c0000a2000bygoroutine5:main.main.func1()/Users/harryhare/git/go_playground/src/race.go:9+0x38Goroutine6(running)createdat:main.main()/Users/harryhare/git/go_playground/src/race.go:13+0x9cGoroutine5(running)createdat:main.main()/

  • Android-SubMenu选项菜单和子菜单

    简介:SubMenu:代表一个子菜单,包含1~N个MenuItem实现效果:具体实现方法:主活动MainActivity:publicclassMainActivityextendsAppCompatActivity{ //定义“字体大小”菜单项的标识 finalintFONT_10=0x111; finalintFONT_12=0x112; finalintFONT_14=0x113; finalintFONT_16=0x114; finalintFONT_18=0x115; //定义“普通菜单项”的标识 finalintPLAIN_ITEM=0x11b; //定义“字体颜色”的菜单项的标识 finalintFONT_RED=0x116; finalintFONT_BLUE=0x117; finalintFONT_GREEN=0x118; privateEditTexteditText; @Override protectedvoidonCreate(BundlesavedInstanceState){ super.onCreate(savedInstanceState); setC

  • Oracle在线重定义之COPY_TABLE_DEPENDENTS

    当使用在线重定义功能进行非分区表转换时,过程中需要对中间表进行索引,约束等依赖进行重建,Oracle提供了两种方式:本文参考:https://oracle-base.com/articles/misc/partitioning-an-existing-table一、COPY_TABLE_DEPENDENTS使用DBMS_REDEFINITION包自带的procedure:DBMS_REDEFINITION.copy_table_dependents来实现:SETSERVEROUTPUTON DECLARE l_errorsNUMBER; BEGIN DBMS_REDEFINITION.copy_table_dependents( uname=>USER, orig_table=>'BIG_TABLE', int_table=>'BIG_TABLE2', copy_indexes=>DBMS_REDEFINITION.cons_orig_params, copy_triggers=>TRUE, copy_constra

  • centos prophet error: command 'gcc' failed with exit status 1

    Collectingfbprophet Usingcachedhttps://files.pythonhosted.org/packages/33/fb/ad98d46773929079657706e6b2b6e366ba6c282bc2397d8f9b0ea8e5614c/fbprophet-0.5.tar.gz Requirementalreadysatisfied:Cython>=0.22in/usr/local/lib/python3.6/site-packages(fromfbprophet)(0.29.2) Requirementalreadysatisfied:pystan>=2.14in/usr/local/lib/python3.6/site-packages(fromfbprophet)(2.19.0.0) Requirementalreadysatisfied:numpy>=1.10.0in/usr/local/lib/python3.6/site-packages(fromfbprophet)(1.15.4) Requirementalread

  • python实现朴素贝叶斯分类器(连续数据)

    参考链接:Python朴素贝叶斯分类器有用请点赞,没用请差评。 欢迎分享本文,转载请保留出处。 一、算法 算法原理参考周志华老师的《机器学习》p151和李航老师的《统计学习方法》。  博客内容部分借鉴于腾讯云“海天一树”老师。 二、数据集 本文中的数据集使用的是“皮马印第安人糖尿病数据集”。该数据集由美国国立糖尿病、消化和肾脏疾病研究所(UnitedStatesNationalInstituteofDiabetesandDigestiveandKidneyDiseases,简称NIDDK)提供。这里的“皮马”指的是位于美国亚利桑那州南部的一个县。  该数据集可从https://raw.githubusercontent.com/jbrownlee/Datasets/master/pima-indians-diabetes.data.csv下载,具体方法是打开此链接后,会看到数据展现在网页中,右击saveas,保存类型选为“MicrosoftExcelCommanSeparatedValuesFile“,即CSV格式,文件名按默认为pima-indians-diabetes.data.c

  • 为什么配置文件加密了数据库配置信息,Spring Boot仍能成功连接数据库

    SpringBoot最大的特点就是自动配置了,大大的减少了传统Spring框架的繁琐配置,通过几行简单的配置就可以完成其他组件的接入。比如你想要连接mysql数据库,只需要的配置文件里面加入mysql的一些配置信息就可以了。为了保护数据的安全性,越来越多的公司选择加密这些重要信息。接下来一起来看看如何实现配置加密文件并且成功连接数据库的。配置信息加密有好几种方式,这里我只详细的写一下我比较常用的一种方式。首先通过某种加密算法将用户名和密码进行加密,然后在配置文件中用加密串代替原来的明文。然后自定义数据源,在自定义数据源中解密用户名和密码。SpringBoot自动装配SpringBoot的自动装配,以前的推文中也详细的讲到过,今天简单来复习一下。在每个SpringBoot的应用的启动类上都能发现有一个注解@SpringBootApplication,这个注解包含的注解@EnableAutoConfiguration就是用来完成自动装配的。这个注解通过导入类AutoConfigurationImportSelector,这个类中有一个方法selectImports,其作用就是扫描所有jar

  • 推荐一款手机端黑科技自动化脚本

    1.场景相信大部分同学早上醒来之后,都是手动打开音乐软件,播放自己喜欢的音乐,然后手动滑动屏幕,查看今天的天气,日复一日,生活显得特别的朴实无华且枯燥试想一下,如果清晨醒来时,按掉闹铃后能自动化语音播放今日天气,随机播放自己喜欢的音乐,给自己带来元气满满的一天,这种感觉不要太爽! ​本篇文章将为大家推荐这款iOS端的自动化应用,快捷指令App,可以通过它创建快捷指令及自动化指令集合,快速来完成来各种任务,提升我们的效率2.介绍 之前写过一款Android端的自动化软件:Tasker,点我查看快捷指令是iOS端的一款App,功能与Tasker类似,可以基于时间、位置、打开某个App等场景,将一个功能设置为快捷指令,最后通过点击或者Siri快速调用任务另外,快捷指令可以创建强大的自动化任务,合并多个应用之间的步骤,完成复杂的自动化场景 3.实战 以第一段要实现的场景为例第1步,创建一个闹钟第2 步,创建获取天气的快捷指令打开快捷指令App,没有安装的同学,可以去AppStore手动下载安装在App首页,点击右上角的+号来添加一个「新的快捷指令」,然后就可以添加具体的操作了ps:添加操作建议

  • 大脑中的数字神经网络:从世界上提取结构的机制到大脑本身的自我构造(CS NEC)

    为了跟踪信息,大脑必须解决信息在哪里以及如何索引新信息的问题。我们提出,前额皮质(PFC)用于检测时间序列中结构的神经机制(基于传入信息的时间顺序)已作为脑网络的空间排序和索引的第二目的。我们称此过程为对神经“地址”的操纵,以组织大脑自己的网络,即信息的“数字化”。这样的工具对于信息处理和保存很重要,对于存储器的形成和检索也很重要。原文题目:DigitalNeuralNetworksintheBrain:FromMechanismsforExtractingStructureintheWorldToSelf-StructuringtheBrainItself原文:Inordertokeeptraceofinformation,thebrainhastoresolvetheproblemwhereinformationisandhowtoindexnewones.Weproposethattheneuralmechanismusedbytheprefrontalcortex(PFC)todetectstructureintemporalsequences,basedonthetempor

  • SpringBoot极简工具箱终于开源了

    各位小伙伴们久等了,撸主花了无数个深夜吐血训练了100万小黄图做了一个鉴黄图床,终于在今天开放给大家了。2019年11月22日图床上线了,网友们也都很积极,甚是踊跃的上传了不少有趣的图片,当然由于一些特殊原因被过滤掉了,没能展示给各位网友。也有不少小伙伴在后台问,图床什么时候开源呀?鉴黄是怎么做的啊?小黄图素材是从哪里找的啊?这个......恕无可奉告。后面也写了一系列文章来阐述相关功能,然而当时只是个半成品,一时半会放出来也不大合适,就拖到了现在。此后的重点已经不是图床那么简单的功能了,后面撸主陆陆续续整合了不少功能模块,以方便大家能更加快速高效的开发。前一阵子撸主上线了爪哇妹,一个集万千宠爱于一身的小程序。不过以后,爪哇妹可能要下线了,为了方便大家秒速预览,撸主接入了阿里云存储,奈何流量真的有点耗不起。爪哇妹里这么多妹子都是通过小程序后台管理模块添加的。当然了,扩展不仅仅如此,目前项目分为组织机构、系统监控、应用管理、系统管理。组织机构分为:机构管理、用户管理、角色管理、行政区域,一个比较通用的组件,各位小伙伴们可以通过它改造成一个后台管理系统。系统监控目前只上线了系统日志和在

  • 写 JSP 的痛点,真的非常痛!

    一、前戏 前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS等等)打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。核心思想是前端html页面通过ajax调用后端的restufulapi接口并使用json数据进行交互。在互联网架构中,名词解释:Web服务器:一般指像nginx,apache这类的服务器,他们一般只能解析静态资源。应用服务器:一般指像tomcat,jetty,resin这类的服务器可以解析动态资源也可以解析静态资源,但解析静态资源的能力没有web服务器好。一般都是只有web服务器才能被外网访问,应用服务器只能内网访问。二、术业有专攻(开发人员分离)以前的JavaWeb项目大多数都是java程序员又当爹又当妈,又搞前端,又搞后端。随着时代的发展,渐渐的许多大中小公司开始把前后端的界限分的越来越明确,前端工程师只管前端的事情,后端工程师只管后端的事情。正所谓术业有

  • Exchange Powershell查看用户最后登陆邮箱时间

    在Exchange日常管理中,我们可能经常会遇到这样的问题,就是怎么来知道一个用户最后的登录时间?这个问题在使用Exchangepowershell就能很好的解决了。用管理员身份运行Exchangemanagementpowershell查看某一个邮箱数据库的统计信息,输入Get-MailboxStatistics-database'mailboxdatabase'加上参数sortlastlogontime-Descending就能对登录时间进行一个降序排序。加上sortlastlogontime-Unique的话就是以升序进行排序下面示例以降序显示:Get-MailboxStatistics-database'mailboxdatabase'|sortlastlogontime-Descending查询某台邮箱角色服务器上的用户登录时间。Get-MailboxStatistics–server‘server’针对某一个用户的查询Get-MailboxStatistics‘user’|flExchange的Powershell能做出很多很多EMC

  • JAVA拾遗 — JMH与8个代码陷阱

    前言JMH(http://openjdk.java.net/projects/code-tools/jmh/)是JavaMicrobenchmarkHarness(微基准测试)框架的缩写(2013年首次发布)。与其他众多测试框架相比,其特色优势在于它是由Oracle实现JIT的相同人员开发的。在此,我想特别提一下AlekseyShipilev(http://shipilev.net/)(JMH的作者兼布道者)和他优秀的博客文章。笔者花费了一个周末,将Aleksey大神的博客,特别是那些和JMH相关的文章通读了一遍,外加一部公开课视频《"TheLesserofTwoEvils"Story》,将自己的收获归纳在这篇文章中,文中不少图片都来自Aleksey公开课视频。阅读本文前本文没有花费专门的篇幅在文中介绍JMH的语法,如果你使用过JMH,那当然最好,但如果没听过它,也不需要担心(跟我一周前的状态一样)。我会从JavaDeveloper角度来谈谈一些常见的代码测试陷阱,分析他们和操作系统底层以及Java底层的关联性,并借助JMH来帮助大家摆脱这些陷阱。通读本文,需要一些

  • 软件分享 | AutoCAD 2011 安装教程

    CAD201132+64位下载链接:链接:http://pan.baidu.com/s/1kUPkMGZ密码:u99y安装步骤:1、解压压缩包,解压密码为公众号:小白课代表 2、打开安装包,双击setup3、点击安装产品4、选择DesignRevie,并下一步5、接受协议6、姓氏名字组织随便输,比如:公众号小白课代表最棒,输入序列号:666-69696969,密钥:001C17、点击配置8、选择单击许可,并下一步9、勾选Express,更改软件安装路径到非系统盘,比如D盘新建一个CAD2011文件夹用于安装。10、选择不包含Servicepack11、点击配置完成12、点击安装13、在桌面找到CAD的图标打开14、打开解压出来的注册机文件夹,用鼠标右击注册机,选择【以管理员身份运行】↓激活过程.gif——End——

  • ios开发照片框架详解(一)-- AssetsLibrary

    1概要在iOS设备中,照片和视频是相当重要的一部分。最近刚好在制作一个自定义的iOS图片选择器,顺便整理一下iOS中对照片框架的使用方法。在iOS8出现之前,开发者只能使用AssetsLibrary框架来访问设备的照片库,这是一个有点跟不上iOS应用发展步伐以及代码设计原则但确实强大的框架,考虑到iOS7仍占有不少的渗透率,因此AssetsLibrary也是本文重点介绍的部分。而在iOS8出现之后,苹果提供了一个名为PhotoKit的框架,一个可以让应用更好地与设备照片库对接的框架,后续文章也会介绍一下这个框架。另外值得强调的是,在iOS中,照片库并不只是照片的集合,同时也包含了视频。在AssetsLibrary中两者都有相同类型的对象去描述,只是类型不同而已。文中为了方便,大部分时候会使用「资源」代表iOS中的「照片和视频」。2AssetsLibrary组成介绍AssetsLibrary的组成比较符合照片库本身的组成,照片库中的完整照片库对象、相册、相片都能在AssetsLibrary中找到一一对应的组成,这使到AssetsLibrary的使用变得直观而方便。AssetsLibrar

  • 腾讯云云直播直播基础相关

    推流、直播和点播分别是什么? 推流:主播将本地视频源和音频源推送到腾讯视频云服务器,在有些场景中也被称为“RTMP发布”。 直播:直播的视频源是实时生成的,有人推流直播才有意义,一旦主播停播,直播URL也就失效了,而且由于是实时直播,所以播放器在播直播视频的时候是没有进度条的。 点播:点播的视频源是云端的一个文件,文件只要没有被提供方删除就随时可以播放(类似腾讯视频),而且由于整个视频都在服务器上,所以播放的时候是有进度条的。 云直播播放域名有什么要求?控制台进行域名提交管理前,需对域名进行备案,域名的位数限制为45位,暂不支持大写的域名,请输入不超过45位的小写域名地址,详情请参见域名管理。 直播域名接入播放域名和推流域名可以是同一个吗?能使用二级域名吗?接入播放域名和推流域名必须是不同的两个域名,但可以通过二级域名来进行区分。例如:123.abc.com用于推流域名,456.abc.com用于播放域名。 支持哪些推流协议?虽然RTMP在直播领域不是特别流行,但是在推流服务,也就是“主播”到“服务器”这个方向上RTMP居于主导地位,目前国内的视频云服务都是以RTMP为主要推

  • KMP算法

    KMP算法 目录KMP算法一.应用场景二.KMP算法三.代码实现 一.应用场景 给定原字符串A,查找字符串A中是否包含字符串B.例如: 在字符串A"aassddaassffaa"中查找是否包含字符串B"aassf"? 二.KMP算法 核心思想:略(去百度,不会写),不过该算法很牛啊,佩服佩服!. 三.代码实现 //第一步:求模式字符串的最长公共前后缀。 voidGetPublicPrePostFix(conststring&str,vector<int>&output){ output.resize(str.size(),0); for(size_ti=1;i<str.size();++i){ //找到那一个可能的最长公共前后缀 intpreFixLength=output[i-1]; while(preFixLength!=0&&str[preFixLength]!=str[i]){ preFixLength=output[output[preFixLength-1]]; } output[i]=preFixLength+(s

  • 安卓手机开发的学习资料

    http://www.androidcommunitydocs.com/sdk/index.html http://www.androiddevtools.cn/

  • ant design零散

    Input,TextArea 的maxLength属性在2.13.4版本才开始支持,并且规定是字符串类型: 由提交记录看出必须是字符串类型: 但是在实际使用时,仍然有些问题,如下: input框按照要求没问题 <Inputtype="text"maxLength="10"/>复制 但是textarea就有问题了 <TextAreamaxLength="10"/>复制 编译报错如下: 尝试性修改后成功了,无语。。。 <TextAreamaxLength={10}/>复制 资料链接:点我跳转点我跳转 表格点击单行高亮: 在单行点击事件(例如onRowClick事件,或者column的render中的a标签的点击事件)中记录当前点击行的index,然后在表格的rowClassName属性中做判断,给行加class,如下: rowClassName={(record,index)=>index===bannerListActiveRow?`${style.banner_list_row_active}`:`${style.

  • CSS 属性学习笔记(一)

    整理自菜鸟教程,目的在于方便查阅。 背景 background-color:定义元素的背景色 background-image:指定元素的背景图像,默认情况下是平铺重复显示 background-size:设置背景图像大小 length:第一个值设置宽度,第二个值设置高度;如果只给出一个值,第二个为auto percentage:设置相对于背景定位区域的百分比,同样是宽度、高度两个值 cover:保持宽高比,缩放成将完全覆盖背景定位区域的最小大小 contain:保持宽高比,缩放成将适合背景定位区域的最大大小 background-repeat:设置背景图像如何平铺 repeat:重复(默认) repeat-x:只有水平位置会重复背景图像 repeat-y:只有垂直位置会重复背景图像 no-repeat background-attachment:设置固定或滚动 scroll:随页面的滚动而滚动(默认) fixed:固定,不滚动 local:随着元素内容的滚动而滚动 background-position:设置背景图像的起始位置 lefttop,leftcente

  • C# 子窗体在父窗中间

         //在主窗口中的事件      privatevoid单据管理toolStripMenuItem_Click(objectsender,EventArgse) { try { this.winPanen.Controls.Clear(); CheckBillFormform=newCheckBillForm(); form.TopLevel=false; //form.WindowState=FormWindowState.Maximized; this.winPanen.Controls.Add(form); form.Location=newPoint((this.winPanen.Width-form.Width)/2,(this.winPanen.Height-form.Height-100)/2); form.Show(); } catch(Exceptionex) { Log.AddLog(ex.ToString()); } }     ///<summary> ///小

  • 【linux操作命令】crontab

    带续写。。。 版权声明:本文为博主原创文章,未经博主允许不得转载。

相关推荐

推荐阅读