uni-app 19二维码名片页开发
Posted 2019ab
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uni-app 19二维码名片页开发相关的知识,希望对你有一定的参考价值。
不废话先看效果图,由于我们没有二维码名片所以先用一个照片代替
下面是代码部分
code.nvue
<template>
<view class="page">
<!-- 导航栏 -->
<free-nav-bar title="二维码名片" showBack :showRight="false"></free-nav-bar>
<view class="p-5">
<view class="bg-white rounded p-4">
<view class="flex align-center mb-4">
<free-avatar src="/static/images/demo/demo6.jpg"></free-avatar>
<view class="pl-4 flex flex-column">
<text class="font-md">昵称</text>
<text class="font text-light-muted">地区</text>
</view>
</view>
<view class="flex flex-column align-center justify-center">
<image src="/static/images/qrcode_for_gh_82c777d227b9_258.jpg" mode="" style="width: 550rpx;height: 550rpx;" class="bg-secondary mb-4"></image>
<text class="font text-light-muted">扫一扫上面的二维码,加我的微信</text>
</view>
</view>
</view>
</view>
</template>
<script>
import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
import freeAvatar from '@/components/free-ui/free-avatar.vue';
export default {
components:{
freeNavBar,
freeAvatar
},
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
引入的文件
// free-nav-bar.vue
<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"><text class="iconfont font-md"></text></free-icon-button>
<!-- 标题 -->
<text v-if="title" class="font-md ml-3" >{{getTitle}}</text>
</view>
<!-- 右边 -->
<view class="flex align-center" v-if="showRight">
<slot name="right">
<free-icon-button @click="search"><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" :style="fixedStyle"></view>
<!-- 扩展菜单 -->
<free-popup v-if="showRight" ref="extend" maskColor bottom :bodyWidth="320" :bodyHeight="525" bodyBgColor="bg-dark" transformOrigin="right top">
<view class="flex flex-column" style="width:320rpx;height: 525rpx;">
<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: {
showBack:{
type:Boolean,
default:false
},
title: {
type: String,
default: ''
},
fixed:{
type:Boolean,
default:false
},
noreadnum:{
type:Number,
default:0
},
bgColor:{
type:String,
default:"bg-light"
},
showRight:{
type:Boolean,
default:true
}
},
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:"\\ue61c"
}
],
}
},
mounted() {
// 获取任务栏高度
// #ifdef APP-PLUS-NVUE
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(){
uni.navigateBack({
delta:1
})
}
}
}
</script>
<style>
</style>
// free-avatar.vue
<template>
<image :src="src" mode="widthFix" :style="getStyle" :class="type" :clickType="clickType" @click="clickEvent"></image>
</template>
<script>
export default{
props:{
size:{
type:[String,Number],
default:90
},
src:{
type:String,
default:""
},
type:{
type:String,
default:"rounded"
},
clickType:{
type:String,
default:"none"
}
},
computed:{
getStyle(){
return `width: ${this.size}rpx;height: ${this.size}rpx;`;
}
},
methods:{
clickEvent(){
switch(this.clickType){
case 'navigateTo':
uni.navigateTo({
url:'/pages/mail/user-base/user-base',
});
break;
default:
this.$emit('click');
break;
}
}
}
}
</script>
<style>
</style>
好了感谢大家观看,我们下期见
对了大家可以关注我公众号,如下图
以上是关于uni-app 19二维码名片页开发的主要内容,如果未能解决你的问题,请参考以下文章