wwindow 配置 "navigationStyle": "custom",
自定义一个组件header
<style lang="less">.leo-header-fixed { position: fixed; width: 100%; z-index: 888; left: 0rpx; top: 0rpx; background-color: #fff; z-index: 100000;}.leo-header-layout { position: relative; width: 710rpx; height: 140rpx; left: 20rpx; top: 0rpx;}.leo-header-layout-x { margin-top: 100rpx;}.leo-header-tit { position: absolute; width: 300rpx; text-align: center; line-height: 65rpx; height: 65rpx; top: 50rpx; font-weight: bold; left: 50%; margin-left: -150rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.leo-back-nav { width: 18rpx; height: 31rpx; margin: 14rpx auto 0rpx auto; display: block;}.leo-back-home { width: 56rpx; height: 48rpx; margin: 4rpx auto 0rpx auto; display: block;}.leo-header-back { position: absolute; width: 50%; height: 65rpx; z-index: 333; left: -3rpx;}.leo-header-home { position: absolute; width: 50%; height: 60rpx; z-index: 333; right: 2rpx;}.leo-header-left { position: absolute; width: 175rpx; height: 60rpx; border-radius: 65rpx; top: 50rpx; overflow: hidden; border: #bbbbbb solid 1rpx;}.leo-h-line { position: absolute; height: 37rpx; left: 50%; width: 1rpx; background: #adadad; top: 11.5rpx; margin-left: -3rpx;}</style><template><view class="leo-header-fixed" style="height: {{navHeight}}px"> <view class="leo-header-layout"> <view class="leo-header-left" style="top:{{navTop}}px;"> <view class="leo-header-back" @tap="backHistory"> <image class="leo-back-nav" src="../images/back-btn.png" mode="scaleToFill" lazy-load="false"></image> </view> <view class="leo-h-line"></view> <view class="leo-header-home" @tap="backHome"> <image class="leo-back-home" src="../images/home-btn.png" mode="scaleToFill" lazy-load="false"></image> </view> </view> <view class="leo-header-tit" style="top:{{navTop}}px">{{title}}</view> </view></view></template><script>import wepy from 'wepy'import G from '../common/global.js';export default class Header extends wepy.component { props = { title: String, syncTitle: { type: String, default: 'null' }, twoWayTitle: { type: Number, default: 'nothing', twoWay: true } } data = { iphonex:false, rposition:'', navTop:'', navHeight:'', windowHeight:'', title:'' } components = {} methods = { backHistory() { let cps = getCurrentPages() if (cps.length > 1) { wepy.navigateBack({ delta: 1, //返回的页面数，如果 delta 大于现有页面数，则返回到首页, fail: res => { console.log(res) } }) } else { wepy.reLaunch({ url: 'home' }) } }, backHome() { wepy.reLaunch({ url: 'home' }) } } events = { getPersonalDetail(value) { this.title = value } } watch = {} computed = {} onLoad() { var that = this; this.iphonex = G.iphoneX this.navHeight = G.navHeight this.navTop =G.navTop this.windowHeight = G.windowHeight if( this.syncTitle ){ that.title = this.syncTitle } this.$apply() console.log(that.title) };}</script>
tabBar 配置 "custom": true,<style lang="less"> .tabbar { position: fixed; bottom: 0; left: 0; right: 0; height: 120rpx; border-top: 1px solid #d5d5d5; display: flex; font-size: 0; background: #fff; } .nav{ width: 250rpx; height: 120rpx; padding: 20rpx 0; } .icon{ width: 40rpx; height: 40rpx; margin: 0 auto; display: block; } .text{ line-height: 40rpx; text-align: center; color: #000000; font-size: 20rpx; font-weight: bold; }</style><template> <view class='tabbar'> <block wx:for="{{tabbarList}}" wx:for-index="index" wx:for-item="item"> <view class="nav" data-path="{{item.pagePath}}" @tap="switchTab"> <image src="{{item.iconPath}}" class="icon"></image> <view class="text">{{item.text}}</view> </view> </block> </view></template><script>import wepy from 'wepy'import G from '../common/global.js';export default class Header extends wepy.component { data = { iphonex:false, tabbarList:[{ "pagePath": "gchq", "text": "GCHQ", "iconPath": "./../images/icon1.png", "selectedIconPath": "./../images/icon1.png", "auth": 0 },{ "pagePath": "area", "text": "TERRIRORY OFFICE", "iconPath": "./../images/icon2.png", "selectedIconPath": "./../images/icon2.png", "auth": 0 },{ "pagePath": "new", "text": "WHAT'S NEW", "iconPath": "./../images/icon3.png", "selectedIconPath": "./../images/icon3.png", "auth": 0 }], } components = {} methods = { switchTab(e){ wx.reLaunch({ url: e.currentTarget.dataset.path }) } } events = {} watch = {} computed = {} onLoad() { this.iphonex = G.iphoneX this.$apply() }; onShow() {};}</script>
