uni 组件头部

  1 //头部的组件，
  2 //组件页面代码
  3 <template>
  4 <!--components/pet-navbar/pet-navbar.wxml-->
  5 <view class="pet-navbar" :style="'height:' + (nh+'px') + ';background:' + background + ';color:' + color">
  6   <view class="pet-back" v-if="isBack" @tap="backPrevPage" :style="'padding:' + ((mh-19)/2+mt-sh+'px') + ' 30rpx'">
  7     <image src="/static/images/icons/back.png" ></image>
  8   </view>
  9 <!-- @tap="isBack?'backPrevPage':''" -->
 10   <view class="pet-title" :style="'padding:' + ((mh-19)/2+mt-sh+'px') + ' 0;font-size:' + fontSize + ';text-align:' + position">{{title}}</view>
 11   <view class="pet-empty" :style="'padding:' + ((mh-19)/2+mt-sh+'px') + ' 30rpx'"></view>
 12 </view>
 13 
 14 <!-- background:    背景颜色 -->
 15 <!-- color:         文字颜色 -->
 16 <!-- isBack:        是否带有返回按钮 -->
 17 <!-- fontSize:      字体大小 -->
 18 <!-- position: 文字对齐方式 -->
 19 <!-- title:         文字 -->
 20 </template>
 21 
 22 <script>
 23 
 24 export default {
 25   data() {
 26     return {
 27       sh: 0,
 28       //  手机状态栏高度
 29       nh: 0,
 30       //  计算后的自定义导航栏高度
 31       mh: 0,
 32       //  胶囊高度
 33       mt: 0 //  胶囊top
 34 
 35     };
 36   },
 37 
 38   components: {},
 39   props: {
 40     //  文字的颜色，箭头颜色暂不能修改，随后建图标库后可修改
 41     color: {
 42       type: String,
 43       default: '#333'
 44     },
 45     //  背景颜色
 46     background: {
 47       type: String,
 48       default: '#fff'
 49     },
 50     //  文字内容
 51     title: {
 52       type: String,
 53       default: ''
 54     },
 55     //  是否带返回箭头
 56     isBack: {
 57       type: Boolean,
 58       default: false
 59     },
 60     //  内容的对齐方式
 61     position: {
 62       type: String,
 63       default: 'center'
 64     },
 65     //  内容字体大小，图标库确定后可增加改变返回箭头大小
 66     fontSize: {
 67       type: String,
 68       default: '30rpx'
 69     },
 70     url: {
 71       type: String,
 72       default: ''
 73     }
 74   },
 75   //  组件加载时获取状态栏高度，计算导航栏高度
 76   beforeMount() {
 77     var that = this;
 78     let systemInfo = uni.getSystemInfoSync();　　　　　　　　　　　　　//获取设备相关信息 80     let info = systemInfo;
 81     let menuBtn = uni.getMenuButtonBoundingClientRect();　　　　　　//获取到胶囊元素的相关信息
 82     var sh = info.statusBarHeight;
 83     that.setData({
 84       sh: sh,
 85       mh: menuBtn.height,
 86       mt: menuBtn.top,
 87       nh: sh + menuBtn.height + (menuBtn.top - sh) * 2
 88     });
 89   },
 90 
 91   methods: {
 92     //  返回上一页
 93     backPrevPage() {
 94             console.log('dsadasd')
 95       var pages = getCurrentPages();
 96       var prevPage = pages[pages.length - 2];
 97       var currentPage = pages[pages.length - 1];
 98 
 99       if (this.url.value) {
100         uni.redirectTo({
101           url: url,
102           fail: () => {
103             uni.switchTab({
104               url: url
105             });
106           }
107         });
108       }
109 
110       if (prevPage == undefined) {
111         uni.switchTab({
112           url: '/pages/index/index'
113         });
114       } else {
115         var delta = 1;
116         var len = pages.length - 1;
117 
118         for (var i = len; i > 0; i--) {
119           prevPage = pages[i - 1];
120 
121           if (!prevPage) {
122             uni.switchTab({
123               url: '/pages/index/index'
124             });
125           } else if (prevPage.route == currentPage.route) {
126             delta++;
127           }
128         }
129 
130         uni.navigateBack({
131           delta: delta
132         });
133       }
134     } //  
135 
136 
137   }
138 };
139 </script>
140 <style lang="scss">
141 
142 .pet-navbar{
143   height: 80rpx;
144   width: 750rpx;
145   display: flex;
146   align-items: flex-end;
147   background-color: #FFFFFF;
148 }
149 .pet-back,
150 .pet-back  image,
151 .pet-empty{
152   height: 34rpx;
153   width: 18rpx;
154   font-size: 0;
155 }
156 .pet-title{
157   flex: 1;
158   line-height: 1;
159   font-size: 36rpx;
160   font-weight: 500;
161   font-family: PingFangSC-Medium, PingFang SC;
162 }
163 </style>
164 
165 
166 
167 
168 //调用组件页面的代码
169 
170 <template>
171     <view>
172         <pet-navbar isBack="true" title="优惠券"></pet-navbar>
173     </view>
174 </template>
175 
176 <script>
177     import petNavbar from "@/components/pet-navbar/pet-navbar";
178     export default {
179         components: {
180             petNavbar,
181         },
182         data() {
183             return {
184                 
185             }
186         },
187         methods: {
188             
189         }
190     }
191 </script>
192 
193 <style>
194 
195 </style>
忍一时，越想越气；退一步，哎呦我去！
uni 组件 头部

uni 组件头部
