精华内容
下载资源
问答
  • 如何设置自定义按钮
    2021-12-17 16:36:28

    1.支持H5、App端(在page.json里配置app-plus)

    监听按钮、输入框事件,把onNavigationBarButtonTap和onNavigationBarSearchInputChanged写在响应的页面中。

    {
     "path": "pages/search/search",
     "style": {
    	"navigationBarTitleText": "",
    	"app-plus": {
    	   "titleNView": {
    			"buttons": [
    				{
    				    "text": "搜索",
    				    "fontSize": "16px",
    				    "float": "left"
    			    },
    			]
    		}
    	 }
     }
    },
    
    

    2.想要自定义适配多端(包括小程序)的导航栏,可以考虑隐藏原生的,自己定义一个。
    首先将原生导航栏隐藏掉

    "globalStyle": { "navigationStyle": "custom" }
    

    其次根据不同端分别设置导航栏。
    App.vue

    onLaunch: function() {
        uni.getSystemInfo({
            success:function(e){
                Vue.prototype.statusBar = e.statusBarHeight
                // #ifndef MP
                if(e.platform == 'android') {
                    Vue.prototype.customBar = e.statusBarHeight + 50
                }else {
                    Vue.prototype.customBar = e.statusBarHeight + 45
                }
                // #endif
                
                // #ifdef MP-WEIXIN
                let custom = wx.getMenuButtonBoundingClientRect()
                Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight
                // #endif
                
                // #ifdef MP-ALIPAY
                Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight
                // #endif
            }
        })
    },
    
    <header-bar :isBack="true" title="搜索" titleTintColor="#fff" :bgColor="{background: '#353535'}">
        <text slot="back" class="uni_btnIco iconfont icon-close"></text>
        <text slot="iconfont" class="uni_btnIco iconfont icon-search"></text>
        <text slot="string" class="uni_btnString" style="color: #2B9939;">查询</text>
    </header-bar>
    

    3.已经封装好的组件

    参考网址:https://www.cnblogs.com/xiaoyan2017/p/11531238.html

    /**
     * isBack              是否返回按钮
     * title               标题
     * titleTintColor      标题颜色
     * bgColor             背景
     * center              标题居中
     * search              搜索条
     * searchRadius        圆形搜索条
     * fixed               是否固定
    */
    
    <template>
        <view class="uni_topbar" :style="style">
            <view class="inner flexbox flex_alignc" :class="[fixed ? 'fixed' : '']" :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px', 'color': titleTintColor}, bgColor]">
                <!-- 返回 -->
                <!-- <text class="uni_icoBack iconfont icon-arrL" v-if="isBack" @tap="goBack"></text> -->
                <view v-if="isBack" @tap="goBack">
                    <slot name="back"></slot>
                </view>
                <slot name="headerL"></slot>
                <!-- 标题 -->
                <!-- #ifndef MP -->
                <view class="flex1" v-if="!search && center"></view>
                <!-- #endif -->
                <view class="uni_title flex1" :class="[center ? 'uni_titleCenter' : '']" :style="[isBack ? {'font-size': '32upx', 'padding-left': '0'} : '']" v-if="!search && title">
                    {{title}}
                </view>
                <view class="uni_search flex1" :class="[searchRadius ? 'uni_searchRadius' : '']" v-if="search"> />
                    <input class="uni_searchIpt flex1" type="text" placeholder="搜索" placeholder-style="color: rgba(255,255,255,.5);" />
                </view>
                <!-- 右侧 -->
                <view class="uni_headerRight flexbox flex_row flex_alignc">
                    <slot name="iconfont"></slot>
                    <slot name="string"></slot>
                    <slot name="image"></slot>
                </view>
            </view>
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    statusBarH: this.statusBar,
                    customBarH: this.customBar
                }
            },
            props: {
                isBack: { type: [Boolean, String], default: true },
                title: { type: String, default: '' },
                titleTintColor: { type: String, default: '#fff' },
                bgColor: Object,
                center: { type: [Boolean, String], default: false },
                search: { type: [Boolean, String], default: false },
                searchRadius: { type: [Boolean, String], default: false },
                fixed: { type: [Boolean, String], default: false },
            },
            computed: {
                style() {
                    let _style = `height: ${this.customBarH}px;`
                    return _style
                }
            },
            methods: {
                goBack() {
                    uni.navigateBack()
                }
            }
        }
    </script>
    
    更多相关内容
  • 为了添加自定义按钮,按官方文档分4步走: 1、先定义工具类app/Admin/Extensions/Tools/ShowArtwork.php: <?php namespace App\Admin\Extensions\Tools; use Encore\Admin\Admin; use Encore\Admin\Grid\Tools\...
  • 由于项目这种类型的图片按钮比较多,所以重写了ImageButton类。 代码如下:package me.henji.widget; import android.content.Context;import android.graphics.ColorMatrix;import android.graphics....
  • 程序界面上的按钮多种多样,常用的就这几种:普通按钮、图标按钮、文字按钮、图片文字混合按钮。本文章记录了不同样式类型的按钮实现方法。下面话不多说了,来一起看看详细的介绍吧。 二、固定样式的按钮 固定样式的...
  • 读取单据内容,调用自己开发from窗体,实现自己的业务,如果懂uap可以开发自己的模块,uap开发手册(都是配置,不需要写代码)下载链接如下
  • 今天小编就为大家分享一篇layer弹出层自定义提交取消按钮的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • MFC自定义按钮实现

    2020-10-01 18:18:11
    MFC写的,实现按钮纹理自定义显示,实现方式比较纯粹,没有太多复杂的东西,感觉可以做教学用了......
  • Android 自定义返回按钮的实例详解 程序中我们有时候想让放回按钮按照自己的需求调整页面而不是单纯的按照系统返回上一级,这个问题很简单,重写 onKeyDown 方法即可。 下面方法,包含了 webview 中的返回上一页和...
  • Echarts的toolbox自定义按钮
  • LabVIEW自定义按钮.vi

    2021-04-25 11:43:38
    LabVIEW好看的自定义控件,可以直接利用
  • 自定义echarts全屏功能,并退出(可以从GitHub上下载源码) 地址(https://blog.csdn.net/qq453627768/article/details/73550200) https://github.com/453627768/453627768echart.github.io
  • 总结在一个自定义按钮。该按钮可以任意摆放图片和文字位置和距离,同时可以用QSS设置按钮内图片、文字、整个按钮的样式表效果,也就是说,可以实现鼠标划过、鼠标选中等样式表,跟原来QPushbutton的样式表效果...
  • jqgrid自定义按钮

    2019-02-13 14:59:30
    jqgrid自定义按钮,jqgrid自定义按钮,jqgrid自定义按钮
  • 当弹窗的默认确认和取消按钮需要更改时策略 添加footer设置,更改后效果如图

    当弹窗的默认确认和取消按钮需要更改时策略

    添加footer设置,更改后效果如图

     

    展开全文
  • 本例子包含C#自定义按钮、自定义WinForm无边框窗体、自定义MessageBox窗体 三个小例子,具体展现效果可以到:http://www.cnblogs.com/JiYF/p/8686463.html查看
  • PB自定义按钮

    2018-08-13 11:24:56
    为pb开发提供自定义按钮的格式,颜色,以及背景设计,满足pb页面优化的需要
  • 主要为大家详细介绍了CKEditor自定义按钮插入服务端图片的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • uni-app自定义弹窗组件,支持自定义图片,文本、按钮等功能。
  • Qt自定义按钮

    2019-01-28 16:06:56
    自定义按钮,可设置为纯文本 、纯图片,或者文本和图片的组合,可自定义文本和图片的对齐方式。文本颜色 、边框也可自定义。适合用来做导航按钮 、操作按钮等。源码借鉴大神,是在大神的基础上做了一些修改。
  • labview自定义按钮.rar

    2020-12-19 14:04:50
    labview各种自定义按钮
  • C# 自定义控件 自定义Button控件 水晶按钮。其他控件的重写与此类似
  • android 自定义按钮 您好,今天我们将看到如何在android中自定义按钮。 我们将看到如何制作带有背景色的圆角按钮,以及如何渐变到按钮。 有关两个示例,请参见下面的gif。 首先,让我们看看 如何在Android中...

    android 自定义按钮

    您好,今天我们将看到如何在android中自定义按钮。 我们将看到如何制作带有背景色的圆角按钮,以及如何渐变到按钮。

    有关两个示例,请参见下面的gif。

    首先,让我们看看

    如何在Android中更改按钮背景颜色

    请按照以下步骤在android中更改按钮背景。

    要在android中应用或更改按钮的背景颜色,我们需要在布局和新的可绘制文件中创建一个按钮。

    我们在布局中添加了我们的按钮,如下所示:

    <?xml version="1.0" encoding="utf-8"?>
    < androidx.constraintlayout.widget.ConstraintLayout xmlns:android = "http://schemas.android.com/apk/res/android"
        xmlns:app = "http://schemas.android.com/apk/res-auto"
        xmlns:tools = "http://schemas.android.com/tools"
        android:layout_width = "match_parent"
        android:layout_height = "match_parent"
        tools:context = ".MainActivity" >
    
        < Button
            android:layout_width = "wrap_content"
            android:layout_height = "wrap_content"
            app:layout_constraintTop_toTopOf = "parent"
            app:layout_constraintLeft_toLeftOf = "parent"
            app:layout_constraintRight_toRightOf = "parent"
            app:layout_constraintBottom_toBottomOf = "parent"
            android:text = "Boring Button"
            />
    
    </ androidx.constraintlayout.widget.ConstraintLayout >

    我们将制作一个可绘制的文件,并为按钮的背景编写代码。

    创建文件后。 将此代码添加到drawable文件中,在这里我们将该文件命名为bg_btn.xml

    <?xml version="1.0" encoding="utf-8"?>
    < shape android:shape = "rectangle" xmlns:android = "http://schemas.android.com/apk/res/android" >
        < solid
            android:color = "@android:color/holo_red_light" />
    </ shape >

    在上面的代码中,首先,我们通过将根元素设置为shape并传递属性shape并将其值设置为矩形来指定按钮的形状。 在形状上,我们添加了一个实体子元素并将属性颜色设置为红色。

    现在我们已经创建了按钮背景,现在我们必须将这些设置应用于按钮。

    在布局文件夹中打开活动布局文件,并在按钮子级中传递背景属性,并将其值设置为我们之前创建的可绘制文件,请参见以下代码以供参考。

    我们添加了一些填充并将文本颜色更改为白色,以便在android中看起来不错且有吸引力的按钮

    <?xml version="1.0" encoding="utf-8"?>
    < androidx.constraintlayout.widget.ConstraintLayout xmlns:android = "http://schemas.android.com/apk/res/android"
        xmlns:app = "http://schemas.android.com/apk/res-auto"
        xmlns:tools = "http://schemas.android.com/tools"
        android:layout_width = "match_parent"
        android:layout_height = "match_parent"
        tools:context = ".MainActivity" >
    
        < Button
            android:layout_width = "wrap_content"
            android:layout_height = "wrap_content"
            app:layout_constraintTop_toTopOf = "parent"
            app:layout_constraintLeft_toLeftOf = "parent"
            app:layout_constraintRight_toRightOf = "parent"
            app:layout_constraintBottom_toBottomOf = "parent"
            android:background = "@drawable/bg_btn"
            android:textColor = "@android:color/white"
            android:paddingStart = "20sp"
            android:paddingEnd = "20sp"
            android:text = "Custom Button"
            />
    
    </ androidx.constraintlayout.widget.ConstraintLayout >

    现在,您可以在预览窗口中查看自定义按钮预览,如果您在android手机上运行您的应用程序,则将看到自定义按钮。

    我们可以使此按钮变成圆角并添加渐变颜色,如下所示。

    如果您想学习如何制作上述按钮,可以参考android中自定义按钮的相关文章。

    感谢您的阅读希望,您会学到一些新东西。 祝你今天愉快。

    先前发布在 https://www.akshayrana.in/2020/05/customize-button-in-android.html

    翻译自: https://hackernoon.com/how-to-customize-buttons-in-android-jr5q3v5y

    android 自定义按钮

    展开全文
  • iOS自定义UITabBar中间按钮的具体代码,供大家参考,具体内容如下 自定义YLTbaBar继承自UITabBar git地址 YLTbaBar.h // // YLTabBar.h // 自定义tabbar // // Created by nyl on 2018/10/15. // Copyright :...
  • 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可。设置app-plus,配置编译到App平台的特定样式。dcloud平台对app-plus做了详细说明:app-plus配置,需注意 ...
  • 用钩子函数实现的自定义MessageBox,可以修改按钮的文字等属性
  • dll文件,拖拽至工具栏即可使用,可自行更换颜色和按钮状态
  • 「HTML+CSS」--自定义按钮样式【002】
  • BTN_DlG.rar_自定义按钮

    2022-09-19 19:16:58
    自定义按钮风格例程,效果很不错,我已用过。含有自定义按钮类,使用方法很简单,一看就会的
  • 微信小程序--自定义按钮样式(1)

    千次阅读 2021-03-27 23:43:37
    } 思路 详细思路讲解参考:「HTML+CSS」–自定义按钮样式【001】 说明:微信小程序button参数不太好设置,这里用的view代替(其实也是可以用button的) 踩坑 在微信小程序中没有hover,取而代之的是:hover-class,...

    前言

    Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~
    哈哈 自我介绍一下
    昵称:海轰
    标签:程序猿一只|C++选手|学生
    简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)
    学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!
    日常分享:微信公众号【海轰Pro】记录生活、学习点滴,分享一些源代码或者学习资料,欢迎关注~

    效果展示

    在这里插入图片描述

    Demo代码

    WXML

    <view class="btn" hover-class="btn_hover" hover-start-time="0">
      <view class="text" hover-class="text_hover">HaihongPro</view>
    </view>
    

    WXSS

    page{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .btn{
      width: 200px;
      height: 100px;
      color: #fff; 
      background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
      border-radius: 7px;
      position: relative;
      font-family: 'Lato', sans-serif;
      font-weight: 500;
      transition: all 0.5s ease;
      line-height: 100px;
      padding: 0;
    }
    .btn .text{
      display: block;
      width: 100%;
      height: 100%;
      font-size: 24px;
      text-align: center;
    }
    .btn::before,
    .btn::after{
      position:absolute;
      content: '';
      top: 0;
      right: 0;
      background: rgba(2, 126, 251, 1);
      transition: all 0.5s ease;
    }
    .btn::before{
      width: 0;
      height: 2px;
    }
    .btn::after{
      height: 0;
      width: 2px;
    }
    
    .btn_hover::before{
      width: 100%;
    }
    .btn_hover::after{
      height: 100%;
    }
    .btn .text::before,
    .btn .text::after{
      position: absolute;
      content: '';
      bottom: 0;
      left: 0;
      transition: all 0.3s ease;
      background: rgba(2, 126, 251, 1);
    }
    .btn .text::before{
      width: 0;
      height: 2px;
    }
    .btn .text::after{
      height: 0;
      width: 2px;
    }
    .btn_hover{
      background: #fff;
    }
    .btn .text_hover{
      color:rgba(2, 126, 251, 1)
    }
    .btn_hover .text_hover::before{
      width:100%;
    }
    .btn_hover .text_hover::after{
      height:100%;
    }
    

    思路

    详细思路讲解参考:「HTML+CSS」–自定义按钮样式【001】

    说明:微信小程序button参数不太好设置,这里用的view代替(其实也是可以用button的)

    踩坑

    在微信小程序中没有hover,取而代之的是:hover-class,也就是说,在原生CSS中,需用使用到hover属性的,在小程序中就需要添加hover-class类,可以看看下面的代码

    html

    <view class="btn" hover-class="btn_hover" hover-start-time="0">
    </view>
    

    css

    // 类似 btn:hover
    .btn_hover{
      background: #fff;
    }
    

    为了达到类似hover的效果,我们还需要设置hover-start-time=“0”,也就是当用户点击,立刻(0s)触发hover-class的效果

    在这里插入图片描述

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 515,695
精华内容 206,278
热门标签
关键字:

如何设置自定义按钮