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

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

相关文章

  • getchar的使用

    大家好,又见面了,我是你们的朋友全栈君。1.从缓冲区读走一个字符,相当于清除缓冲区 2.前面的scanf()在读取输入时会在缓冲区中留下一个字符’\n’(输入完s[i]的值后按回车键所致),所以如果不在此加一个 getchar()把这个回车符取走的话,gets()就不会等待从键盘键入字符,而是会直接取走这个“无用的”回车符,从而导致读取有误 3. getchar()是在输入缓冲区顺序读入一个字符(包括空格、回车和Tab) getchar()使用不方便,解决方法: (1)使用下面的语句清除回车: while(getchar()!=’\n’); (2)用getche()或getch()代替getchar(),其作用是从键盘读入一个字符(不用按回车),注意要包含头文件<conio.h> 4. getchar()是stdio.h中的库函数,它的作用是从stdin流中读入一个字符,也就是说,如果stdin有数据的话不用输入它就可以直接 读取了,第一次getchar()时,确实需要人工的输入,但是如果你输了多个字符,以后的getchar()再执行时就会直接从缓冲区中读 取了。 实

  • mongo DB的一般操作

    最近接触了一些mongoDB。将一些指令操作记录下来,便于查询和使用登录[root@logs~]#mongo-uloguser-plog123456–authenticationDatabaseadmin MongoDBshellversion:2.4.10 connectingto:test >showusers >post={“title”:”MyBlogPost”,”Content”:”HereismyblogPost.”,”Date”:newDate()} { “title”:“MyBlogPost”, “Content”:“HereismyblogPost.”, “Date”:ISODate(“2015-02-11T03:12:03.061Z”) }插入 –插入文档对象 >db.blog.insert(post) >post={“title”:”LiczBlogPost”,”Content”:”HereismyblogPost.”,”Date”:newDate()} { “title”:“LiczBlogPost”, “Content”:“Hereis

  • 精彩回放|活跃从0到260万,他如何运营公司乐享?

    从零开始运营乐享平台,我要从哪里入手?怎么向领导汇报工作,获得更多支持?怎么使用腾讯乐享帮助公司赚钱?……如果你在腾讯乐享的社群里,一定眼熟这一位群内“网红”——来自江西广宥鞋业有限公司的Roc。作为公司的专案经理和高级培训师,Roc同时承担起了腾讯乐享管理员的工作。仅仅6个,Roc“单打独斗”,凭一己之力将公司的乐享平台PV从0迅猛增长到260万。★公司概况★专业生产运动品牌——江西广宥鞋业有限公司,自2020年11月开始使用腾讯乐享,初期以厂区疫情防控为需求出发,逐步推进各项板块的建设,并成为公司职工所热爱的企业交流社区——C4C成长学院。在社群里,Roc常常主动和大家分享新的运营玩法和成果,积极和大家共享原创运营素材。这一次,在广大群友的号召下,我们诚挚邀请了Roc以直播的形式,和大家说说他的独到的运营心得:Roc的乐享平台运营成绩单,可谓亮眼:直播的时候,Roc分享了他从将公司乐享的活跃度从0运营到260万的九步:1.寻找痛点,达成初步共识2.设定框架,获得预算支持3.完成架构,填充血肉羽毛4.团队合作,尽心尽力背书5.真金白银,基层需求起步6.扩大影响,多渠道多曝光7.充分整

  • Dart学习笔记(五)——泛型

    泛型方法现在有这样一个需求,定义一个方法,要求传入什么数据就返回什么数据。我们可以这样写:StringgetData(Stringvalue){ returnvalue; }复制上例中是传入一个字符串,然后返回该字符串。那么当我要是传入一个int类型的数据的时候呢?此时我们可以定义多个方法,如下: StringgetData(Stringvalue){ returnvalue; } intgetData1(intvalue){ returnvalue; } ListgetData2(Listvalue){ returnvalue; }复制也就是说,我们想要传入什么类型的数据,就调用对应的方法。但是这样的话,代码就冗余了。其实,我们完全可以不指定传入参数的类型以及返回的类型,如下: getData(value){ returnvalue; }复制这样的话,我们就可以传入任意类型的数据了,传入什么类型的数据,返回的就是该类型的该数据。但是这样做还是有一个弊端的,就是不能做类型检查了。也就是说,我们不能够限制传入数据的类型了。那么在这种情况下,就引出我们今天的主角——泛型了。下面是我将方

  • YY一下VR游戏的潜入玩法

    很早之前玩过两个小众的潜入游戏,分别是《Warp》和《MarkoftheNinja》,就喜欢上了这类游戏,不过对我口味的不多,MGS5算一个.最近又玩了另外两个潜入游戏:《Aragami》和《Dishonored》,发现这两个游戏有一个共同点:游戏中的移动频繁依赖传送.因为自己正在做VR游戏项目,所以自然而然地就联想到了VR上.体验过VR的人都知道,一动就容易晕.对于游戏设计者来说,不能走路的游戏,似乎很难去设计.这看起来似乎是一个硬伤,不过也可以通过一些设计手段来减轻甚至避免这种现象:比如传送移动,比如第三人称视角,比如驾驶/飞行等.上半年还被一些人吐槽的传送移动,如今也几乎成为了第一人称VR游戏的标配,像《RoboRecall》的体验就非常爽.虽然也有像《EdgeofNowhere》这样优秀的第三人称VR游戏,但是毕竟是以减少沉浸感为代价的,没有发挥出VR游戏的魅力.所以,从开始做VR游戏预研开始,我就一直在想,什么样的游戏,才能够体现出VR的特色呢?玩MGS5的时候,一个好耳机是必备的,里面的听音辨位非常重要,经常需要隔墙听脚步声.而VR游戏中,3D音效是被加强了的,一方面通过转

  • 上班第一天,一个合格的运维应该做什么?

    运维行业正在变革,推荐阅读:30万年薪Linux运维工程师成长魔法作为一名运维工程师,如果你在春节放假期间没有被报警电话和邮件吵醒过,那说明你在放假前的准备真的非常出色。如果你的准备不够充分,下场请参考微博运维小哥:尽管你取得了阶段性的胜利度过了一个清净的假期,但现在可还不是掉以轻心的时候!上班第一天,不做这些事情的运维是不合格的哦~1对硬件设施进行全面体检不同的企业对IT设备的运维有不同的标准,有些公司节假日期间可以部分停机,有一些公司必须7*24小时的运行。在假期里勤勤恳恳工作的机器们有没有出现什么问题?首先让我们对硬件设施进行全面体检吧!PC机的检测及准备至少应该包括以下几个方面:(1)、对PC机的硬件进行检查,包括电源、硬盘和网卡等。(2)、要安装操作系统的最新补丁包,还要对杀毒软件的病毒库进行更新。(3)、将最新的应用程序和数据做备份。注意点一:UPS不间断电源检查电源检查往往是容易被忽视的一环。如今大部分企业的业务需要7*24小时不间断运行,甭管是自动还是手动,反正不能停。那么选用UPS电源习以为常。UPS的新旧或者老化程度如何,能否在服务器出现异常情况时,实现正常关闭服务

  • zookeeper详解

    Zookeeper--Zookeeper是什么 博客借鉴http://www.cnblogs.com/yuyijq/p/3391945.html​Google的三篇论文影响了很多很多人,也影响了很多很多系统。这三篇论文一直是分布式领域传阅的经典。根据MapReduce,于是我们有了Hadoop;根据GFS,于是我们有了HDFS;根据BigTable,于是我们有了HBase。而在这三篇论文里都提及Google的一个lockservice---Chubby,哦,于是我们有了Zookeeper。随着大数据的火热,Hxx们已经变得耳熟能详,现在作为一个开发人员如果都不知道这几个名词出门都好像不好意思跟人打招呼。但实际上对我们这些非大数据开发人员而言,Zookeeper是比Hxx们可能接触到更多的一个基础服务。但是,无奈的是它一直默默的位于二线,从来没有Hxx们那么耀眼。那么到底什么是Zookeeper呢?Zookeeper可以用来干什么?我们将如何使用Zookeeper?Zookeeper又是怎么实现的?伴随着Zookeeper有两篇论文:一篇是Zab,就是介绍Zookeeper背后使用的一致

  • RabbitMQ(三) ——发布订阅

    RabbitMQ(三)——发布订阅(原创内容,转载请注明来源,谢谢)一、概述RabbitMQ的发布订阅(Publish/Subscribe),其将生产者和消费者进一步解耦,生产者生产消息后,交付给交换机,消费者上线后,主动主动去队列中取数据进行处理。该模式也符合上一节工作队列中的ack、预取等规则。发布订阅模式如下图所示:二、交换机(exchange)生产者生产完消息之后,都是将消息通过channel交给交换机,即生产者并不直接和队列联系。在没有定义交换机的时候,RabbitMQ会启用内部预定义的交换机。即所有没有定义交换机,直接采用生产者发送消息到队列的,都是将消息发送给默认交换机。交换机是一个很简单的东西,即将生产者发送的消息,按照预先定好的规则,转发给对应的队列。1、广播发送rabbitmq中,交换机的规则有fanout、direct、topic、headers等。本节的发布订阅模式,主要可以采用fanout模式。fanout,类似网络技术中,子网的广播发送模式。即,fanout模式下,交换机会将信息发送给所有与其绑定的队列,即实现“发布”的功能。通常,再将每个队列给不同的消费者

  • filter suction_dispatcher

    大家好,又见面了,我是你们的朋友全栈君。FilterDispatcher是struts2.0.x到2.1.2版本的核心过滤器.!StrutsPrepareAndExecuteFilter是自2.1.3开始就替代了FilterDispatcher的.!StrutsPrepareAndExecuteFilter概要说明FilterDispatcher是早期struts2的过滤器,后期的都用StrutsPrepareAndExecuteFilter了,如2.1.6、2.1.8。StrutsPrepareAndExecuteFilter名字已经很能说明问题了,prepare与execute,前者表示准备,可以说是指filter中的init方法,即配制的导入;后者表示进行过滤,指doFilter方法,即将request请求,转发给对应的action去处理。FilterDispatcher是struts2.0.x到2.1.2版本的核心过滤器.!StrutsPrepareAndExecuteFilter的优势StrutsPrepareAndExecuteFilter是自2.1.3开始就替代了Filt

  • Java编程的逻辑 (86) - 动态代理

    ​本系列文章经补充和完善,已修订整理成书《Java编程的逻辑》,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http://item.jd.com/12299018.html 前面两节,我们介绍了反射和注解,利用它们,可以编写通用灵活的程序,本节,我们来探讨Java中另外一个动态特性-动态代理。 动态代理是一种强大的功能,它可以在运行时动态创建一个类,实现一个或多个接口,可以在不修改原有类的基础上动态为通过该类获取的对象添加方法、修改行为,这么描述比较抽象,下文会具体介绍,这些特性使得它广泛应用于各种系统程序、框架和库中,比如Spring,Hibernate,MyBatis,Guice等。 动态代理是实现面向切面的编程(AOP-AspectOrientedProgramming)的基础,切面的例子有日志、性能监控、权限检查、数据库事务等,它们在程序的很多地方都会用到,代码都差不多,但与某个具体的业务逻辑关系也不太密切,如果在每个用到的地方都写,代码会很冗余,也难以维护,AOP将这些切面与主体逻辑相分离,代码简单优雅

  • Awesome Projects (汇聚全球所有&#128046;项目,你值得拥有)

    AwesomeProjects SkySeraph Oct2017 Email:skyseraph00@163.com 更多精彩请直接访问SkySeraph个人站点:www.skyseraph.com  Introduction About awesome-projects 致力于收集AwesomeProjects,TechorNon-Tech.   欢迎您的加入! Fork or Email toMe,tks!  https://github.com/skyseraph/awesome-projects  Contribute SkySeraph … Menu TECH MenuDesc. Android AwesomeAndroids iOS AwesomeiOSs AI AwesomeAIs Front-End AwesomeFront-Ends HardWare AwesomeHardWares Tech-All Aweso

  • Failed to restart Polybase Data Movement service after running sp_polybase_join_group

    https://sqlserver.code.blog/2020/01/22/failed-to-restart-polybase-data-movement-after-running-sp_polybase_join_group/

  • 手把手教你grid布局

    概述 目前css布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。 基本概念 在学习grid布局之前,我们需要了解一些基本概念 1.容器和项目 采用网格布局的区域,称为“容器”。容器内部的采用网格定位的子元素称为“项目” <divclass="wrapper"> <divclass="item">1</div> <divclass="item">2</div> <divclass="item">3</div> </div>复制 上面的代码中,wrapper就是容器,item就是项目 1.1行、列和单元格 容器里面的水平区域称为“行”,垂直区域称为“列”,行列重叠出来的空间组成单元格 1.2网格线 划分网格的线,称为”网格线“ 黄色的代表是列的网格线,绿色代表的是行的网格线   Grid和flex类似,布局的属性都是分为两类,一类定义在容器上,称为容器属性,一类定义在项目上,称为项目属性 2容器属性 2.1

  • 答好友困惑:Java零基础如何入门,不知道怎么学,迷茫ING

    作者:程序员小跃 几个星期之前,我在知乎上看到一个提问,说是:对于完全没有经验零基础自身的数学底子也很弱学习Java应该怎么学习呢?想着类似的问题我也有过回答,并且反馈还是蛮好的,就参考之前的思路回答了一遍,可惜没在公众号里和大家分享,后续再整理一份好好分享下。(该问答地址见原文) 提出问题的是一位高中生,就顺藤摸瓜加了我好友,让我给指点指点。跃哥最近飘了,各种给人指点,也不知道是对是错,但是我还是从自身的角度来分析问题,毕竟我也工作多年,给初学者一些信心是我该做的;给初学者一些指导,是我力所能及的;给初学者一些劝退,也是我要做的,毕竟很多人可能最后发现自己并不适合写程序。 期间这位老弟和我聊了很多,我都零零散散给了解答。直到前几天,他抛给我很多困惑,都是在初学的时候会面临到的,所以我就抽时间做了一次详细的解答,主要涉及到Java从入门到进阶需要经历哪些、如何学习Java入门、还没开始实践就有一堆烦恼,该怎么办? 本文将以问答的方式,给出一些简单的见解,因为Java内容挺多的,可能会有遗漏,我已经让群里的小伙伴们做过一次筛选,读者朋友们看到了,也可以给我更多的补充噢。 知友:哥,

  • myeclipse使用maven插件进行maven install时报错check $m2_home environment variable and mvn script match

      check$m2_homeenvironmentvariableandmvnscriptmatch 分类: maven2015-09-0118:06 842人阅读 评论(0) 收藏 举报 Ifuaregettingerrorlike-Dmaven.multiModuleProjectDirectorysystemproperyisnotset.  Check$M2_HOMEenvironmentvariableandmvnscriptmatchIneclipse  thengothroughWindow-->Preference-->Java-->InstalledJREs-->EditIntheeditDefaultVMargumentsyouneedtoputIfyoualreadysetthemavenhome.  -Dmaven.multiModuleProjectDirectory=M2_HOME(ForWindowsmachine)  -Dma

  • vue的双向绑定和方法的使用

    <template> <divid="app"> <!--绑定数据--> <h2>{{msg}}</h2> <!--输入框的双向绑定,后面加v-model后面的值写你要绑定的值--> <inputtype="text"v-model="msg"> <!--一个获取输入框值的按钮--> <button@click="getMsg()">点击获取input的值</button> <!--一个修改输入框值的按钮--> <button@click="setMsg()">设置input的值</button> <hr> <br> <!--没有双向绑定的输入框,根据ref来查找这个input--> <inputtype="text"ref="userinfo"> <br> 一个div,通过ref来查找改变值(测试) <divref="box"> aaaaa </div&

  • Linux性能简单查看

    一、内存 查看内存命令free-h    主要观察used这一列已使用的内存,free表示空闲内存 Linux会把多余的内存自动用作buff/cache,所以此时free只剩159M不用担心 available列也显示了此时可用内存还有6.6G     二、CPU 查看cpu使用情况的方式有很多,常用的有top、mpstat、pidstat,如果发现没有以上命令行工具,可以下载yuminstall-ysysstat   top的输出主要有两部分,上部分为系统级信息,下部分为进程级信息 系统级的信息主要包括: 服务器运行时长 cpu最近1分钟5分钟15分钟的平均负载 负载和cpu核心数密切相关,一般负载达到核心数的70%就可能需要关注性能问题,比如此台服务器有16个核心,此时的负载为20多,很明显负载过高了   cpu使用率   us表示用户空间使用率sy表示系统\内核空间使用率id表示空闲使用率 下面看进程级信息,主要解释各个列的含义   PID进程号 USER进程所属的用户 PR&nb

  • 64*8段 LCD液晶显示驱动IC-VK1625 LQFP/QFP100/DICE 完全替代市面1625,适用仪器仪表/跑步机LCD面板等

    产品品牌:永嘉微电/VINKA 产品型号:VK1625 封装形式:LQFP100/QFP100、DICE/COG(定制)   概述: VK1625是一个点阵式存储映射的LCD驱动器,可支持最大512点(64EGx8COM)的LCD屏。单片机可通过3/4线串行接口配置显示参数和发送显示数据,也可通过指令进入省电模式。   特点: •工作电压2.4-5.2V •内置32kHzRC振荡器(上电默认) •可外接32kHz时钟源或32.768KHz晶体振荡器 •偏置电压(BIAS)固定为1/4 •COM周期(DUTY)固定为1/8 •内置显示RAM为64x8位 •蜂鸣器频率可配置为2kHz、4kHz •省电模式(通过关显示和关振荡器进入) •时基和看门狗共用1个时钟源,可配置8种频率 •时基或看门狗溢出信号输出脚为/IRQ脚(开漏) •3/4线串行接口 •软件配置LCD显示参数 •写命令和读写数据2种命令格式 •读写显示数据地址自动加1 •VLCD脚提供LCD驱动电压(<VDD) •封装: LQFP100(14.0mmx14.0mmPP=0.5mm) QFP100(20.0m

  • Better Man

      BetterMan     Sendsomeonetoloveme请赐给我一个爱人,   Ineedtorestinarms我想在她的臂弯中休息。   KeepmesafefromharmInpouringrain别让我在暴风骤雨中,受到伤害。   Givemeendlesssummer让我沐浴在无尽的夏日阳光中,   LordIfearthecold主啊,我害怕严寒。   FeelI'mgettingold我感到我的心在衰老,   Beforemytime未老先衰。     Asmysoulhealstheshame当我的灵魂治愈羞愧,   Iwillgrowthroughthispain痛苦将使我成长   LordI'mdoingallIcan主啊,我正竭尽所能,   Tobeabetterman成为一个更好的人。     Goeasyonmyconscience不再让我的良心受谴责,   'Causeit'snotmyfault因为这不是我的错。   IknowI'vebeentaught我知道我已经学会了   Totaketheblame承担过

  • 完全去除鼠标加速度

    很多玩FPS游戏譬如穿越火线、csgo的玩家基本上都会选择关闭鼠标的加速。很多人基本都是取消掉系统控制面板里鼠标选项的“提高鼠标精确度”复选框。这样其实的确关闭掉了“一部分”加速。其实还没有完全关闭。现在就来讲讲如何完全关闭掉鼠标的加速度。第一步骤:新建文本文档:输入以下内容 WindowsRegistryEditorVersion5.00 [HKEY_CURRENT_USER\ControlPanel\Mouse]"ActiveWindowTracking"=dword:00000000"DoubleClickHeight"="4""DoubleClickSpeed"="500""DoubleClickWidth"="4""MouseHoverHeight"="4""MouseHoverTime"="400""MouseHoverWidth"="4""MouseSensitivity"="10""MouseSpeed"="0"左上角文件另存为mouse.reg文件备用。第二步骤:Win+R按键输入:regedit打开注册表并且定位到:计算机\HKEY_CURRENT_USER\Con

  • 树形背包小结

    已知(2+1)?种做法 分别是: 按dfs序倒推 Link BZOJ2427代码 intsta[N],dfn[N],low[N],w[N],val[N],dp[N][505],n,m,top,W[N],V[N],fa[N],l[N],cnt[N],siz[N],bel[N],idx; vintG[N]; bitset<N>ins,vis; voidtarjan(intu){ staticinttar=0,idx=0; ins[sta[++top]=u]=1,dfn[u]=low[u]=++idx; for(vint::iteratorv=G[u].begin();v!=G[u].end();++v){ if(!dfn[*v]){ tarjan(*v); low[u]=min(low[u],low[*v]); } elseif(ins[*v])low[u]=min(low[u],dfn[*v]); } if(dfn[u]==low[u]){ intv;++tar; do{ ++cnt[tar]; ins[v=sta[top--]]=0,bel[v]=tar; w[tar

相关推荐

推荐阅读