微信原生小程序自定义封装组件(以导航navbar为例)

server/2025/1/11 20:15:09/

在这里插入图片描述

封装

topnav.js

const App = getApp();
Component({// 组件的属性列表properties: {pageName: String, //中间的titleshowNav: { //判断是否显示左上角的按钮    type: Boolean,value: true},showHome: { //判断是否显示左上角的home按钮type: Boolean,value: true},showLocation:{type: Boolean,value: false      },showColor:String, //颜色showStore:String,showWhite:{type: Boolean,value: false      },titlecolor:String,//titletitleleft:String,//title//中间是否是定位},// 组件的初始数据data: {// showNav: true, //判断是否显示左上角的home按钮// showHome: true, //判断是否显示左上角的按钮},lifetimes: {// 生命周期函数,可以为函数,或一个在methods段中定义的方法名attached: function() {this.setData({navHeight: App.globalData.navHeight, //导航栏高度navTop: App.globalData.navTop, //胶囊按钮与顶部的距离jnheight: App.globalData.jnheight, //胶囊高度jnwidth: App.globalData.jnwidth //胶囊宽度})}},// 组件的方法列表methods: {//回退navBack: function() {let pages = getCurrentPages();let prevpage = pages[pages.length - 2];prevpage.setData({isflag:true})wx.navigateBack()},//回主页navHome: function() {wx.reLaunch({url: '/pages/index/index'})},//跳转定位页面golocation:function(){wx.navigateTo({url: '/pages/switchcity/switchcity'})}}
})

topnav.json

{"component": true,"usingComponents": {}
}

topnav.wxml

<view class="navbar" style="height:{{navHeight}}px;background:{{showColor}};"><!-- 左上角 返回按钮 和 home按钮 wx:if="{{showNav}}" 是控制左上角按钮的显示隐藏,首页不显示 --><view class="navbar_left"style="top:{{navTop}}px;height:{{jnheight}}px;width:{{jnwidth}}px;background:{{showWhite?'rgba(0,0,0,0.2)':''}};"wx:if="{{showNav}}"><!-- 控制返回按钮的显示 --><view bindtap="navBack"><!-- <image src="../../images/back.png" mode="widthFix" style="width:40%"></image> --><i class="iconfont iconfanhui" style="color:{{showWhite?'#fff':''}};"></i></view><!-- home按钮 wx:if="{{showHome}}" 是控制左上角 home按钮的显示隐藏--><view class="nav_line" bindtap="navHome" wx:if="{{showHome}}"><!-- <image src="../../images/backhome.png" mode="widthFix" style="width:50%"></image> --><i class="iconfont iconshouye" style="color:{{showWhite?'#fff':''}};"></i></view></view><!-- 中间标题 --><!-- <view wx:if="{{showLocation}}" style="top:{{navTop}}px;"  class="navbar_title"><view bindtap="golocation">{{pageName}}<i class="iconfont iconarrowtriangle_down_fill"></i></view></view> --><view class="navbar_title {{showWhite?'':''}}" style="top:{{navTop}}px;padding-left: {{titleleft}}px;color:{{titlecolor}}"><view>{{pageName}}</view></view><!-- white_title  白色 -->
</view>

topnav.wxss

@import "/static/css/icon.wxss";.navbar {width: 100%;overflow: hidden;top: 0;left: 0;flex-shrink: 0;position: fixed !important;z-index: 9999;background: white;
}.navbar_left {display: -webkit-flex;display: flex;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;position: absolute;left: 20rpx;z-index: 11;line-height: 1;border: 1rpx solid #f0f0f0;border-radius: 40rpx;overflow: hidden;background: rgba(255, 255, 255, 0.6);box-sizing: border-box;
}.navbar_left view {width: 50%;display: flex;align-items: center;justify-content: center;
}.nav_line {border-left: 1rpx solid #f0f0f0;
}.navbar_title {width: 100%;box-sizing: border-box;text-align: center;height: 64rpx;line-height: 64rpx;position: absolute;left: 0;z-index: 10;font-size: 32rpx;font-weight: bold;text-overflow: ellipsis;overflow: hidden;
}.white_title {color: #fff !important;
}.iconfont {font-size: 34rpx;font-weight: 600;
}.iconarrowtriangle_down_fill {font-size: 20rpx;margin-left: 6rpx;
}

icon.wxss

@font-face {font-family: 'iconfont';  /* Project id 2408657 */src: url('//at.alicdn.com/t/c/font_2408657_h16zp03rdqu.woff2?t=1705321879152') format('woff2'),url('//at.alicdn.com/t/c/font_2408657_h16zp03rdqu.woff?t=1705321879152') format('woff'),url('//at.alicdn.com/t/c/font_2408657_h16zp03rdqu.ttf?t=1705321879152') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.iconxuanzhong1:before {content: "\e631";
}.iconweixuanzhong:before {content: "\e633";
}.iconcaigoufapiao:before {content: "\e6b7";
}.iconshangsheng1:before {content: "\e737";
}.iconkefu:before {content: "\e625";
}.iconFrame:before {content: "\e636";
}.iconxiajiantou:before {content: "\eb6d";
}.iconshangjiantou:before {content: "\eb6e";
}.iconshangxiaqiehuan:before {content: "\e9cd";
}.iconxiala2:before {content: "\e634";
}.iconwenduxiajiang:before {content: "\e622";
}.icondiandiandian:before {content: "\e6f5";
}.iconliuyan1:before {content: "\e748";
}.icondizhi:before {content: "\e63e";
}.iconyunshu:before {content: "\e637";
}.iconshang1:before {content: "\e64e";
}.iconxia1:before {content: "\e64f";
}.iconcha:before {content: "\e679";
}.icona-xuanzhong:before {content: "\e602";
}.iconbitian:before {content: "\e669";
}.iconzuobiaofill:before {content: "\e768";
}.icondianhua:before {content: "\e635";
}.iconzuobiao:before {content: "\e615";
}.iconshanchu:before {content: "\e601";
}.icon4Sdian:before {content: "\e740";
}.iconxiala1:before {content: "\e756";
}.iconzhankaishangxia:before {content: "\e7b2";
}.iconshang:before {content: "\e610";
}.iconxia:before {content: "\e61b";
}.iconxiala:before {content: "\e7b1";
}.iconxuanzhong:before {content: "\e60d";
}.iconarrowtriangle_down_fill:before {content: "\e620";
}.iconshangsheng:before {content: "\e609";
}.iconxiajiang:before {content: "\e738";
}.iconchacha:before {content: "\e62f";
}.iconright:before {content: "\eb1b";
}.iconfanhui1:before {content: "\e61e";
}.iconsousuo:before {content: "\e600";
}.iconfanhui:before {content: "\e63b";
}.iconshouye:before {content: "\e659";
}

使用

index.wxml

  <topnav pageName="导航"></topnav>

index.json

{"usingComponents": {"topnav": "/component/topnav/topnav",},"navigationStyle":"custom","navigationBarTitleText": "text"
}

http://www.ppmy.cn/server/157565.html

相关文章

TypeScript语言的软件工程

TypeScript语言的软件工程实践 引言 在现代软件工程中&#xff0c;编程语言的选择对项目的成功至关重要。近年来&#xff0c;JavaScript凭借其在Web开发中的广泛应用取得了巨大成功。然而&#xff0c;随着Web应用程序的复杂性不断增加&#xff0c;开发者渐渐发现纯JavaScript…

RT-DETR代码详解(官方pytorch版)——参数配置(1)

前言 RT-DETR虽然是DETR系列&#xff0c;但是它的代码结构和之前的DETR系列代码不一样。 它是通过很多的yaml文件进行参数配置&#xff0c;和之前在train.py的parser argparse.ArgumentParser()去配置所有参数不同&#xff0c;所以刚开始不熟悉代码的时候可能不知道在哪儿修…

类静态成员的相关内容

问&#xff1a;类静态成员能否在类的构造函数/类的非静态函数中初始化&#xff1f; 答&#xff1a;不能 class requestData {public:requestData(int fd_,int epoll_fd_);~requestData();static std::unordered_map<std::string,std::string> header_map;static int d;…

网站自动签到

我研究生生涯面临两个问题&#xff0c;一是写毕业论文&#xff0c;二是找工作&#xff0c;这两者又有很大的冲突。怎么解决这两个冲突呢&#xff1f;把python学好是一个路子&#xff0c;因此从今天我要开一个专栏就是学python 其实我的本意不是网站签到&#xff0c;我喜欢在起点…

No one knows regex better than me

No one knows regex better than me 代码分析&#xff0c;传了两个参数zero,first&#xff0c;然后$second对两个所传的参数进行了拼接 好比&#xff1a;?zero1&first2 传入后就是: 12 然后对$second进行了正则匹配&#xff0c;匹配所传入的参数是否包含字符串Yeedo|wa…

Python使用pip安装Caused by SSLError:certificate verify failed

最近公司电脑受限&#xff0c;安装conda好像有点问题&#xff0c;不让安装。只能pip硬装了&#xff1a; 使用pip安装的时候一直报错&#xff1a; “ Could not fetch URL https://pypi.org/simple/pyplot/: There was a problem confirming the ssl certificate: HTTPSConne…

android进入fastboot

安装windows驱动。android进入fastboot模式后&#xff0c;需要Windows驱动来跟adb通信&#xff0c;所以需要预先安装Windows usb驱动&#xff0c;否则进入fastboot模式后&#xff0c;无法使用adb连接手机。 下载网址&#xff1a;https://developer.android.com/studio/run/win-…

jenkins入门12-- 权限管理

Jenkins的权限管理 由于jenkins默认的权限管理体系不支持用户组或角色的配置&#xff0c;因此需要安装第三发插件来支持角色的配置&#xff0c;我们使用Role-based Authorization Strategy 插件,安装完插件&#xff0c;security授权策略&#xff0c;多了role-based strategy,设…