uni-app7个⼈中⼼页开发my.nvue 内容如下
<template>
<view class="page">
<free-nav-bar bgColor="bg-white">门卫招聘
<free-icon-button slot="right"><text class="iconfont font-md"></text></free-icon-button> </free-nav-bar>
<free-list-item cover="../../../static/images/demo/demo6.jpg" title="呵呵" showRight coverSize="120"> <view class="flex flex-column">
<text class="text-dark font-lg font-weight-bold">呵呵</text>
<text class="text-light-muted font-md">微信号：VmzhbjzhV</text>
</view>
<view slot="right">
<text class="iconfont font-md text-light-muted"></text>
</view>
</free-list-item>
<free-divider></free-divider>
<free-list-item title="⽀付" showRight>
<text slot="icon" class="iconfont font-lg py-1"></text>
</free-list-item>
<free-divider></free-divider>
<free-list-item title="收藏" showRight>
<text slot="icon" class="iconfont font-lg py-1"></text>
</free-list-item>
<free-list-item title="相册" showRight>
<text slot="icon" class="iconfont font-lg py-1"></text>
</free-list-item>
<free-list-item title="表情" showRight>
<text slot="icon" class="iconfont font-lg py-1"></text>
</free-list-item>
<free-list-item title="设置" showRight>
<text slot="icon" class="iconfont font-lg py-1"></text>
</free-list-item>
</view>
</template>
<script>
import freeNavBar from "@/components/free-ui/free-nav-bar.vue";
import freeIconButton from "@/components/free-ui/free-icon-button.vue";
import freeListItem from "@/components/free-ui/free-list-item.vue";
import freeDivider from "@/components/free-ui/free-divider.vue";
export default {
components:{
freeNavBar,
freeIconButton,
freeListItem,
freeDivider
},
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
插件
free-list-item.vue
<template>
<view class="bg-white flex align-stretch" hover-class="bg-light" @click="$emit('click')">
<view class="flex align-center justify-center py-2 px-3">
<slot name="icon"></slot>
<image :src="cover" v-if="cover" mode="widthFix" :></image> </view>
<view class="flex-1 border-bottom flex align-center justify-between">
<slot>
<text class="font-md text-dark">{{title}}</text>
</slot>
<view class="flex align-center pr-3" v-if="showRight">
<slot name="right"></slot>
<!-- 右 -->
<text class="iconfont text-light-muted font-md" ></text>
</view>
金花菌</view>
</view>
</template>
<script>
export default{
props:{
/
/ 封⾯
cover:{
type:String,
default:""
},
// 标题
title:{
type:String,
default:""
},
// 显⽰右边
showRight:{
type:Boolean,
default:fal
},
// 封⾯⼤⼩
coverSize:{
type:[String,Number],
default:75
}
},
computed:{
coverStyle(){
朝代歌
return `width:${verSize}rpx;height:${verSize}rpx;`;
}
}
}
</script>
<style>
</style>
free-nav-bar.vue
<template>
<view>
<view :class="getClass">
<view :class="getClass">
<!-- 状态栏 -->
<view :></view>
<!-- 导航 -->
<view class="w-100 flex align-center justify-between" >
青春常在
<!-- 左边 -->
<view class="flex align-center">
<!-- 标题 -->
<text v-if="title" class="font-md ml-3" >{{getTitle}}</text>
</view>
<!-- 右边 -->
<view class="flex align-center">
<slot name="right">
<free-icon-button @click="arch"><text class="iconfont font-md"></text></free-icon-button>
<free-icon-button @click="openExtend"><text class="iconfont font-md"></text></free-icon-button>
</slot>
</view>
<!--\ue6e3 \ue682 -->
</view>
满月对联</view>
<!-- 站位 -->
<view v-if="fixed" :></view>
<!-- 扩展菜单 -->
<free-popup ref="extend" maskColor bottom :bodyWidth="320" :bodyHeight="525" bodyBgColor="bg-dark" transformOrigin="right top">
<view class="flex flex-column" >
<view v-for="(item,index) in menus" :key="index" class="flex-1 flex align-center" hover-class="bg-hover-dark" @click="clickEvent(item.event)"> <text class="pl-3 pr-2 iconfont font-md text-white">{{item.icon}}</text>
<text class="font-md text-white">{{item.name}}</text>
</view>
</view>
</free-popup>
</view>
</template>
<script>
import freeIconButton from './free-icon-button.vue';
import freePopup from './free-popup.vue';
export default {
components: {
freeIconButton,
freePopup
},
props: {
title: {
type: String,
default: ''
},
fixed:{
type:Boolean,
default:fal
},
noreadnum:{
type:Number,
default:0
},
bgColor:{
type:String,
default:"bg-light"
}
},
data() {
return {
statusBarHeight: 0,
navBarHeight: 0,
navBarHeight: 0,
menus:[
香菜馅饺子
{
name:'发起群聊',
event:"",
icon:"\ue633"
},
{
name:'添加好友',
event:"",
icon:"\ue65d"
},
{
name:'扫⼀扫',
event:"",赫本头
icon:"\ue614"
},
{
name:'收付款',
event:"",
icon:"\ue66c"
},
{
name:'帮助与反馈',
event:"",
icon:"\ue61c"
}
上海市大学],
}
},
mounted() {
// 获取任务栏⾼度
// #ifdef APP-PLUS-NVUE
this.statusBarHeight = StatusbarHeight()
/
/ #endif
this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
},
computed: {
fixedStyle() {
return `height:${this.navBarHeight}px`;
},
getTitle(){
let noreadnum = adnum>0 ? '('+adnum+')' : ''; return this.title + noreadnum;
},
getClass(){
let fixed = this.fixed?"fixed-top":"";
return `${fixed} ${this.bgColor}`;
}
},
methods:{
openExtend(){
this.$d.show(uni.upx2px(415),uni.upx2px(150));
}
}
}
</script>
<style>
</style>
free-icon-button.vue
