更新记录

1.0.0(2022-01-20) 下载此版本

修复bug,修改微调细节,美化页面,完成测试。


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

lxm-special-search是一个全平台前端页面模板,一般用来做首页页面模板,也可以做其他页面模板。全平台前端页面模板,首页框架:圆角矩形特型搜索框自定义导航栏+滚动字幕提示搜索关键字+搜索框内左一右二三图标+可滑动选项卡导航左插槽

组件名:lxm-special-search

说明

基于UviewUI2.0工具和技术,支持nvue文件。 Navbar 自定义导航栏 该组件,此组件一般用于在特殊情况下,需要自定义导航栏的时候用到。

平台差异说明

App(vue) App(nvue) H5 小程序 √ √ √ √ 说明

自定义导航栏内容
通过自定义slot传入的内容

<template>
    <view>
        <u-navbar
            leftText="返回"
            title="个人中心"
            :safeAreaInsetTop="false"
        >
            <view
                class="u-nav-slot"
                slot="left"
            >
                <u-icon
                    name="arrow-left"
                    size="19"
                ></u-icon>
                <u-line
                    direction="column"
                    :hairline="false"
                    length="16"
                    margin="0 8px"
                ></u-line>
                <u-icon
                    name="home"
                    size="20"
                ></u-icon>
            </view>
        </u-navbar>
    </view>
</template>
#自定义导航栏背景颜色
uView提供了一个bgColor参数,可以自定义导航栏的背景颜色:

<template>
    <view>
        <u-navbar title="" :bgColor="bgColor">

        </u-navbar>
        <view class="content">
            <!-- 正文内容 -->
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                bgColor: '#001f3f',
            }
        }
    }
</script>
API
#Props
参数  说明  类型  默认值 可选值
safeAreaInsetTop    是否开启顶部安全区适配 Boolean true    false
placeholder 固定在顶部时,是否生成一个等高元素,以防止塌陷 Boolean false   true
fixed   导航栏是否固定在顶部  Boolean true    false
border  导航栏底部是否显示下边框    Boolean false   true
leftIcon    左边返回图标的名称,只能为uView自带的图标 String  arrow-left  -
leftText    左边的提示文字 String  -   -
rightText   右边的提示文字 String  -   -
rightIcon   右边返回图标的名称,只能为uView自带的图标 String  -   -
title   导航栏标题,如设置为空字符,将会隐藏标题占位区域    String  -   -
bgColor 导航栏背景设置 String  #ffffff -
titleWidth  导航栏标题的最大宽度,内容超出会以省略号隐藏,单位rpx    String | Number 400rpx  -
height  导航栏高度(不包括状态栏高度在内,内部自动加上),单位px   String | Number 44px    -
leftIconSize    左侧返回图标的大小   String | Number 20px    -
leftIconColor   左侧返回图标的颜色   String  #303133 -
autoBack 2.0.19 点击左侧区域(返回图标),是否自动返回上一页  Boolean false   true
#Event
名称  说明  类型
leftClick   点击左侧区域  Handler
rightClick  点击右侧区域  Handler
#Slot
名称  说明
left    自定义左侧部分内容
right   自定义右侧部分内容
center 2.0.17   自定义中部内容

传奇开心果模板,名称:lxm-special-searchV1.0.0,传奇开心果出品,2022.1.20

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问