uni-app + uView 仿朋友圈页面

最近自己做的云开发练手项目，写了个类似朋友圈的玩意，需要的小伙伴可以参考一下。

第一次写文章，技术上也是新手出道，如有不足，请各位大佬指正。

废话不多说，直接上代码

主要组件部分

<template>
	<view class="u-page" style="margin: 0 15rpx;">
		<view class="u-demo-block">
			<view style="display: flex; margin-bottom: 5px;">
				<u--text prefixIcon="calendar" iconStyle="font-size: 19px" text="2022/02/12" color="#C0C0C0"></u--text>
				<u--text prefixIcon="clock" iconStyle="font-size: 17px" text="07:29" color="#C0C0C0" align="right"></u--text>
			</view>
			<view class="u-demo-block__content">
				<view class="album">
					<view>
						<!-- <image :src="picture" mode="" style="width: 32px;height: 32px;"></image> -->
						<u-avatar :src="picture" shape="square"></u-avatar>
					</view>
					<view class="album__content">
						<u--text :text="nickname" type="primary" bold size="17"></u--text>
						<!-- <u--text margin="0 0 8px 0" :text="content" wordWrap="anywhere"></u--text> -->
						<view :style="{ margin: '2px 0 5px', width: '100%'}">
							<u--text :text="content" :customStyle="{ width: '100%' }" :block="true"></u--text>
						</view>
						<!-- <u-album v-if="imgList.length < 1" :urls="aaa" :singleSize="imgWidth"></u-album> -->
						<view v-if="imgList.length < 1" :style="{ width: imgWidth + 'px' }"></view>
						<u-album v-if="imgList.length == 1" :urls="imgList" :singleSize="imgWidth"></u-album>
						<u-album v-if="imgList.length == 2" :urls="imgList" :multipleSize="imgWidth/2-5"></u-album>
						<u-album v-if="imgList.length == 3" :urls="imgList" :multipleSize="imgWidth/3-5"></u-album>
						<u-album v-if="imgList.length == 4" :urls="imgList" rowCount=2 :multipleSize="imgWidth/2-6"></u-album>
						<u-album v-if="imgList.length > 4" :urls="imgList" :multipleSize="imgWidth/3-5"></u-album>
					</view>
				</view>
			</view>
		</view>
		<u-divider :hairline="true" :style="{ width: (imgWidth + 50) + 'px', margin: '10px 0' }"></u-divider>
	</view>
</template>

<script>
	import {
		elemelyAdaptive
	} from '@/static/js/elemelyAdaptive.js'
	export default {
		props: {
			picture: String, // 头像
			nickname: String, // 昵称
			content: String, // 发表内容
			imgList: Array, // 图片地址
		},
		data() {
			return {
				imgWidth: ''
			}
		},
		onLoad() {

		},
		mounted() {
			let data = elemelyAdaptive()
			this.imgWidth = data.width
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.u-divider {
		margin-right: 0!important;
	}
	
	.u-divider[data-v-239d3faa],
	.divider--u-divider.divider--data-v-239d3faa {
		width: 378px;
	}

	.album {
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 5px;
			border-radius: 3px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}
</style>

监听窗口变动的js文件（也可以直接写在vue文件里）

function elemelyAdaptive() {
	var datat = {};
	uni.getSystemInfo({
		success: function(res) { // res - 各种参数
			let info = uni.createSelectorQuery().select('.u-album__row');
			info.boundingClientRect(function(data) { //data - 各种参数
				datat = data
				// console.log("Data数据", data);
			}).exec()
		}
	})
	return datat
}
export { elemelyAdaptive }

 接下来就是引用部分

<template>
	<view>
		<view class="content">
            <-- 轮播图，可以自己去掉 -->
			<u-swiper :list="list3" previousMargin="30" nextMargin="30" :circular="true" :autoplay="true" radius="5"
				bgColor="#ffffff" style="margin-bottom: 10px;"></u-swiper>
			<unicloud-db v-slot:default="{ data, loading, error, options }" collection="articles">
				<u-row v-for="(line,index) in data" type="flex">
					<friend-circle :picture='data[index].picture' :nickname='data[index].nickname'
						:content='data[index].content' :imgList='data[index].imgList'>
					</friend-circle>
				</u-row>
			</unicloud-db>
		</view>
	</view>
</template>

<script>
	import friendCircle from '@/components/friend-circle/friend-circle.vue'
	export default {
		components: {
			friendCircle
		},
		data() {
			return {
				list3: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
			};
		},
		onLoad() {},
		methods: {

		},
	};
</script>

<style>
	.content {
		height: 100%;
		margin: 15rpx;
		/* border: 1px solid #007AFF; */
	}
</style>

 emmm……代码部分还可以简洁优化的，懒……