效果图:
小图标:
源码:
<!--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;
}
js
// 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_show
this.setData({
tanchuang_show
})
},
})