@@ -4,17 +4,28 @@ Component({
},
properties: {
- item:{
- type:Object,
- value:{}
+ item: {
+ type: Object,
+ value: {}
}
+ data: {
+ ellipsis: true
+ },
+
methods: {
- getPublisherInfo: function(e) {
+ getPublisherInfo: function (e) {
wx.navigateTo({
url: "/pages/publisher/publisher?id=" + e.target.dataset.publisherId
})
+ elli: function () {
+ this.setData({
+ ellipsis: !this.data.ellipsis
+ })
@@ -13,6 +13,8 @@
<text class="primary-text-color detail">查看</text>
</view>
<view class="bottom">
- <view class="title secondary-text-color">{{item.title}}</view>
+ <view class="text secondary-text-color {{ellipsis?'ellipsis':'unellipsis'}}">{{item.title}}</view>
+ <view class="detail primary-text-color" bindtap="elli">{{ellipsis?'展开':'收起'}}</view>
@@ -11,9 +11,20 @@
font-size: 30rpx;
-.title {
+.text {
font-size: 24rpx;
- margin-bottom: 10rpx;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+.ellipsis {
+ -webkit-line-clamp: 2;
+.unellipsis {
+ -webkit-line-clamp: 0;
.top {
@@ -26,9 +37,10 @@
.bottom {
display: flex;
justify-content: space-between;
- align-items: center;
+ align-items: flex-end;
margin: 20rpx 30rpx 0rpx 30rpx;
- padding-bottom: 20rpx;
+ padding-bottom: 25rpx;
.profile {
@@ -36,7 +48,8 @@
.detail {
- width: 100rpx;
text-align: right;
+ white-space: nowrap;
+ margin-left: 40rpx;
@@ -7,7 +7,7 @@ var json = [{
"publisherName": "蓝田文体发展中心",
"publishType": "回复",
// 消息类型
- "title": "是的,只要线上报名就可以了哦,具体内容我们会以短信形式通知~",
+ "title": "是的,只要线上报名就可以了哦,具体内容我们会以短信形式通知~哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼",
{
"id": "2",