評論點贊---收起，展開
阿新 • • 發佈：2018-11-20
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)}
/** * 頁面的初始資料 */ 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)}