样式集（五）微信朋友圈样式模拟

效果图：

小图标：

源码：

<!--pages/findList/findList.wxml-->
<image class="xxiangji" catchtap="xxiangji" src="/images/xxiangji.png"></image>
<image class="top_img" src="/images/settle.jpg"></image>
<view class="userinfo-avatar"><open-data type="userAvatarUrl"></open-data>
</view>
<view class="userNickName"><open-data type="userNickName"></open-data>
</view><view class="centent" wx:for='{{list}}' wx:key=""><view class="item"><image class="head" src="/images/icon-huodao-selected.png"></image><view style="width:90%"><view class="name">陆斌</view><image class="img" mode="widthFix" src="/images/11t.jpg"></image><view class=""><view class="tanchuang" wx:if='{{tanchuang_show}}' animation="{{animationData}}"><view class="p_r" catchtap=""><image class="aixin" mode="widthFix" src="/images/aixin1.png"></image><view>{{a?'取消':'点赞'}}</view></view><view class="p_r" catchtap="up_comment"><image class="pinglun" mode="widthFix" src="/images/pinglun.png"></image><view>评论</view></view></view><image class="comment" catchtap="show_tanchuang" src="/images/pl_icon.jpg"></image><view class="time">14分钟前</view><view class="pl_block"><view class="ax_item"><image class="aixin2" mode="widthFix" src="/images/aixin2.png"></image><view class="ax_name">a_靖</view></view><view class="pl_item"><view class="pl_name">a_靖: <text>高考加油</text></view></view></view></view></view></view>
</view>

wxss

/* pages/findList/findList.wxss */
page{background-color: white;
}
.top_img{width: 100%;height: 480rpx;
}.userinfo-avatar {overflow:hidden;display: block;position: absolute;right: 12rpx;top: 330rpx;width: 130rpx;height: 130rpx;border-radius: 12rpx;margin: 20rpx;margin-top: 50rpx;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}.userNickName {/* color: #fff; */font-size: 32rpx;color: white;border-radius:40%;position: absolute;right: 192rpx;top: 420rpx;
}
.xxiangji{position: fixed;right: 36rpx;top: 36rpx;width: 60rpx;height: 60rpx;z-index: 999;
}
.centent{margin-top: 100rpx;padding-bottom: 30rpx;border-bottom: 1px solid #f2f2f2;
}
.head{width: 90rpx;height: 90rpx;border-radius: 10rpx;margin: 16rpx;
}
.item{display: flex;flex-direction: row;
}
.name{font-size: 32rpx;/* font-weight: 600; */color: #546689;margin-top: 20rpx;
}
.img{width:220rpx;margin-top: 20rpx;border-radius: 4rpx;
}
.time{font-size: 26rpx;color: #999;margin-top: 30rpx;margin-bottom: 20rpx;
}
.comment{background-color: #F7F8F8;color: #546689;font-size: 60rpx;border-radius: 8rpx;width: 70rpx;height: 40rpx;position: absolute;right: 30rpx;line-height: 35rpx;text-align: center;
}
.tanchuang{display: flex;flex-direction: row;background-color: #484848;border-radius: 8rpx;position: absolute;right: 112rpx;line-height: 80rpx;height: 80rpx;margin-top: -20rpx;color: white;width: 360rpx;font-size: 28rpx;
}
.aixin{width: 42rpx;margin-top: 20rpx;margin-left: 40rpx;margin-right: 10rpx;
}
.pinglun{width: 42rpx;margin-top: 20rpx;margin-left: 70rpx;margin-right: 10rpx;}
.aixin2{width: 32rpx;margin-top: 20rpx;margin-left: 40rpx;margin-right: 10rpx;
}
.ax_item{border-bottom: 1px solid #f2f2f2;display: flex;   flex-wrap:wrap
}
.ax_name{height: 70rpx;line-height: 70rpx;
}
.pl_block{background-color: #F7F7F7;border-radius: 8rpx;width: 95%;margin-top: 30rpx;color: #546689;
}
.pl_item{display: flex;   flex-wrap:wrap
}
.pl_name{height: 70rpx;line-height: 70rpx;margin-left: 40rpx;margin-right: 10rpx;
}
.pl_name text{color: black;
}

// pages/findList/findList.js
Page({/*** 页面的初始数据*/data: {tanchuang_show:false,list:[1,1,1],},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},xxiangji(){wx.showActionSheet({itemList: ['发布图文', '发布视频'],success (res) {console.log(res.tapIndex)if(res.tapIndex==0){}else{}},fail (res) {console.log(res.errMsg)}})},show_tanchuang(){var tanchuang_show=!this.data.tanchuang_showthis.setData({tanchuang_show})},
})

样式集（五）微信朋友圈样式模拟相关推荐

修改源码自定义SwipeRefreshLayout样式——高仿微信朋友圈下拉刷新
上一篇文章里把SwipeRefreshLayout的原理简单过了一下,大致了解了其工作原理,不熟悉的可以去看一下:http://blog.csdn.net/u011443509/article/det ...
京东回应「被薅 7000 万、项目组全体开除」；微信朋友圈屏蔽支付宝集五福；MySQL 8.0.19 发布 | 极客头条...
整理 | 屠敏快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注 ...
1月14日科技资讯|京东回应「被薅 7000 万、项目组全体开除」；微信朋友圈屏蔽支付宝集五福；MySQL 8.0.19 发布
「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧.扫描上方二维码进入 CSDN App 可以收听御姐萌妹 Sty ...
后台模拟页面登陆_微信直播小程序后台，微信朋友圈可直达小程序直播了
独家了解到,微信广告正在测试直播模式,可以帮助商家将直播小程序置于多个广告流量级别,如朋友圈,公众账号和小程序. 这也意味着微信生态系统中的商家不仅可以通过小节目现场直播来运营私有域流量,而且可以利用 ...
【Python】基于 Flask 框架，模拟微信朋友圈的服务端
[Python]基于 Flask 框架,模拟微信朋友圈的服务端一.目的:模拟微信朋友圈的服务端,需要满足以下场景: 1.发表内容时带上图片信息,内容包括(具体内容和id,id指定全局唯一标识),客户 ...
czh的开发笔记 - 微信朋友圈 - 模拟操作
czh的开发笔记 - 微信朋友圈 - 模拟操作这个爬虫效率极其低下,仅供学习参考使用朋友圈爬虫简介防喷个人要求环境配置(准备) 环境配置(安装) 工作原理源码自提源码展示与讲解后记这 ...
html微信朋友圈demo,Vue.js实现模拟微信朋友圈开发demo
我用Vue.js实现微信朋友圈的一些功能,实现展示朋友圈,评论,点赞. 先构造一个vue的实例,对会更改的数据进行双向绑定, 我用JSON伪造模版数据,先实现显示朋友圈的效果,使用v-for方法去循环 ...
mui教程2——窗口管理、调用相册、调用摄像头、调用重力感应、微信朋友圈界面（仿制）分析
一.窗口管理 1,页面初始化在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady()方法,涉及到HTML5 ...
微信朋友圈 html 字体颜色,微信朋友圈怎么发文字，朋友圈字体颜色可以改吗？...
1大片资源平台.先不要急着进入微信,先打开手机当中的应用商店,在搜索框中输入[炫字体],如下图所示. 2.输入后点击搜索按钮,点击第一个炫酷字体,然后点击下方下载安装图标红娘网7651.这样,炫酷字体 ...

样式集（五）微信朋友圈样式模拟

样式集（五）微信朋友圈样式模拟相关推荐

最新文章

热门文章