微信小程序自定义头部导航栏(组件化)

自定义头部导航栏代码

wxml部分 　　 　　 　　& lt;视图类=癱u-custom”比; 　　& lt;视图类=" cu-bar {{bgImage !=" & # 63;“none-bg设置bg-img”:“}}{{背景}}”在 　　& lt;视图类=靶卸眀indtap=癇ackPage”天气:如果=" {{!isShare,,isBack}}”在 　　& lt;文本类=" icon-back "祝辞& lt;/text> 　　& lt;槽name=" backText祝辞& lt;/slot> 　　& lt;/view> 　　& lt;视图类=靶卸痓order-custom”天气:如果=" {{isShare,,isBack}}”在 　　& lt;文本类=癷con-back bindtap”=癇ackPage”祝辞& lt;/text> 　　& lt;文本类=癷con-homefill bindtap”=皌oHome”祝辞& lt;/text> 　　& lt;/view> 　　& lt;视图类=澳谌荨痹? 　　& lt;槽的名字=澳谌荨弊４? lt;/slot> 　　& lt;/view> 　　& lt;/view> 　　& lt;/view> 　　 　　

wxs部分 　　 　　 　　.cu-custom{显示:块;位置:相对;} 　　.cu-custom .cu-bar{显示:flex;对齐项目:中心;justify-content:之间的空间;位置:固定;宽度:100%;上图:0;最小高度:100 rpx;padding-right: 220 rpx;不必:0 rpx 0 rpx 0 rpx;z - index: 9999;background - color: # fff;} 　　.cu-custom .cu-bar .border-custom{:相对;背景:rgba (255255255, 0.5);border - radius: 1000 rpx;高度:30 px;} 　　.cu-custom .cu-bar .action{显示:flex;对齐项目:中心;高度:100%;justify-content:中心;max-width: 100%;} 　　.cu-custom .cu-bar .action:第一个孩子{margin-left: 30 rpx;字体大小:30 rpx;} 　　{.cu-custom .cu-bar .border-custom文本显示:块;flex: 1;保证金:汽车!重要;text-align:中心;字体大小:34 rpx;} 　　.cu-bar .content{宽度:钙(100% - 440 rpx);位置:绝对;text-align:中心;左:0;右:0;底部:0;上图:0;保证金:汽车;高度:60 rpx;字体大小:32 rpx;行高:60 rpx;光标:没有;pointer-events:没有;文本溢出:省略;空白:nowrap;}溢出:隐藏;} 　　 　　

js部分 　　 　　 　　const应用=getApp (); 　　组件({ 　　选择:{ 　　addGlobalClass:没错, 　　multipleSlots:真 　　}， 　　属性:{ 　　isBack: { 　　类型:布尔值字符串, 　　默认值:假 　　}， 　　背景:{//类名 　　类型:字符串, 　　默认值:“ 　　}， 　　bgImage:{//仅支持网络地址 　　类型:字符串, 　　默认值:“ 　　}， 　　}， 　　数据:{ 　　状态栏:App.GlobalData.StatusBar, 　　CustomBar: App.GlobalData.CustomBar, 　　自定义:App.GlobalData.Custom, 　　isShare: App.GlobalData.share 　　}， 　　方法:{ 　　BackPage () { 　　wx.navigateBack ({ 　　三角洲:1 　　}); 　　}， 　　toHome () { 　　wx.reLaunch ({ 　　url:“/页/索引/指数”, 　　}) 　　} 　　} 　　}) 　　 　　

应用程序。js判断是否分享