移动端开发案例【2】头部组件开发
本期直接实例演示，直接分享代码
标签块：
|
<template> <view> <view :class="getClass"> <!-- 状态栏 --> <view :style="'height:'+statusBarHeight+'px'"></view> <!-- 导航 --> <view class="w-100 flex align-center justify-between" style="height: 90rpx;"> <!-- 左边 --> <view class="flex align-center"> <!-- 返回按钮 --> <free-icon-button v-if="showBack" @click="back" :icon="'\ue60d'"></free-icon-button> <!-- 标题 --> <slot> <text v-if="title" class="font-md ml-3">{{getTitle}}</text> </slot> </view> <!-- 右边 --> <view class="flex align-center" v-if="showRight"> <slot name="right"> <free-icon-button @click="search" :icon="'\ue6e3'"></free-icon-button>
</slot> </view> </view> </view> <!-- 占位 --> <view v-if="fixed" :style="fixedStyle"></view>
<!-- 扩展菜单 --> <free-popup v-if="showRight" ref="extend" :bodyWidth="320" :bodyHeight="525" bodyBgColor="bg-dark" transformOrigin="right top"> <view class="flex flex-column" style="width: 320rpx;height: 525rpx;"> <view class="flex-1 flex align-center" hover-class="bg-hover-dark" v-for="(item,index) in menus" :key="index" @click="clickEvent(item.event)"> <text class="iconfont pl-3 pr-2 font-md text-white">{{item.icon}}</text> <text class="font-md text-white">{{item.name}}</text> </view> </view> </free-popup>
</view> </template> |
js板块：
|
<script> import freeIconButton from "./free-icon-button.vue" import freePopup from "./free-popup.vue" export default { props: { showBack:{ type:Boolean, default:false }, backEvent:{ type:Boolean, default:true }, title: { type: [String,Boolean], default:false }, fixed:{ type:Boolean, default:true }, noreadnum:{ type:[Number,String], default:0 }, bgColor:{ type:String, default:"bg-light" }, showRight:{ type:Boolean, default:true } }, components:{ freeIconButton, freePopup }, data() { return { statusBarHeight:0, navBarHeight:0, // menus:[ // { // name:"发起群聊", // event:"", // icon:"\ue633" // }, // { // name:"添加好友", // event:"", // icon:"\ue65d" // }, // { // name:"扫一扫", // event:"", // icon:"\ue614" // }, // { // name:"收付款", // event:"", // icon:"\ue66c" // }, // { // name:"帮助与反馈", // event:"", // icon:"\ue66c" // } // ], } }, mounted() { // #ifdef APP-PLUS-NVUE this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // this.statusBarHeight = plus.navigator.getStatusbarHeight() // #endif this.navBarHeight = this.statusBarHeight + uni.upx2px(90) }, computed: { fixedStyle() { return `height:${this.navBarHeight}px` }, getTitle(){ let noreadnum = this.noreadnum > 0 ? '('+this.noreadnum+')' : '' return this.title + noreadnum }, getClass(){ let fixed = this.fixed?'fixed-top':'' return `${fixed} ${this.bgColor}` } }, methods: { openExtend() { this.$refs.extend.show(uni.upx2px(415),uni.upx2px(150)) }, // 返回 back(){ if(this.backEvent){ return uni.navigateBack({ delta: 1 }); } this.$emit('back') }, search(){ uni.navigateTo({ url: '/pages/common/search/search' }); } }, } </script> |
以上样式库都是公共样式，公共样式引用查看系列更新《移动端【1】全局配置》
效果演示
