微信公众号开发
微信小程序 仿微信朋友圈
本文主要是介绍微信小程序 仿微信朋友圈，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
<scroll-view class='page'>
<!-- 列表 -->
<view class='CircleList' wx:for='{{DataSource}}'>
<!-- 头像、昵称、内容 -->
<view class='body-view'>
<!-- 头像 -->
<view class='left-view'>
<image class='user-icon' src='{{item.icon}}'></image>
</view>
<view class='right-view'>
<!-- 昵称 -->
<view class='user-name-view'>
<label class='user-name'>我的名字</label>
</view>
<!-- 内容 -->
<view class='user-content-view'>
<text class='user-content'>{{item.content}}</text>
</view>
<!-- 图片 -->
<view class='photo-view'>
<image class='photo' bindtap='LookPhoto' wx:for='{{item.resource}}' data-list="{{item.resource}}" wx:for-item="dImg" data-photUrl='{{dImg}}' src='{{dImg}}' style='width:{{photoWidth}}px;height:{{photoWidth}}px'></image>
</view>
<!-- 地理位置 -->
<view class='user-address-view'>
<label>长沙市天心区芙蓉南路四段158号地理信息产业园总部基地A座9楼</label>
</view>
<!-- 时间、删除按钮、点赞评论按钮 -->
<view class='TDD-view'>
<label>2018-07-25 10:14:23</label>
<button bindtap='delete'>删除</button>
<image data-isShow='{{isShow}}' bindtap='TouchDiscuss' src='/images/wxdiscuss.png'></image>
</view>
<!-- 点赞 -->
<view class='zan-view'>
<view class='trigon-view'>
<image mode='aspectFill' class='trigon' src='/images/trigon.png'></image>
</view>
<!-- 点赞 -->
<view class='zan-bg-view'>
<view class='zan-user-view' wx:for='{{item.zanSource}}'>
<label bindtap='TouchZanUser' data-name='{{item}}' class='zan-user'>{{item}},</label>
</view>
</view>
<view class='line'></view>
<!-- 评论 -->
<view class='discuss-view'>
<view class='discuss' wx:for='{{item.contnet}}'>
<label bindtap='TouchZanUser' data-name='{{item.firstname}}' class='discuss-user'>{{item.firstname}}：</label>
<label class='content'>{{item.content}}</label>
</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
// pages/CircleFriends/CircleFriends.js
var app = getApp()
var that
Page({
/**
* 页面的初始数据
*/
data: {
DataSource: [{
icon: 'https://pic1.zhimg.com/v2-ac3f0eeee5d83d5007da10e07b545092_250x0.jpg?source=172ae18b',
content: '我大学毕业到一家集团公司的办公室当文员。办公室主任有一特长，即文章写得好，很有思想，公司董事长很器重他，董事长的讲话稿和企业的年终总结等一系列重大文章都是出自他的手笔。',
resource: ['https://pic1.zhimg.com/v2-ac3f0eeee5d83d5007da10e07b545092_250x0.jpg?source=172ae18b',
'https://img0.baidu.com/it/u=2441833187,3184827457&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=358',
'https://pic1.zhimg.com/v2-ac3f0eeee5d83d5007da10e07b545092_250x0.jpg?source=172ae18b',
'https://pic1.zhimg.com/v2-ac3f0eeee5d83d5007da10e07b545092_250x0.jpg?source=172ae18b',
'https://pic1.zhimg.com/v2-ac3f0eeee5d83d5007da10e07b545092_250x0.jpg?source=172ae18b'
],
zanSource: ['张三', '李四', '王五', '找钱', '孙俪', '王宝'],
contnet: [{
'firstname': '张三',
'content': '你好漂亮呀！！'
},
{
'firstname': '李四',
'content': '纳尼！！'
},
{
'firstname': '王五',
'content': '鬼扯咧'
},
{
'firstname': '王宝',
'content': '昨晚11点左右，一则郑爽胡彦斌疑似复合的消息刷爆各大论坛，微博在深夜11点热度高达200万直接爆掉，中国意难忘又开始了！！！'
}
]},{
icon: 'https://pic1.zhimg.com/v2-ac3f0eeee5d83d5007da10e07b545092_250x0.jpg?source=172ae18b',
content: '我大学毕业到一家集团公司的办公室当文员。办公室主任有一特长，即文章写得好，很有思想，公司董事长很器重他，董事长的讲话稿和企业的年终总结等一系列重大文章都是出自他的手笔。',
resource: ['https://img0.baidu.com/it/u=2441833187,3184827457&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=358',
'https://pic1.zhimg.com/v2-ac3f0eeee5d83d5007da10e07b545092_250x0.jpg?source=172ae18b',
'https://img0.baidu.com/it/u=2441833187,3184827457&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=358',
'https://img0.baidu.com/it/u=2441833187,3184827457&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=358',
'https://img0.baidu.com/it/u=2441833187,3184827457&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=358'
],
zanSource: ['张三', '李四', '王五', '找钱', '孙俪', '王宝'],
contnet: [{
'firstname': '张三',
'content': '你好漂亮呀！！'
},
{
'firstname': '李四',
'content': '纳尼！！'
},
{
'firstname': '王五',
'content': '鬼扯咧'
},
{
'firstname': '王宝',
'content': '昨晚11点左右，一则郑爽胡彦斌疑似复合的消息刷爆各大论坛，微博在深夜11点热度高达200万直接爆掉，中国意难忘又开始了！！！'
}
]}],
photoWidth: wx.getSystemInfoSync().windowWidth / 5,
popTop: 0, //弹出点赞评论框的位置
popWidth: 0, //弹出框宽度
isShow: true, //判断是否显示弹出框
},
/**
* 生命周期函数--监听页面加载
*/
onl oad: function(options) {
that = this
},
// 点击图片进行大图查看
LookPhoto: function(e) {
console.log(e);
wx.previewImage({
current: e.currentTarget.dataset.photurl,
urls: e.currentTarget.dataset.list
})
},
// 点击点赞的人
TouchZanUser: function(e) {
wx.showModal({
title: e.currentTarget.dataset.name,
showCancel: false
})
},
// 删除朋友圈
delete: function() {
wx.showToast({
title: '删除成功',
})
},
// 点击了点赞评论
TouchDiscuss: function(e) {
// this.data.isShow = !this.data.isShow
// 动画
var animation = wx.createAnimation({
duration: 300,
timingFunction: 'linear',
delay: 0,
})
if (that.data.isShow == false) {
that.setData({
popTop: e.target.offsetTop - (e.detail.y - e.target.offsetTop) / 2,
popWidth: 0,
isShow: true
})
// 0.3秒后滑动
setTimeout(function() {
animation.width(0).opacity(1).step()
that.setData({
animation: animation.export(),
})
}, 100)
} else {
// 0.3秒后滑动
setTimeout(function() {
animation.width(120).opacity(1).step()
that.setData({
animation: animation.export(),
})
}, 100)
that.setData({
popTop: e.target.offsetTop - (e.detail.y - e.target.offsetTop) / 2,
popWidth: 0,
isShow: false
})
}
}
})
/* pages/CircleFriends/CircleFriends.wxss */
page{
background: whitesmoke;
}
.page{
width: 100%;
/* overflow-x: hidden */
}
/* 列表 */
.CircleList{
background: white;
margin-bottom: 1px;
border-bottom: 1px solid whitesmoke;
border-top: 1px solid whitesmoke;
}
.body-view{
display: flex;
}
.left-view{
width: 150rpx;
/* background: rebeccapurple; */
}
.right-view{
/* background: red; */
}
/* 头像 */
.user-icon{
/* display: flex; */
width:100rpx;
height: 100rpx;
margin-left: 20rpx;
margin-top: 30rpx;
margin-right: 20rpx;
}
/* 昵称 */
.user-name{
display: flex;
height: 50rpx;
line-height: 50rpx;
font-size: 18px;
color: rgb(88, 103, 138);
margin-top: 30rpx;
margin-left: 10rpx;
}
/* 内容 */
.user-content{
display: flex;
font-size: 18px;
line-height: 50rpx;
margin-left: 10rpx;
}
/* 图片 */
.photo-view{
background: rebeccapurple;
margin-left: 10rpx;
margin-bottom: 20rpx;
}
.photo{
background: rgb(255, 166, 0);
float: left;
margin-right: 10rpx;
margin-top: 10rpx;
}
/* 地理位置 */
.user-address-view{
display: flex;
margin-top: 20rpx;
width: 100%;
}
.user-address-view label{
font-size: 12px;
margin: 10rpx;
}
/* 时间、删除、点赞评论 */
.TDD-view{
width: 100%;
height: 60rpx;
display: flex;
align-items: center;
background: white;
}
.TDD-view label{
font-size: 13px;
margin-left: 10rpx;
}
.TDD-view button{
font-size: 13px;
margin-left: 20rpx;
color: black;
background: white;
}
.TDD-view button::after{
border: white;
}
.TDD-view image{
width: 50rpx;
height: 40rpx;
margin-right: 20rpx;
}
/* 点赞 */
.zan-view {
width: 100%;
background: white;
margin-bottom: 20rpx;
}
.trigon-view{
/* height: 20rpx; */
margin-bottom: -15rpx;
}
.trigon{
display: flex;
width: 40rpx;
height: 20rpx;
margin-top: 10rpx;
margin-left: 10rpx;
}
.zan-bg-view{
display: inline-block;
width: 97%;
background: rgb(235, 235, 235);
margin-right: 20rpx;
margin-bottom: -11rpx;
border-top-left-radius: 7rpx;
border-top-right-radius: 7rpx;
}
.zan-user-view{
display: flex;
float: left;
height: 40rpx;
margin-left: 10rpx;
/* margin-top: 5rpx; */
align-content: center;
}
.zan-user{
font-size: 12px;
line-height: 40rpx;
height: 40rpx;
color: rgb(88, 103, 138);
}
.line{
width: 97%;
height: 1px;
background: white;
}
/* 评论 */
.discuss-view{
background: white;
width: 97%;
}
.discuss{
background: rgb(235, 235, 235);
line-height: 35rpx;
}
.discuss label{
font-size: 12px;
}
.discuss-user{
color: rgb(88, 103, 138);
margin-left: 10rpx;
}
.content{
margin-left: 10rpx;
}
/* 弹出框 */
.pop-up-box{
position: absolute;
height: 60rpx;
border-radius: 10rpx;
right: 90rpx;
background: rgba(0, 0, 0, 0.7)
}
这篇关于微信小程序 仿微信朋友圈的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
微信小程序如何封装接口域名？-icode9专业技术文章分享11-13
-
如何在微信小程序中实现直传功能？-icode9专业技术文章分享11-13
-
如何在小程序的地图组件中添加标记和文字？-icode9专业技术文章分享11-13
-
在微信小程序的地图组件中如何实现自定义标记和气泡？-icode9专业技术文章分享11-13
-
微信小程序教程：零基础入门到实战11-01
-
微信小程序全栈教程：从入门到实践11-01
-
微信小程序怎么实现关注公众号功能-icode9专业技术文章分享10-31
-
微信小程序cover-view，支持bindtap吗-icode9专业技术文章分享10-30
-
微信小程序的cover-image支持bindtap吗-icode9专业技术文章分享10-30
-
微信小程序web-view怎么设置高度？-icode9专业技术文章分享10-30
-
微信小程序中 onLoad和onready哪个先加载-icode9专业技术文章分享10-30
-
小程序 wx.getStorageSync('token')如何清除-icode9专业技术文章分享10-29
-
小程序防止冒泡e.stopPropagation()是什么-icode9专业技术文章分享10-29
-
小程序的点击事件页面如何写-icode9专业技术文章分享10-29
-
微信小程序如何使用echarts的折线图-icode9专业技术文章分享10-25
栏目导航
