// components/collapseCommonLine/collpaseCommonLine.js
Component({// 开启插槽功能options: {multipleSlots: true},/*** 组件的属性列表*/properties: {clamp:{// 默认显示行数type:Number,value:1}},/*** 组件的初始数据*/data: {showMore:false,// 是否展开},/*** 组件的方法列表*/methods: {doCollapse:function(event){this.setData({showMore:!this.data.showMore});}}
}){"component": true,"usingComponents": {}
}<view class="collapse-line-body {{showMore?'show-more':''}}" style="-webkit-line-clamp: {{clamp}};" catchtap="doCollapse"><slot name="collapse-line-content"></slot>
</view>/* components/collapseCommonLine/collpaseCommonLine.wxss */.collapse-line-body{display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;
}/** **/
.show-more{display: block;
}
小程序默认展示几个行的文字,然后点击可以将未展示文字全部显示