微信公众号开发
微信小程序 仿微信朋友圈
本文主要是介绍微信小程序 仿微信朋友圈，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
<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)
}
这篇关于微信小程序 仿微信朋友圈的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
微信小程序开发入门指南12-20
-
小程序 createCameraContext() 怎么实现识别条形码功能？-icode9专业技术文章分享12-20
-
微信小程序的接口信息py可以抓到吗？-icode9专业技术文章分享11-22
-
怎样解析出微信小程序二维码带的参数？-icode9专业技术文章分享11-22
-
微信小程序二维码怎样解析成链接？-icode9专业技术文章分享11-22
-
微信小程序接口地址的域名需要怎么设置？-icode9专业技术文章分享11-22
-
微信小程序的业务域名有什么作用-icode9专业技术文章分享11-22
-
微信小程序 image有类似html5的onload吗？-icode9专业技术文章分享11-22
-
微信小程序中怎么实现文本内容超出行数后显示省略号？-icode9专业技术文章分享11-22
-
微信小程序怎么实现分享样式定制和图片定制功能？-icode9专业技术文章分享11-22
-
微信小程序全栈教程：从零开始的全攻略11-20
-
微信小程序全栈学习：从零开始的完整指南11-19
-
微信小程序如何封装接口域名？-icode9专业技术文章分享11-13
-
如何在微信小程序中实现直传功能？-icode9专业技术文章分享11-13
-
如何在小程序的地图组件中添加标记和文字？-icode9专业技术文章分享11-13
栏目导航
