E企盈营销工具技术服务商 热线:4006-838-530

小程序自定义导航栏返回主页

E企盈直播平台营销卖货系统

小程序自定义导航栏返回主页效果图在app.js中获取状态栏的高度statusBarHeight自定义组件navbar.wxml自定义组件navbar.wxss自定义组件navbar.json自定义组件navbar.js调用组件的页面.json调用组件的页面.wxml效果图在app.js中获取状态栏的高度statusBarHeightglobalData: {    statusBarHeight:wx.getSystemInfoSync()[‘statusBarHeight’]  }自定义组件navbar.wxmlview class=”custom ” style=”padding-top:{{statusBarHeight}}px”  view class=’title-container’    view class=’capsule’ wx:if=”{{ back || home }}”      view bindtap=’back’ wx:if=”{{back}}”        image src=’img/back.svg’/image      /view      view bindtap=’backHome’ wx:if=”{{home}}”        image src=’img/home.svg’/image      /view    /view    view class=’title'{{navigationBarTitle}}/view  /view/viewview class=”empty_custom” style=”padding-top:{{statusBarHeight}}px”/view自定义组件navbar.wxss.custom{  position: fixed;  width: 100%;  top: 0;  left: 0;  height: 45px;  background: #1d8be8;  z-index: 999;}.title-container {  height: 44px;  display: flex;  align-items: center;  position: relative;}.capsule {  margin-left: 10px;  height: 32px;  border: 1px solid #fff;  border-radius: 16px;  display: flex;  align-items: center;}.capsule view {  width: 32px;  height: 60%;  position: relative;}.capsule view:nth-child(2) {  border-left: 1px solid #fff;}.capsule image {  width: 60%;  height: 100%;  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%,-50%);}.title {  color: white;  position: absolute;  left: 104px;  right: 104px;  font-size: 14px;  text-align: center;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}自定义组件navbar.json{  “component”: true}自定义组件navbar.jsconst app = getApp()Component({  properties: {    navigationBarTitle: {      type: String,      value: ”    },    back: {      type: Boolean,      value: false    },    home: {      type: Boolean,      value: false    }  },  data: {    statusBarHeight: app.globalData.statusBarHeight  },  methods: {    backHome: function () {      wx.reLaunch({        url: ‘/pages/index/index’,      })    },    back: function () {      wx.navigateBack({        delta: 1      })    }  }})调用组件的页面.json{  “usingComponents”: {    “navBar”: “/pages/common/navbar/navbar”,  },  “navigationStyle”: “custom”,//导航栏样式,custom 模式可自定义导航栏,只保留右上角胶囊状的按钮.  “navigationBarBackgroundColor”: “#1D8BE8”,  “navigationBarTextStyle”: “white”}调用组件的页面.wxmlnavBar back home navigationBarTitle=”{{navigationBarTitle}}”/navBar

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序自定义导航栏返回主页
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏