仿微信朋友圈页面设计_前端仿朋友圈小程序页面-程序员宅基地
技术标签： 微信
朋友圈页面设计
前言
此篇文章主要介绍是仿朋友圈的代码，主要包括下拉加载，照片分布(没有照片，1张照片，三张照片，四张照片，六张照片，七张照片，九张照片以及预览功能)，点赞和评论功能。
一、朋友圈页面格式
页面展示:
二、主要结构图
1.关于index.vue的代码内容
1.1 页面内容
代码如下（示例）：
<template>
<div>
<!-- 头部组件 -->
<!-- class="header-bar" :class="headerClass" -->
<van-nav-bar title="朋友圈" style="background-color:rgb(237,237,237)" left-arrow>
<van-icon name="more-o" slot="right" />
</van-nav-bar>
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<div>
<div class="content-wrapper" ref="wrapper">
<div class="content-text">
<div class="content-top">
<img class="circle-bg" src="../assets/fengmian.jpg" />
<div class="user">
<span>摆渡人</span>
<img src="../assets/me/touxiang.jpg" height="80" width="80" />
</div>
</div>
<!-- 朋友圈列表 -->
<div style='overflow-y: scroll; height: 100%;'>
<van-list>
<van-cell v-for="(item,index) in list" :key="index">
<!-- 用户内容 -->
<van-row>
<!-- 用户头像 -->
<van-col span="3">
<div>
<img :src="item.userpic" height="40" width="40" class='userpic' />
</div>
</van-col>
<van-col span="21">
<!-- 用户名 -->
<van-col span="24">
<span class='listname'>
{
{
item.name}}
</span>
</van-col>
<!-- 发表的文字内容 -->
<van-col span="24" v-if='item.content.length>0'>
{
{
item.content}}
</van-col>
<!-- 发表的照片、视频、公众号-->
<van-col span="24">
<!-- 多张照片 -->
<div v-if="item.picUrl.length>1">
<span v-for="(i,index) in item.picUrl">
<img :src=i class='img_wrap' preview="1" />
</span>
</div>
<!-- 单个照片 -->
<div v-if="item.picUrl.length===1">
<span v-for="(i,index) in item.picUrl">
<img :src=i class='img_wrap_one' preview="1" />
</span>
</div>
<!-- 视频 -->
<!-- <video class="video" v-if='item.videoUrl.length>0'>
<source :src="item.videoUrl" type="video/mp4">
</video> -->
</van-col>
<!-- 发布时间、赞和评论-->
<van-col span="24">
<!-- 发布时间 -->
<van-col span="8">
<span style='font-size:12px;'>{
{
item.time}}</span>
</van-col>
<!-- 点赞和 取消 -->
<van-col span="16" style="display: flex;justify-content: flex-end;">
<!--气泡框 -->
<div class='zanshow ' v-show='item.showPopover'>
<!-- 点赞 -->
<div class="like-box" :id='index' @click="operaLike($event)">
<!-- 显示一个喜欢的图标 -->
<div class="like-text" v-if="!item.isLike">
<van-icon name="like-o" />
赞
</div>
<div class="like-text" v-if="item.isLike">
<van-icon name="like" color="red" />
取消
</div>
</div>
<div class="like-box" :id='index' @click="operacom($event)">
<div class="like-text">
<van-icon name="comment-o" />
评论
</div>
</div>
<van-dialog v-model="popupshow" show-cancel-button :before-close="chargeBtn">
<!--输入框-->
<van-field
v-model="message"
rows="2"
autosize
label="评论"
type="textarea"
maxlength="140"
placeholder="请输入评论 "
show-word-limit
/>
</van-dialog>
</div>
<!-- 点击 按钮 -->
<van-icon name="weapp-nav" :id='index' @click="showPanel($event)" />
</van-col>
<!-- 评论 -->
</van-col>
<!-- 评论区和 点赞区的展示-->
<van-col span="24">
<div>
<van-cell-group>
<!-- 点赞 -->
<van-cell v-if="item.likes.length>0" class='zanpanel'>
<van-icon name="like-o" color="#626c90" />
<font color="#626c90" v-for='(likes_i, i) in item.likes' :key="i">
{
{
likes_i}}
</font>
</van-cell>
<!-- 评论区 -->
<van-cell v-if="item.punkt.length>0" class='zanpanel'>
<!-- 显示 评论区-->
<van-list class="pllist">
<div v-for='(punkt_i, j) in item.punkt' :key="j">
<font color="#626c90">{
{
punkt_i.pname+": "}}</font>
<span> {
{
punkt_i.conment}}</span>
</div>
</van-list>
</van-cell>
</van-cell-group>
</div>
</van-col>
</van-col>
</van-row>
</van-cell>
</van-list>
</div>
<!-- 更换相册弹出框 -->
<div>
</div>
<!-- <van-popup v-model="show" position="bottom" :overlay="false">
内容
</van-popup> -->
</div>
</div>
</div>
</van-pull-refresh>
</div>
</template>
1.2 方法
代码如下（示例）：
<script>
import animate from "animate.css";
export default {
name: 'index',
data() {
return {
// video
// 赞和评论气泡框
popupshow: false,
refreshing: false,
headerClass: false,
message: '',
username: '摆渡人',
list: [
{
"name": "1号选手",
"userpic": "https://pic3.zhimg.com/v2-d1928d1a4e0d849f7c6c49428d2e0411_r.jpg?source=1940ef5c",
"content": "今天周四啦",
"picUrl": ["https://img.zcool.cn/community/017445590a8752a80121455021e118.jpg@1280w_1l_2o_100sh.jpg"],
"videoUrl": "",
"time": "1小时前",
"showComt": '',
'likes': ['摆渡人'],
"isLike": true,
'showPopover': false,
"punkt": [{
'pname': "1号选手",
"conment": "又是一个周四！"
}],
},
{
"name": "2号选手",
"userpic": "https://pic3.zhimg.com/v2-d1928d1a4e0d849f7c6c49428d2e0411_r.jpg?source=1940ef5c",
"content": "每天早上一杯怀姜杏仁臻白饮，开脾健胃，润而不燥，还能提升身体的基础代谢～",
"picUrl": ["https://img.zcool.cn/community/[email protected]",
"https://img.zcool.cn/community/017445590a8752a80121455021e118.jpg@1280w_1l_2o_100sh.jpg"
],
"videoUrl": "",
"time": "13分钟前",
"showComt": '',
'likes': ['2.1选手,', '2.2选手'],
"isLike": false,
"punkt": [{
'pname': "2.3选手",
"conment": "天空真好看",
}],
'showPopover': false
},
{
"name": "3号选手",
"userpic": "https://pic3.zhimg.com/v2-d1928d1a4e0d849f7c6c49428d2e0411_r.jpg?source=1940ef5c",
"content": "天空很好看呀！",
"picUrl": ["https://img.zcool.cn/community/[email protected]",
"https://img.zcool.cn/community/017445590a8752a80121455021e118.jpg@1280w_1l_2o_100sh.jpg",
"https://img.zcool.cn/community/01a06a5796ccd20000012e7e50f0db.jpg@1280w_1l_2o_100sh.jpg",
],
"videoUrl": "https://www.sicau.edu.cn/__local/A/1E/52/E8093449CF93AF4E8960C131C04_09BD5DD1_1F12F030.mp4?e=.mp4",
"time": "1小时前",
'likes': ['3.1选手,', '3.2选手,', '3.3选手,', '3.4选手,', '摆渡人'],
"isLike": true,
'showPopover': false,
"punkt": [{
'pname': "11111",
"conment": "下次不要这样了"
},
{
'pname': "22222",
"conment": "下次不要这样了"
},
{
'pname': "33333",
"conment": "谢谢你们"
}
],
"videoUrl": "https://www.sicau.edu.cn/__local/A/1E/52/E8093449CF93AF4E8960C131C04_09BD5DD1_1F12F030.mp4?e=.mp4"
}
],
loading: false, //是否处于加载状态
finished: false, //是否加载完成
newsList: [],
total: 0,
pages: 0,
pageNum: 1,
pageSize: 15,
allname: ['花舞飞飞', '瓶瓶', '发型定制阿丁', '爪哇老师', 'tears', '月是人间客', '清野', '从前有个羊羊羊', '小柠檬'],
alluserpic: ['https://pic.qqtn.com/up/2018-7/15312903318836927.jpg',
"https://p.qqan.com/up/2020-9/16000633123836637.jpg",
"https://pic.qqtn.com/up/2018-4/15239319654651823.jpg",
"https://p.qqan.com/up/2019-9/15674712456869139.jpg",
"https://tupian.qqw21.com/article/UploadPic/2020-4/202041422405279300.jpg"
],
allcontent: ['走神回到放风那天', '不抱希望地问一句，朋友圈有抢票高手吗', '八月的风', " ｜ 早秋新款已全面上新,：“和夏天告别 与秋日相拥", ''],
allpicurl: ["https://tupian.qqw21.com/article/UploadPic/2020-6/20206102242145383.jpg",
"https://p.qqan.com/up/2020-12/16068065762056714.jpg",
"https://pic.qqtn.com/up/2017-11/15115072217014845.jpg",
"https://pic.qqtn.com/up/2018-5/15263513171586087.jpg",
"https://tse3-mm.cn.bing.net/th/id/OIP-C.iC51xBokp5uExMcBPWfxwwAAAA?pid=ImgDet&rs=1",
"https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF",
"https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF",
"https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF",
"https://t7.baidu.com/it/u=2529476510,3041785782&fm=193&f=GIF"
], //picurl合集
allvideourl: ['', ''], //video合集
allconment: ['怎么了', "多发点，俺爱看", "高质量朋友圈", '已读不赞', '一个月又过去了', "月末提醒", '加油加油', '太可爱了吧！', "真的好浪漫"],
alltime: ['1小时前', '23分钟前', '45分钟前', "2023年2月3日"]
}
},
methods: {
// 随机选取列表中元素
rand_itemone(item, type) {
if (type == 1) {
return item[Math.floor(Math.random() * item.length)]
} else {
//切取超过1的列表
let n, m, index;
let itemcooy = JSON.parse(JSON.stringify(item))
index = new Array(item.length).fill(1).map((v, i) => ++i)
index.sort(function() {
return (0.5 - Math.random());
}); //打乱列表索引
[n, m] = index.splice(2, 3)
return itemcooy.splice(n, m)
}
},
//获取加载数据
getinfo() {
for (let i = 0; i < this.allname.length; i++) {
// 随机添加姓allname、alluserpic、allcontent、allpicurl、allvideourl、time(获取当前数据)、allconment
let userinfo = {
};
userinfo.name = this.rand_itemone(this.allname, 1) //用户名
userinfo.time = this.rand_itemone(this.alltime, 1) //时间
userinfo.isLike = false
userinfo.showPopover = false,
userinfo.userpic = this.rand_itemone(this.alluserpic, 1) //用户照片
if (i == 0) {
userinfo.picUrl = this.allpicurl
} else {
userinfo.picUrl = this.rand_itemone(this.allpicurl, 'pic') //单张或多张照片
}
//发布内容
if (i == 4) {
userinfo.content = ''
} else {
userinfo.content = this.rand_itemone(this.allcontent, 1)
}
//赞
userinfo.likes = this.rand_itemone(this.allname, 'likes')
for (let k = 0; k < userinfo.likes.length - 1; k++) {
userinfo.likes[k] += ','
} //处理赞
userinfo.punkt = []
//单个或多个评论
for (let j = 0; j < 3; j++) {
let punkt_i = {
};
punkt_i.pname = this.rand_itemone(this.allname, 1)
punkt_i.conment = this.rand_itemone(this.allconment, 1)
userinfo.punkt.push(punkt_i)
}
//视频
if (userinfo.picUrl > 0) {
userinfo.videoUrl = ''
} else {
userinfo.videoUrl = this.rand_itemone(this.allvideourl, 1)
}
// 如果视频照片评论都没有，抽取九张照片和文字
if (userinfo.content.length == 0 & userinfo.picUrl.length == 0 & userinfo.videoUrl == '') {
userinfo.content = this.allcontent[2]
userinfo.picUrl = this.allpicurl.splice(0, 9)
}
this.list.push(userinfo);
}
console.log('userinfo', this.list)
},
// 下拉加载
onRefresh() {
this.refreshing = true;
this.getinfo()
// 加载状态结束
this.$toast('刷新成功')
if (this.list.length >= 10) {
this.refreshing = false;
}
},
//上拉加载
onLoad() {
setTimeout(() => {
this.getinfo()
// 加载状态结束
this.loading = false;
this.$toast('加载成功')
// 数据全部加载完成
if (this.list.length >= 10) {
this.finished = true;
}
}, 500);
},
// 弹出气泡框
showPanel(e) {
this.list[e.target.id].showPopover = !this.list[e.target.id].showPopover
console.log('pan', e.target.id)
},
//获取父级元素
getParentName(obj) {
let node = obj;
let ofDiv = true;
while (ofDiv) {
if (node.parentNode.className.includes("like-box")) {
// 条件示例
node = node.parentNode;
ofDiv = false;
} else if (node.className.includes("like-text")) {
node = null;
ofDiv = false;
} else {
node = node.parentNode;
}
}
return node
},
// 点赞的操作
operaLike(e) {
let index = parseInt(this.getParentName(e.target).id)
console.log('inx',index)
let update_arr = this.list[index]
if (update_arr.isLike) {
// 取消点赞
let userindex = update_arr.likes.indexOf(this.username)
if(userindex==update_arr.likes.length-1){
update_arr.likes.splice(userindex,1)
if(update_arr.likes.length!=0){
update_arr.likes[update_arr.likes.length-1]=update_arr.likes[update_arr.likes.length-1].split(',')[0]
}
}
else{
update_arr.likes.splice(userindex,1)
}
} else {
// 点赞
if (update_arr.likes.length != 0) {
update_arr.likes.push("," + this.username)
} else {
update_arr.likes.push(this.username)
}
}
update_arr.isLike = !update_arr.isLike
update_arr.showPopover = !update_arr.showPopover
},
// 评论 的操作
operacom(e) {
// 出现弹窗
this.popupshow =! this.popupshow
// 存储id
let index = parseInt(this.getParentName(e.target).id)
localStorage.setItem('com',index)
},
//弹窗的确认或取消
chargeBtn(action, done) {
//确认or取消
if (action === 'cancel') {
//取消按钮
done()
} else if (action === 'confirm') {
//确定按钮
//向后端传值并关闭dialog弹出框
let index=localStorage.getItem('com')
let update_arr = this.list[index]
update_arr.showPopover = !update_arr.showPopover
this.list[index].punkt.push({
'pname': this.username,
"conment": this.message
})
};
this.popupshow=false
done()
},
}
}
</script>
1.3 样式
代码如下（示例）：
<style>
.header-bar {
width: 100%;
height: 10px;
background-color: rgba(238, 233, 233, 1);
}
/* .border {
border-bottom: 1px solid #000;
margin-bottom:20px;
} */
.circle-bg {
width: 100%;
margin-bottom: 20px;
}
.content {
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
}
.content-wrapper {
height: 100%;
overflow: hidden;
}
.content-top {
position: relative;
}
.user {
position: absolute;
bottom: 0px;
right: 10px;
display: flex;
align-items: center;
color: #fff;
}
.user span {
font-size: 20px;
font-weight: bold;
padding-bottom: 20px;
margin-right: 10px;
}
.user img {
border: 2px solid #fff;
}
.content-body {
overflow-y: scroll;
display: flex;
}
.butclass {
height: auto;
width: 8%;
background-color: #fafafa;
border: none;
}
.video {
height: 50px;
width: 100%;
}
.pllist {
margin: 2px 2px;
}
.listname {
color: rgb(98, 108, 144);
/* font-family: "Gill Sans Extrabold"; */
font-size: 15px;
font-weight: 600;
}
.userpic {
border-radius: 6px;
}
.img_wrap {
height: 80px;
width: 26%;
margin-right: 2%;
}
.img_wrap_one {
height: 150px;
width: 35%;
size: 50%;
margin-right: 2%;
}
.zanpanel {
background-color: #fafafa;
padding: 2px 10px;
}
.zanshow {
width: 50%;
height: 20px;
border-radius: 3px;
background-color: #4c4c4c;
padding: 2px 10px;
margin: -3px 2px;
display: flex;
justify-content: space-between;
}
.like-text {
margin-top: -2px;
color: white;
font-size: 12px;
}
</style>
总结
至此，一个仿朋友圈页面设计的页面就可以实现了，但是其中没有添加对评论的回复以及对于视频的添加，欢迎交流！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
智能推荐
matlab求极小值点,Newton迭代法Matlab程序求函数极小值点-程序员宅基地
文章浏览阅读1.4k次。Newton迭代法Matlab程序求函数极小值点clear allclc%Newton迭代法求解极小值点%090311%===================================== %定义函数disp '函数 f(x) 为:'syms x1 x2f=(x1-2)^4+(x1-2)^2*x2^2+(x2+1)^2disp '初始点的值：'x0=[1;1]%===============...
tableau无法建立连接_Tableau入门（一）：数据连接-程序员宅基地
文章浏览阅读3.9k次。1 开始界面你可以在Tableau官网上下载Tableau Desktop(即桌面版)。打开Tableau Desktop后，你可以看到如下界面：图1 Tableau开始界面开始界面的左侧是Tableau所支持的数据连接方式：1)到文件；2)到服务器；3)已保存的数据源。第一种方式连接的是本地所保存的文件数据，我们可以连接到excel表格、文本文件等。一些公司的年报、绩效数据都是以PDF文件呈现的..._tableau没有连接到文件
mac：python安装路径_mac python安装目录-程序员宅基地
文章浏览阅读9.4k次，点赞4次，收藏21次。文章目录一、Mac下python的安装路径1、Mac自带python路径2、Mac中自己安装的python3.x的路径3、homebrew安装python路径二、brew 安装指定版本 python31、安装2、错误处理3、查看安装路径了解python的安装路径，有利于处对python安装的管理。比如删除多余的python，可以在这些路径中查询处理。一、Mac下python的安装路径1、Mac自带python路径/System/Library/Frameworks/Python.framework/_mac python安装目录
大语言模型——大语言模型的能力特点_大语言模型在训练完成后的特征是什么?-程序员宅基地
文章浏览阅读971次，点赞19次，收藏9次。大语言模型——大语言模型的能力特点_大语言模型在训练完成后的特征是什么?
LGBM 模型结果 图形展示_lgbm模型-程序员宅基地
文章浏览阅读3.9k次。LGBM 模型结果 树图形展示_lgbm模型
cmake LINK_DIRECTORIES不起作用,报错的原因-程序员宅基地
文章浏览阅读1.7w次，点赞6次，收藏14次。ADD_EXECUTABLE(main main.cpp)TARGET_LINK_LIBRARIES(main libhello.so)INCLUDE_DIRECTORIES(/tmp/t3/include/hello /tmp/t3/lib)LINK_DIRECTORIES(/tmp/t3/lib)这种情况下会出错，说找不到引用，原因是ADD_EXECUTABLE出现在LIN..._link_directories不起作用
随便推点
WebSocket服务端消息推送_hutool websocket-程序员宅基地
文章浏览阅读1.4w次，点赞13次，收藏122次。一、Web端实现即时消息推送五种方式股票曲线实时变化，在线IM聊天等等，Web系统里总是能见到消息推送的应用。消息推送用好了能增强用户体验，实现消息推送有N种解决方案。1.1、什么是消息推送消息推送（Push）指运营人员通过自己的产品或第三方工具对用户当前网页或移动设备进行的主动消息推送。用户可以在网页上或移动设备锁定屏幕和通知栏看到push消息通知。以此来实现用户的多层次需求，使得用户能够自己设定所需要的信息频道，得到即时消息，简单说就是一种定制信息的实现方式。我们平时浏览邮箱时突然弹出消息_hutool websocket
python中返回上一步操作_返回上一步的快捷键-百度经验-程序员宅基地
文章浏览阅读2.7w次，点赞5次，收藏4次。今天小编就来教一教大家返回上一步的快捷键，想知道的赶快来看一看小编下面编写的这些步骤吧。工具/原料电脑 Windows7键盘 极影2.0方法/步骤1首先大家打开我们的电脑，在电脑上随便打开一个页面，开始编辑内容，再进行下一步操作。2帮大家编辑到一半，一不小心删除了一些内容，有想要把删除的那一部分给找回来的时候。3那么大家就需要在键盘上找到“Alt”和“Z”这两个键，如下图所示。再进行下面的操作。4..._python怎么回到上一步
stm32C8T6示波器教程，等效采样，从零开始，（学习踩坑记录，乱七八糟，大一，写完后会整理一下）（大二，现在已经会了，简单进行总结）_stm32ct86使用的是什么处理器-程序员宅基地
文章浏览阅读1.5k次，点赞15次，收藏34次。自己的学习记录_stm32ct86使用的是什么处理器
node-pre-gyp WARN Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.-程序员宅基地
文章浏览阅读2.8k次。出现以下错误的原因是 ：node-pre-gyp WARN Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.7/fse-v1.2.7-node-v83-darwin-x64.tar.gz请参考文章【重磅推荐】关于npm之代码升级顺利成功的完美攻略【package.json和package-lock.json的作用】：https://blog.csdn.net/weixin_4334.._node-pre-gyp warn tried to download(404)
hp 服务器可以安装win7系统安装失败,如何解决win7hp1213打印机安装失败的问题-程序员宅基地
文章浏览阅读430次。近日有使用雨林木风win7系统的用户跟小编反映说自己在电脑中安装HP1213打印机的时候，出现了安装失败的情况，不知道怎么解决很是苦恼。那我们遇到这种情况该怎么解决呢？没关系下面小编就来为大家分享关于解决win7hp1213打印机安装失败的方法。解决方法如下：1、首先安装M1213打印机之前，最好重启电脑，关闭不必要的程序。必须关闭系统防火墙和杀毒防护软件，至关重要。经研究90%的安装失败是因为杀..._hp laserjet professional m1213nf mfp不支持winder732位
GIT常见错误解决办法_git:13: missing delimiter for 'u' glob qualifier-程序员宅基地
文章浏览阅读101次。wsed_git:13: missing delimiter for 'u' glob qualifier