微信小程序，文字展开、收起组件

河里抓鲨鱼

已于 2022-04-05 15:33:07 修改

阅读量990

点赞数 2

文章标签：微信小程序

于 2022-04-05 15:08:52 首次发布

本文链接：https://blog.csdn.net/weixin_47915506/article/details/123969763

版权

// 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;
}

小程序默认展示几个行的文字，然后点击可以将未展示文字全部显示