uniapp-顶部胶囊按钮组件

最新推荐文章于 2025-05-29 16:07:48 发布

骚瑞这是个bug

最新推荐文章于 2025-05-29 16:07:48 发布

阅读量2.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：组件文章标签： javascript

本文链接：https://blog.youkuaiyun.com/thesize/article/details/113309210

本文介绍了如何在uniapp中创建并全局注册顶部胶囊按钮组件，详细展示了组件代码，并提供了具体的使用方法，帮助开发者快速集成到项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件代码如下：

<template>
	<view class="navigation-bar" :style="'height:'+height">
		<view class="navigation-bar-fixed" :style="{height:height,background:(!config.transparent&&!config.linear)?config.bgcolor:'transparent'}">
			<!-- capsule or normal -->
			<view v-if="[1,2].indexOf(config.type)!= -1" :class="config.type==1?'navigation-bar-capsule':'navigation-bar-textbox'" :style="{top:marginTop}">
				<view class="button-action" hover-class="button-action-active" @click="back_">
					<image src="/static/icon/back_.png" mode=""></image>
				</view>
				<view class="button-v-line"></view>
				<view v-if="!config.share" class="button-action" hover-class="button-action-active" @click="home_">
					<image src="/static/icon/home_.png" mode=""></image>
				</view>
				<view v-if="config.share" class="button-action" hover-class="button-action-active">
					<button class="button_clear" open-type="share" hover-class="none">
						<image src="/static/icon/share_.png" mode=""></image>
					</button>
				</view>
			</view>
			<!-- custom button -->
			<view v-if="[3,4].indexOf(config.type)!= -1" @click="conduct_" :class="config.type == 3?'navigation-bar-custom-capsule':'navigation-bar-custom-textbox'" :style="{top:marginTop}">
				<image v-if="config.menuIcon" class="custom-icon" :src="config.menuIcon"></image>
				<text class="custom-describe">{
   
   {
   
   config.menuText}}</text>
			</view>
			<!-- title -->
			<view class="navigation-bar-title" :style="'margin-top:'+marginTop+';color:'+config.fontcolor">{
   
   {
   
   title}}</view>
			<!-- linear background -->
			<view v-if="config.linear"