效果图

代码

fava.nvue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<free-nav-bar title="我的收藏" showBack :showRight="false"></free-nav-bar>
		<view class="pt-3 px-3">
			<view class="bg-white rounded p-3">
				<text>聊天记录</text>
			</view>
		</view>
		<view class="pt-3 px-3">
			<view class="bg-white rounded p-3">
				<free-image src="/static/images/demo/demo6.jpg"></free-image>
			</view>
		</view>
	</view>
</template>

<script>
	import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
	import freeImage from '@/components/free-ui/free-image.vue';
	export default {
		components:{
			freeNavBar,
			freeImage
		},
		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">&#xe60d;</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">&#xe6e3;</text></free-icon-button>
						<free-icon-button @click="openExtend"><text class="iconfont font-md">&#xe682;</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-image.vue
<template>
	<!-- <image @click="preview(item.data)" v-if="item.type==='emoticon' || item.type==='image'"
		:src="item.data" lazy-load :style="'width:'+w+'rpx;height:'+h+'rpx;'" @load="loadImage"></image> -->
	<image @click="$emit('click')" 
		:src="src" class="bg-hover-light" lazy-load :style="imageStyle" @load="loadImage" :class="imageClass" :mode='mode'></image>
</template>

<script>
	export default {
		props: {
			src: {
				type: String,
				default: ""
			},
			imageClass:{
				type: String,
				default: ""
			},
			mode:{
				type:String,
				default:''
			},
			maxWidth:{ 
				type: Number,
				default: 500 // rpx
			},
			maxHeight:{
				type: Number,
				default: 350 // rpx
			}
		},
		data() {
			return {
				h: 100,
				w: 100
			}
		},
		computed: {
			imageStyle() {
				return `width:${this.w}px;height:${this.h}px;`
			}
		},
		methods: {
			// 加载图片
			loadImage(e){
				let w = e.detail.width
				let h = e.detail.height
				// // 最大宽度 px
				let maxW = uni.upx2px(this.maxWidth)
				// 最大高度
				let maxH = uni.upx2px(this.maxHeight)
				if (h <= maxH) {
					// 用原来的宽高
					this.w = w <= maxW ? w : maxW
					this.h = h
					this.$emit('load',{
						w:this.w,
						h:this.h
					})
					return;
				}
				this.h = maxH
				let w2 = maxH * (w / h)
				this.w = w2 <= maxW ? w2 : maxW
				this.$emit('load',{
					w:this.w,
					h:this.h
				})
			},
		},
	}
</script>

<style>
</style>

感谢大家观看，我们下期见