uniapp 导航栏原生标题、按钮、输入框配置

作者: 暴躁程序员 | 来源:发表于2022-05-07 17:51 被阅读0次

uniapp 导航栏原生标题、按钮、输入框配置
第一天总结
2018-08-06第一天总结
SwiftUI篇-5 专题NavigationView、Navi
uniapp 原生导航栏
超简单！！！ iOS设置状态栏、导航栏按钮、标题、颜色、透明度，
uniapp 导航栏和状态栏设置
navigationController导航栏总结
iOS-导航栏，状态栏
iOS导航栏与状态栏基本用法

pages.json 中的相关配置参数

// #ifdef APP-PLUS || H5
{
    "path": "nav-button/nav-button",
    "style": {
        "navigationBarTitleText": "导航栏按钮属性",
        "app-plus": {
            "titleNView": {
                // 按钮配置
                "buttons": [{
                        "type": "share", // 按钮样式，默认值为 none
                        // type 的取值范围：
                        // forward      前进按钮
                        // back         后退按钮
                        // share        分享按钮
                        // favorite     收藏按钮
                        // home         主页按钮
                        // menu         菜单按钮
                        // close        关闭按钮
                        // transparent  透明按钮
                        // none         无样式，需通过 text 属性设置按钮上显示的内容、通过 fontSrc 属性设置使用的字体库。
                        // 注意：使用 type 值设置按钮的样式时，会忽略 fontSrc 和 text 属性
                        "color": "#fff", // 按钮上文字颜色，默认与标题文字颜色一致
                        "background": "#fff", // 按钮的背景颜色，仅在标题栏type=transparent时生效，默认值为灰色半透明
                        "colorPressed": "#fff", // 按下状态按钮文字颜色，默认值为 color 属性值自动调整透明度为 0.3
                        "float": "right", // 按钮在标题栏上的显示位置，可取值"left"、"right"，默认值为 right
                        "fontWeight": "normal", // 按钮上文字的粗细。可取值"normal"-标准字体、"bold"-加粗字体。默认值为 normal
                        "fontSize": "14", // 按钮上文字大小
                        "fontSrc": "/static/font/iconfont.ttf", // 按钮上文字使用的字体文件路径。不支持网络地址，请统一使用本地地址
                        "select": "false", // 是否显示选择指示图标（向下箭头），常用于城市选择，默认值为 false
                        "text": "消息", // 按钮上显示的文字。使用字体图标时 unicode 字符表示必须 '\u' 开头，如 "\ue123"（注意不能写成"\e123"）。
                        "width": "44px", // 按钮的宽度，可取值： "*px" - 逻辑像素值，如"10px"表示10逻辑像素值，不支持rpx。按钮的内容居中显示； "auto" - 自定计算宽度                     
                        "redDot": "false", // 是否显示红点，设置为true则显示红点，false则不显示红点。默认值为false。 注意：当设置了角标文本时红点不显示。
                        "badgeText": "99", // 角标文本，最多显示3个字符，超过则显示为...
                        
                    },
                    {
                        "type": "favorite"  
                    }
                ],
                // 搜索框配置
                "searchInput": {
                    "backgroundColor": "#fff", // 背景颜色
                    "borderRadius": "6px", // 输入框的圆角半径，取值格式为"XXpx"，其中XX为像素值（逻辑像素），不支持rpx。，默认值 0px
                    "placeholder": "请输入...", // 提示文本。
                    "placeholderColor": "#CCCCCC", // 提示文本颜色，默认值 #CCCCCC
                    "disabled": false, // 是否可输入，默认值 false 不输入
                    "autoFocus": false,  // 是否自动获取焦点，默认值 false 不获取
                    "align": center, // 非输入状态下文本的对齐方式。可取值： "left" - 居左对齐； "right" - 居右对齐； "center" - 居中对齐，默认值 center
                }
            }
        }
    }
},
// #endif

1. 顶部原生导航栏带自定义按钮

注意：在小程序端，不支持配置buttons

在 pages.json 中配置button，暂不支持动态改变buttons的样式，仅在H5和APP上生效

// #ifdef APP-PLUS || H5
{
    "path": "nav-button/nav-button",
    "style": {
        "navigationBarTitleText": "导航栏带自定义按钮",
        "app-plus": {
            "titleNView": {
                "buttons": [{
                        "type": "share"
                    },
                    {
                        "type": "favorite"
                    }
                ]
            }
        }
    }
},
// #endif

在当前页面通过 onNavigationBarButtonTap 可监听buttons的点击事件

onNavigationBarButtonTap(e) {
    console.log(e)
    uni.showToast({
        title: e.index === 0 ? "你点了分享按钮" : "你点了收藏按钮",
        icon: "none"
    })
}

2. 顶部原生导航栏文本按钮红点和角标，自定义角标数字

注意：在小程序端，不支持配置buttons

在 pages.json 中配置button，暂不支持动态改变buttons的样式，，仅APP上生效

// #ifdef APP-PLUS
{
    "path": "nav-dot/nav-dot",
    "style": {
        "navigationBarTitleText": "导航栏带红点和角标",
        "app-plus": {
            "titleNView": {
                "buttons": [{
                        "text": "消息",
                        "fontSize": "14",
                        "redDot": true
                    },
                    {
                        "text": "关注",
                        "fontSize": "14",
                        "badgeText": "12"
                    }
                ]
            }
        }
    }
},
// #endif

在当前页面通过 onNavigationBarButtonTap 可监听buttons的点击事件，在 onReady 中初始化设置角标状态和显示文字

 onReady 中初始化设置角标状态和显示文字() {
    // 初始化设置
    this.setStyle(0,true);
    this.setStyle(1,true,'9');
},
methods: {
    /**
     * 修改导航栏buttons
     * index[number] 修改的buttons 下标索引，最右边索引为0
     * show[boolean] 显示还是隐藏角标或者红点
     * text[string] 需要修改的角标的text 内容 ，如果定义redDot 此参数无效 ，如果定义badgeText请设置具体，如果不用输入
     */
    setStyle(index, show,text) {
        let pages = getCurrentPages();
        let page = pages[pages.length - 1];
        // #ifdef APP-PLUS
        let currentWebview = page.$getAppWebview();
        if(show){
            if(index === 0){
                currentWebview.showTitleNViewButtonRedDot({index:index,text:text})
            }else{
                currentWebview.setTitleNViewButtonBadge({index:index,text:text})
            }
        }else{
            if(index === 0){
                currentWebview.hideTitleNViewButtonRedDot({index:index})
            }else{
                currentWebview.removeTitleNViewButtonBadge({index:index})
            }
        }
        
        // #endif
    }
},
onNavigationBarButtonTap(e) {
    console.log(e)
    uni.showToast({
        title: e.index === 0 ? "你点了分享按钮" : "你点了收藏按钮",
        icon: "none"
    })
    // 取消红点或者角标
    this.setStyle(e.index,false);
}

3. 顶部原生导航栏文本按钮带城市选择下拉标签，可修改显示文字

注意：在小程序端，不支持配置buttons

在 pages.json 中配置button，暂不支持动态改变buttons的样式，，仅APP和H5上生效

// #ifdef APP-PLUS || H5
{
    "path": "nav-city-dropdown/nav-city-dropdown",
    "style": {
        "navigationBarTitleText": "导航栏带城市选择",
        "app-plus": {
            "titleNView": {
                "buttons": [{
                    "text": "北京市",
                    "fontSize": "14",
                    "select": true, // 显示下拉标签
                    "width": "auto"
                }]
            }
        }
    }
},
// #endif

在当前页面通过 onNavigationBarButtonTap 可监听buttons的点击事件，在 onReady 中初始化设置角标状态和显示文字

 onReady() {
    // #ifdef VUE3
    this.setStyle(0, '北京市')
    // #endif
    // #ifndef VUE3
    this.setStyle(1, '北京市')
    // #endif
 },
 methods: {
    /**
     * 修改导航栏buttons
     * index[number] 修改的buttons 下标索引，最右边索引为0
     * text[string] 需要修改的text 内容
     */
    setStyle(index, text) {
        let pages = getCurrentPages();
        let page = pages[pages.length - 1];
        if (text.length > 3) {
            text = text.substr(0, 3) + '...';
        }
        // #ifdef APP-PLUS
        let currentWebview = page.$getAppWebview();
        let titleNView = currentWebview.getStyle().titleNView;
        // 添加文字过长截取为3个字符，请根据自己业务需求更改
        titleNView.buttons[0].text = text;
        currentWebview.setStyle({
            titleNView: titleNView
        });
        // #endif
        // #ifdef H5
        // h5 临时方案
        const btn = document.getElementsByClassName('uni-btn-icon')[index]
        btn.innerText = text;
        // #endif
    }
 },
 onNavigationBarButtonTap(e) {
    if (e.index === 0) {
        // 执行代码块
    }
 }

4. 顶部原生导航栏标题初始化隐藏，随着上划逐渐显示完整标题，即透明渐变导航栏

在App端默认为标题栏透明，当用户向下滚动时，标题栏逐渐由透明转变为不透明；当用户再次向上滚动时，标题栏又从不透明变为透明状态
在微信小程序端，导航栏始终为不透明样式
无需再在页面中进行配置

在 pages.json 中配置明渐变导航栏

// #ifdef APP-PLUS || H5 || MP-ALIPAY
{
    "path": "nav-transparent/nav-transparent",
    "style": {
        "navigationBarTitleText": "透明渐变导航栏",
        "transparentTitle": "auto"
    }
},
// #endif

5. 顶部原生导航栏标题设置成图片，非文字

在 pages.json 中配置图片标题

// #ifdef APP-PLUS || H5 || MP-ALIPAY
{
    "path": "nav-image/nav-image",
    "style": {
        "navigationBarBackgroundColor": "#FFFFFF",
        "navigationBarTextStyle": "black",
        "titleImage": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b3e4cbd0-517d-11eb-a16f-5b3e54966275.png"
    }
},
// #endif

6. 顶部原生导航栏带搜索框和图标按钮

注意：在小程序端，不支持配置buttons

在 pages.json 中配置button，暂不支持动态改变buttons的样式，，仅APP和H5上生效

// #ifdef APP-PLUS || H5
// 进入正式输入框前的页面
{
    "path": "nav-search-input/nav-search-input",
    "style": {
        "navigationBarTitleText": "导航栏带搜索框",
        "app-plus": {
            "titleNView": {
                "type": "transparent",
                "titleColor": "#fff",
                "backgroundColor": "#007AFF",
                "buttons": [{
                    "fontSrc": "/static/uni.ttf",
                    "text": "\ue537",
                    "width": "40px",
                    "fontSize": "28px",
                    "color": "#fff",
                    "background": "rgba(0,0,0,0)"
                }],
                "searchInput": {
                    "backgroundColor": "#fff",
                    "borderRadius": "6px",
                    "placeholder": "请输入地址 如：大钟寺",
                    "disabled": true
                }
            }
        }
    }
},
// 正式输入框页面
{
    "path": "nav-search-input/detail/detail",
    "style": {
        "navigationBarTitleText": "搜索",
        "app-plus": {
            "titleNView": {
                "titleColor": "#fff",
                "backgroundColor": "#007AFF",
                "buttons": [{
                    "fontSrc": "/static/uni.ttf",
                    "text": "\ue537",
                    "width": "auto",
                    "fontSize": "28px",
                    "color": "#fff"
                }],
                "searchInput": {
                    "backgroundColor": "#fff",
                    "borderRadius": "6px",
                    "placeholder": "请输入地址 如：大钟寺",
                    "autoFocus": true
                }
            }
        }
    }
},
// #endif

进入正式输入框前的页面配置，此时的输入框相当于按钮，通过 onNavigationBarSearchInputClicked 触发事件，跳转到正式输入框页面

/**
 * 当 searchInput 配置 disabled 为 true 时触发
 */
onNavigationBarSearchInputClicked(e) {
    console.log('事件执行了')
    uni.navigateTo({
        url: '/pages/template/nav-search-input/detail/detail'
    });
},
/**
 *  点击导航栏 buttons 时触发
 */
onNavigationBarButtonTap(e) {
    console.log(e)
}

在正式输入框页面，onNavigationBarSearchInputChanged 输入时触发，onNavigationBarSearchInputConfirmed 点击软键盘搜索按键触发
可参考历史记录，和清除历史记录功能

<template>
    <view class="wrapper">
        <view v-if="isHistory" class="history-box">
            <view v-if="historyList.length > 0">
                <view class="history-title">
                    <text>搜索历史</text>
                    <text class="uni-icon uni-icon-trash" @click="clearSearch"></text>
                </view>
                <view class="history-content">
                    <view class="history-item" v-for="(item, index) in historyList" :key="index">
                        {{ item.name }}
                    </view>
                </view>
            </view>
            <view v-else class="no-data">您还没有历史记录</view>
        </view>
        <view v-else class="history-box">
            <view v-if="historyList.length > 0" class="history-list-box">
                <view
                    class="history-list-item"
                    v-for="(item, index) in historyList"
                    :key="index"
                    @click="listTap(item)"
                >
                    <rich-text :nodes="item.nameNodes"></rich-text>
                </view>
            </view>
            <view v-else class="no-data">没有搜索到相关内容</view>
        </view>
    </view>
</template>

<script>
import util from '@/components/amap-wx/js/util.js';

export default {
    data() {
        return {
            historyList: [],
            isHistory: true,
            list: [],
            flng: true,
            timer: null
        };
    },
    onLoad() {
        // 本示例用的是高德 sdk ，请根据具体需求换成自己的服务器接口。
        this.amapPlugin = util.mapInit();
        this.historyList = uni.getStorageSync('search:history');
    },
    methods: {
        /**
         * 列表点击
         */
        listTap(item) {
            item = JSON.parse(JSON.stringify(item));
            // 如果当前是历史搜索页面 ，那么点击不储存,直接 跳转
            if (this.history) {
                return;
            } else {
                this.isHistory = true;

                // 去做一些相关搜索功能 ，这里直接返回到上一个页面
                // 点击列表存储搜索数据
                util.setHistory(item);
                uni.navigateBack();
            }
        },
        /**
         * 清理历史搜索数据
         */
        clearSearch() {
            uni.showModal({
                title: '提示',
                content: '是否清理全部搜索历史？该操作不可逆。',
                success: res => {
                    if (res.confirm) {
                        this.historyList = util.removeHistory();
                    }
                }
            });
        },
        /**
         * 关键字搜索
         * 调用高德地图关键字搜索api
         */
        getInputtips(val) {
            let _this = this;
            this.amapPlugin.getInputtips({
                keywords: val,
                city: '北京',
                success: data => {
                    let dataObj = data.tips;
                    // 处理返回数据文字高亮
                    dataObj.map(item => {
                        return util.dataHandle(item, val);
                    });
                    //成功回调
                    _this.historyList = dataObj;
                },
                fail: info => {
                    //失败回调
                    console.log(info);
                }
            });
        }
    },
    /**
     * 当 searchInput 输入时触发
     */
    onNavigationBarSearchInputChanged(e) {
        let text = e.text;
        if (!text) {
            this.isHistory = true;
            this.historyList = [];
            this.historyList = uni.getStorageSync('search:history');

            return;
        } else {
            this.isHistory = false;
            this.getInputtips(text);
        }
    },
    /**
     * 点击软键盘搜索按键触发
     */
    onNavigationBarSearchInputConfirmed(e) {
        let text = e.text;
        if (!text) {
            this.isHistory = true;
            this.historyList = [];
            this.historyList = uni.getStorageSync('search:history');
            uni.showModal({
                title: '提示',
                content: '请输入内容。',
                success: res => {
                    if (res.confirm) {
                    }
                }
            });
            return;
        } else {
            uni.showModal({
                title: '提示',
                content: `您输入的内容为"${text}",如果点击确定,将记录到历史搜索,并返回.如果取消不做操作`,
                success: res => {
                    if (res.confirm) {
                        util.setHistory(text);
                        uni.navigateBack();
                    }
                }
            });
        }
    },
    /**
     *  点击导航栏 buttons 时触发
     */
    onNavigationBarButtonTap() {
        uni.showModal({
            title: '提示',
            content: '点击确定，修改输入框的内容为abc',
            success: res => {
                if (res.confirm) {
                    const currentWebview = this.$mp.page.$getAppWebview();
                    currentWebview.setTitleNViewSearchInputText("abc");
                }
            }
        });
    }
};
</script>

<style>
.history-title {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    padding-bottom: 0;
    font-size: 34rpx;
    color: #333;
}
.history-title .uni-icon {
    font-size: 40rpx;
}
.history-content {
    display: flex;
    flex-wrap: wrap;
    padding: 15rpx;
}
.history-item {
    padding: 4rpx 35rpx;
    border: 1px #f1f1f1 solid;
    background: #fff;
    border-radius: 50rpx;
    margin: 12rpx 10rpx;
    color: #999;
}
.history-list-box {
    /* margin: 10rpx 0; */
}
.history-list-item {
    padding: 30rpx 0;
    margin-left: 30rpx;
    border-bottom: 1px #EEEEEE solid;
    font-size: 28rpx;
}

.no-data {
    text-align: center;
    color: #999;
    margin: 100rpx;
}
</style>

uniapp 导航栏原生标题、按钮、输入框配置
pages.json 中的相关配置参数 1. 顶部原生导航栏带自定义按钮注意：在小程序端，不支持配置button...
第一天总结
测试的内容界面Title标题LOGO 图片文本Title标题菜单栏/导航栏页面显示内容Button 按钮输入框下...
2018-08-06第一天总结
测试的内容 1.界面标题Title 地址栏URL 导航栏按钮Button LOGO 输入框超链接下拉框页...
SwiftUI篇-5 专题NavigationView、Navi
NavigationView:标题、展示模式、隐藏导航栏、隐藏返回按钮、添加导航栏按钮 NavigationLin...
uniapp 原生导航栏
在项目开发中, 想要自定义一个导航栏, 做完之后发现坑还是不少需求: 导航栏添加搜索框与搜索图标 pages.j...
超简单！！！ iOS设置状态栏、导航栏按钮、标题、颜色、透明度，
超简单！！！ iOS设置状态栏、导航栏按钮、标题、颜色、透明度，偏移等超简单！！！ iOS设置状态栏、导航栏按钮...
uniapp 导航栏和状态栏设置
1. 全局、局部导航栏和状态栏配置参考官网：https://uniapp.dcloud.io/collocati...
navigationController导航栏总结
1.设置导航栏标题 2.设置item颜色（返回按钮颜色－－并不是标题颜色） 3.设置导航栏背景色 4.导航栏背景图...
iOS-导航栏，状态栏
包括iOS状态栏，导航栏，TabBar，滑动手势问题等 1.超简单！！！ iOS设置状态栏、导航栏按钮、标题、颜色...
iOS导航栏与状态栏基本用法
导航栏隐藏与显示透明度背景标题和左右按钮导航栏下方黑线状态栏显示与隐藏颜色修改