wxml
<!-- 评论区域 -->
<view class='userCommentList'>
<view class='AlluserComment'>评论（{{newDetailText.length}}）</view>
<view class='userCommentList-all' wx:for='{{newDetailText}}' data-index='{{index}}'>
<!-- 左头像 -->
<view class='userImg'>
<image src='{{item.user.wxImage}}'></image>
</view>
<!-- 右内容 -->
<view class='right'>
<view class='userText'>
<!-- top -->
<view class='userName'>{{item.user.wxName}}</view>
<view class='userText-top' bindtap='iconUserColler' data-collerIndex='{{index}}'>
<image src='{{item.userComment.praise==true?"/images/newDetail/icon_zan1.png":imgUrls[0].url}}'></image>
<text> {{item.userComment.praiseNum}}</text>
</view>
</view>
<!-- 评论内容 -->
<view class='userCommentText'>
<view class='userCommentText {{isShow?"hide":"show"}}'>{{item.userComment.content}}</view>
<view class='userCommentTime'>{{item.userComment.createTime}}</view>
<!-- <view class='textOpen' bindtap='showText'> {{isShow?"展开":"收起"}} </view> -->
</view>
<!-- 评论内容 -->
<!-- <view class='userCommenMore' bindtap='lookMore' >
<view>查看全部回复</view>
<image src='/images/search/icon_select.png' animation="{{animationData}}"></image>
</view> -->
<!-- <view class='MoreList' wx:if='{{!isLookMore}}'>
<view class='textlist'>
<image src='/images/index/icon_shouy_wode.png'></image>
<view>
<view>回复人昵称</view>
<view>回复内容</view>
</view>
</view>
</view> -->
</view>
</view>
</view>
js
// pages/newDetail/newDetail.js
const app = getApp()
var myHttps = require('../../utils/util.js'); //自己封装的JS
Page({
/**
* 页面的初始数据
*/
data: {
imgUrls: [
{ "url": "/images/newDetail/icon_zan0.png", "name": "点赞", "color": "rgb(136, 136, 136)" },
{ "url": "/images/newDetail/icon_fx.png", "name": "分享", "color": "rgb(136, 136, 136)" }
],
textShow:true,
isShow:true, //评论隐藏
isLookMore:true, //查看更多评论
animationData: {}, //右边箭头 动画
scrollTop: '0',
scrollY: '',
textPraise:false,
},
//滚动监听
scroll: function (e) {
// console.log(e)
var that = this;
that.setData({
scrollY: e.detail.scrollTop,
})
},
// 锚点跳转 1580
topScroll(){
var that = this;
that.setData({
scrollTop: 1580,
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({ options: options, height: app.globalData.systemInfo.windowHeight,})
myHttps.showLoading('拼命加载中...')
},
showText(){
this.setData({isShow:!this.data.isShow})
},
//查看更多评论
lookMore(){
//创建动画
var animation = wx.createAnimation({
timingFunction: "ease"
})
this.animation = animation;
if (!this.data.isLookMore) {
animation.rotate(0).step();
this.setData({
isLookMore: !this.data.isLookMore,
animationData: animation.export()
})
} else {
animation.rotate(180).step();
this.setData({
isLookMore: !this.data.isLookMore,
animationData: animation.export()
})
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.animation = wx.createAnimation()
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage:function(){
return {
title: this.data.newDetail.title,
path: '/pages/newDetail/newDetail?id=' + this.data.newDetail.id + '&columnId=' + this.data.newDetail.columnId,
imageUrl: this.data.newDetail.img,
success: (res) => {
console.log("转发成功", res);
},
fail: (res) => {
console.log("转发失败", res);
}
}
}
})
wxss
/* pages/newDetail/newDetail.wxss */
page{
overflow-x: hidden;
font-weight: 600;
}
.topColler{
width: 60rpx;
height: 60rpx;
border-radius: 50%;
background: rgba(0, 0, 0, 0.384);
position: absolute;
top: 10rpx;
right: 10rpx;
}
.topColler image{
width: 35rpx;
height: 35rpx;
margin:22% 22%;
}
.topTextColler{
width: 60rpx;
height: 60rpx;
border-radius: 50%;
background: rgba(0, 0, 0, 0.384);
position: absolute;
top: 80rpx;
right: 10rpx;
}
.topTextColler image{
width: 35rpx;
height: 35rpx;
margin:22% 22%;
}
.userCommentTime{
font-size: 25rpx;
}
.createTime_img{
margin-top: 5%;
}
.newDetail{
width: 88%;
display: flex;
flex-direction: column;
padding: 30rpx 30rpx 115rpx 48rpx;
font-size: 30rpx;
}
.userInfo{
width: 100%;
height: 150rpx;
background: rgba(0, 0, 0, 0.384);
position: relative;
top: -155rpx;
display: inline-flex;
flex-direction: row;
color: #fff;
}
.userTop{
width:100%;
height: 390rpx;
}
.userInfo image{
width: 100rpx;
height: 100rpx;
margin: 30rpx ;
border-radius: 50%;
box-shadow:0px 0px 0px 2px #fff;
}
.Topname{
height: 50%;
line-height: 130rpx;
}
.address{
height: 50%;
line-height: 40rpx;
}
.userDetail{
width:70%;
display: inline-flex;
flex-direction: column;
font-size: 25rpx;
}
button::after {
border: none;
}
button{
background: #fff;
}
.newDetail_image{
width: 100%;
height: 390rpx;
}
.image{
width: 100%;
padding: 20rpx 0 0 0;
}
.forList{
width: 100%;
padding-bottom: 78rpx;
padding-left:0rpx;
padding-right: 0rpx;
}
.title{
padding-bottom: 0;
}
.createTime{
padding-bottom: 0;
}
.createTime image{
width: 35rpx;
height: 35rpx;
}
.createTime view{
height: 35rpx;
margin-left: 15rpx;
line-height: 35rpx;
color: #000;
}
.contents{
padding: 0;
width: 100%;
line-height: 55rpx;
color: #888888;
font-weight: 500;
}
.introduce{
padding-bottom: 0;
padding: 0 0 0 0;
width: 100%;
color: #888888;
font-weight: 500;
line-height: 55rpx;
}
.praise{
padding-bottom: 0;
}
.remarks{
padding-bottom: 0;
}
/**
*userCommentList 用户评论
*/
.AlluserComment{
padding-bottom:10rpx;
border-bottom:2rpx solid rgba(204, 204, 204, 0.404);
}
.userCommentList{
padding: 0 0 105rpx 0;
width: 104%;
}
.userCommentList-all{
width: 100%;
height: 90%;
display: inline-flex;
flex-direction: row;
padding-top: 20rpx;
}
.userImg{
width: 100rpx;
height: 100%;
background: #fff;
}
.userImg image{
width: 84rpx;
height: 84rpx;
border-radius: 50%;
}
.right{
width: 75%;
display: inline-flex;
flex-direction: column;
}
.userText{
width: 100%;
height: 50rpx;
display: inline-flex;
flex-direction: row;
white-space: nowrap;
line-height: 50rpx;
justify-content: space-between;
}
.userName{
width: 50%;
height: 100%;
font-size: 600;
}
.userText-top{
width: 20%;
height: 100%;
display: inline-flex;
flex-direction: row;
justify-content: space-around;
}
.userText-top text{
width: 70%;
font-size: 25rpx;
color: #000;
line-height: 51rpx;
text-align: left;
margin-left: 2%;
}
.userText-top image{
width: 42rpx;
height: 42rpx;
}
.userCommentText{
color: #888888;
}
.userCommentText view{
line-height: 45rpx;
display: -webkit-box;/*关键属性*/
word-break: break-all;
}
.hide{
display: -webkit-box;
-webkit-box-orient: vertical;/* 关键属性 */
-webkit-line-clamp:1;/* 关键属性 */
text-overflow:ellipsis;/* 超出内容显示省略号*/
overflow: hidden;/* 关键属性 */
}
.show{
display: block;
overflow: visible;
}
.textOpen{
color: blueviolet;
font-size: 25rpx;
background: #fff;
width: 100rpx;
text-align: center;
}
.userCommenMore{
background: #e0e0e0;
display: -webkit-box;
}
.userCommenMore view{
width: 50%;
text-align: center;
line-height:45rpx;
}
.userCommenMore image{
width: 40rpx;
height: 40rpx;
}
.MoreList{
width: 100%;
margin-top: 10rpx;
}
.textlist{
height: 50rpx;
display: inline-flex;
flex-direction: row;
}
.textQQ{
position: relative;
top:0;
left:0;
background: red;
height: 20rpx;
border-radius: 40rpx;
}
.textlist image{
width: 40rpx;
height: 40rpx;
border-radius: 50%;
}
/* 底部操作 */
.btmTabbar_iconInput{
width: 460rpx;
height: 60rpx;
padding: 0% 4%;
margin-left: 48rpx;
align-content: center;
margin-top: 19rpx;
background: #ccc;
border-radius: 15rpx;
display: inline-flex;
flex-direction: row;
white-space: nowrap;
}
.btmTabbar_iconInput image{
width: 30rpx;
height: 35rpx;
/* margin: 3% 3%; */
margin-top: 10rpx;
margin-right: 10rpx;
}
.btmTabbar_iconInput input{
width:85%;
height: 21px;
font-size: 25rpx;
margin: 1% 1%;
line-height: 21rpx;
}
.btnInput{
color: #888888;
line-height: 45rpx;
}
.btmTabbar_iconInput button{
width: 20%;
height: 21px;
font-size: 25rpx;
padding: 0;
margin: 2.5% 0;
line-height:21px;
background: #e0e0e0;
color: #fff
}
.btmTabbar_icon_input{
width: 70%;
height: 100%;
margin-left: 0rpx;
display: inline-flex;
margin-right: 10rpx;
justify-content: space-around;
}
.title{
display: inline-flex;
flex-direction: row;
justify-content: start;
text-align: left;
padding: 50rpx 0;
width: 100%;
}
.name{
width: 100%;
line-height: 60rpx;
font-size: 48rpx;
font-weight: 600;
text-align: left;
}
.createTime{
width: 19%;
font-size: 24rpx;
color: #e0e0e0;
padding: 0;
display: inline-flex;
flex-direction: row;
margin-right: 20rpx;
}
/* 底部部导航栏 */
.btmTabbar{
width: 100%;
height: 98rpx;
background: #fff;
line-height: 98rpx;
display: inline-flex;
flex-direction: row;
/* justify-content: space-around; */
font-size: 25rpx;
position: fixed;
bottom: 0;
box-shadow: 0rpx 0rpx 20rpx #888888;
}
.btmTabbar_icon{
width: 46rpx;
height: 100%;
text-align: center;
margin: 0 31rpx;
}
.btmTabbar_iconCss{
width: 100%;
height: 200rpx;
display: flex;
font-size: 25rpx;
color: none;
border: none;
background: #fff;
margin: 0;
padding: 0;
flex-direction: column;
}
.btmTabbar_iconCss image{
width: 46rpx;
height: 46rpx;
margin-top: 25rpx
}
.btmTabbar_iconCss text{
width: 100%;
height: 26rpx;
line-height: 26rpx;
color: #fff;
font-size: 15rpx;
position:relative;
top:-56rpx;
left:14rpx;
background:#EB5D31;
border-radius:40rpx;
}
.btmTabbar_iconCss:active{color: rgb(255, 135, 0)}