微信小程序中文本过长->实现折叠与展开效果

在实际的开发中,疑或是页面的预览中,或多或少都碰到过这样的情景,那就是文本的折叠与展开!近期在做一个小程序项目，也遇到此情况，就将此顺便总结下来~

一、先上效果

接下来剖析与实现

二、思路

什么时候需要隐藏？如何隐藏？

即如何判断文本过长，以前的web中，我们一般直观的做法是通过行数与给定的某值进行对比，然后通过操作DOM来实现。但小程序中没有DOM，js不能访问文本行数或组件高度。行高不行，那别的办法呢？通过文本字符数来实现，可是这个界定不好把控->受字体大小，一行字体的数量等等。

所以，通过各种对比与分析，我们采用-webkit-line-clamp属性来显示几行实现，该属性的使用还必须有几个重要的属性作为辅助，见wxss代码中的重要属性，

源码：

wxml:

<!--标题  -->
      <view class="title">华山</view>

      <!--文本描述  -->
      <view class="conts {{isFolded?'hide':'show'}}">
          <text>一、华山（Mount Hua），古称“西岳”，雅称“太华山”，为中国著名的五岳之一，中华文明的发祥地，“中华”和“华夏”之“华”，就源于华山 。位于陕西省渭南市华阴市，在省会西安以东120千米处。南接秦岭，北瞰黄渭，自古以来就有“奇险天下第一山”的说法。华山是第一批国家重点风景名胜区，国家AAAAA级旅游景区，全国重点文物保护单位\n</text>
          <text>二、华山是中华民族的圣山。中华之“华”，源于华山，由此，华山有了“华夏之根”之称。这一成果首先被孙中山所引用，创立“中华民国”。据清代国学大师章太炎和历代专家学者考证：华夏民族最初形成并居住于“华山之周”，名其国土曰华，其后人迹所至，遍及九州，华之名始广。</text>
      </view>
      
      <!--切换 -->
      <view bindtap="change" class="state">{{isFolded?'展开':'收起'}}</view>  
      

      

wxss:

page{
  width: 750rpx;
  height: auto;
  color: #fff;
}

/*标题  */
.title{
  height: 100rpx;
  line-height: 100rpx;
  font-size: 42rpx;
  font-weight: bold;
  color: red;
  background-color: green;
}

/*文本描述  */
.conts{
  font-size: 28rpx;
  line-height:50rpx;
  background-color: grey;
  
  /*关键属性（必须有的）  */
  display: -webkit-box; 
  /*规定子元素的排列方向 */
  -webkit-box-orient: vertical; 
   /*限制文本显示的行数  */
  -webkit-line-clamp:4;
  /*实现多余的文字隐藏并用省略号来代表被隐藏的文字  */
  overflow: hidden;
  text-overflow:ellipsis;
}

/*切换  */  
 .state{
  color: cyan;
  float: right;
  font-size: 30rpx;
  margin: 30rpx;
}
 

js:

Page({
  data: {
    isFolded: true,
  },
  change: function (e) {
    this.setData({
      isFolded: !this.data.isFolded,
    })
  }
  })

以上是“字体”切换，如果你想弄成“图标”的样子，可以将！

<view bindtap="change" class="state">{{isFolded?'展开':'收起'}}</view>  

替换成！

 <image src=" {{isFolded?'../../images/home-like.png':'../../images/home-like.png'}}" bindtap="change" class="state"></image> 

即可~

注意：被折叠的文字只能是行内元素，行内块状元素与块状元素不行，

line-clamp

属性只会计算inline元素的行数！