一.wxml文件

<!-- 實(shí)現(xiàn)文本展開與收起功能組件 -->
<view class="loadmore">
  <view>
    <text class="title">{{title}}</text>
  </view>
  <view class="info">
    <text class="show_info {{isshow?'clamp':''}}">{{info}}</text>
    <text class="hide_info">{{info}}</text>
    <view style="padding: 0 0 5px 0;"></view>
    <view class="{{effect=='1'?'add_btn':'add_btn2'}}" wx:if="{{showBtn}}">
      <view wx:if="{{isshow}}" class="{{effect=='1'?'':'btn'}}" bindtap="showInfo">
        <text>展開 </text>
        <van-icon name="arrow-down" />
      </view>
      <view wx:if="{{!isshow}}" class="{{effect=='1'?'':'btn'}}" bindtap="hideInfo">
        <text>收起 </text> 
        <van-icon name="arrow-up" />
      </view>
    </view>
    <!-- borders -->
    <view style="border-bottom: 1px dashed lightgray;padding: 1px 0;"></view>
  </view>
</view>

二.css

/* components/loadmore/loadmore.wxss */
.loadmore {
 padding: 8px 25px 0px 25px;
}

.title {
 font-size: 16px;
 padding-left: 3px;
}

.info {
 position: relative;
 margin-top: 5px;
 font-size: 14px;
 color: #434344;
}

.show_info {
 width: 100%;
 line-height: 1.4rem;
}

.clamp {
 overflow: hidden;
 display: -webkit-box;
 text-overflow: ellipsis;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 word-break: break-all;
}

.hide_info {
 display: -webkit-box;
 position: absolute;
 width: 100%;
 left: -100vw;
 overflow: hidden;
 line-height: 1.4rem;
}

.add_btn {
 color: #4EB8ED;
 display: flex;
 justify-content: flex-end;
 padding-bottom: 5px;
}

.add_btn2 {
 color: #4EB8ED;
 display: flex;
 justify-content: flex-end;
 padding-bottom: 5px;
 margin-top: -25px;
}

.btn {
 width: 60px;
 text-align: center;
 background: linear-gradient(to right,transparent,rgba(255,255,255,0.9),#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff);
}

三.js文件

// components/loadmore/loadmore.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    title: {
      type: String,
      value: ""
    },
    info:{
      type:String,
      value:"",
    },
    effect:{
      type:String,
      value:"1"
    }
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
      isshow:true,
      showBtn:false,  //是否展示底部  展開和隱藏按鈕
  },
  lifetimes: {
    attached: function() {
      // 在組件實(shí)例進(jìn)入頁面節(jié)點(diǎn)樹時(shí)執(zhí)行
      this.judgeBtn();
    },
  },
  /**
   * 組件的方法列表
   */
  methods: {
    //判斷按鈕是否展示
    judgeBtn(){
      const query = wx.createSelectorQuery().in(this);
      query.selectAll(".show_info,.hide_info").boundingClientRect(res => {
        this.setData({
          showBtn: res[0].height < res[1].height
        })
      }).exec()
    },
    //展示全部信息
    showInfo(){
      this.setData({isshow:false})
    },
    //隱藏信息
    hideInfo(){
      this.setData({isshow:true})
    }
  }
})

四.引用

  <v-loadmore title="擅長方向" info="{{scfx}}" effect="2"></v-loadmore>

5.效果圖（effect:樣式類型）

image.png

image.png

image.png