uni-app 4.12开发弹出层组件基础架构

Posted 2021-09-07 2019ab

弹框开发

<template>
	<view class="">
		<free-nav-bar :title="'微信（100）'" :fixed='true'>
			<template v-slot="title"></template>
		</free-nav-bar>
		
		<!-- 列表 -->
		<block v-for="(item,index) in list" :key="index">
			<free-media-list :item="item" :index="index"></free-media-list>
		</block>
		
		<!-- 弹出层 -->
		<div style="z-index:9999;overflow:hidden;">
			<!-- 蒙版 -->
			<div class="position-fixed top-0 right-0 bottom-0" style="background-color:rgba(0,0,0,0.5);"></div>
				<!-- 弹出框内容 -->
				<div class="position-fixed  bg-white" style="left: 100rpx;top: 100rpx;">
			      <view style="height: 300rpx;width: 200rpx;"></view>		
				</div>
		</div>
	</view>
</template>

<script>
	import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
	import freeMediaList from '@/components/free-ui/free-media-list.vue';
	export default {
		components: {
			freeNavBar,
			freeMediaList
		},
		data() {
			return {
				list:[
					{
						avatar:"/static/images/demo/demo6.jpg",
						nickname:"昵称",
						update_time:1628069958,
						data:"你好啊，哈哈哈",
						noreadnum:1
					},
					{
						avatar:"/static/images/demo/demo6.jpg",
						nickname:"昵称",
						update_time:1628069958,
						data:"你好啊，哈哈哈",
						noreadnum:12
					},
					{
						avatar:"/static/images/demo/demo6.jpg",
						nickname:"昵称",
						update_time:1628069958,
						data:"你好啊，哈哈哈",
						noreadnum:2
					},
					{
						avatar:"/static/images/demo/demo6.jpg",
						nickname:"昵称",
						update_time:1628069958,
						data:"你好啊，哈哈哈",
						noreadnum:10
					}
				]
			}
		},
		onLoad() {
			
		},
		methods: {

		}
	}
</script>

<style>

</style>

如图所示

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