小程序超出三行省略并在后面显示展开收起

最新推荐文章于 2024-02-07 10:37:28 发布

huang_jimei

最新推荐文章于 2024-02-07 10:37:28 发布

阅读量747

点赞数 1

分类专栏： css 文章标签：小程序 javascript 开发语言 css

本文链接：https://blog.csdn.net/huang_jimei/article/details/130366381

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、效果图
在这里插入图片描述
二、代码模块
1、js

data:{
    showAme:true,//展开收起状态
    ame:'实习目的实习目的实习目的实习目的实习目的实习目的实习目的实习目的实习目的实习目的实习目的实习目的实习目的实习目的实习目的实习目的',
    ame2:'',//实习目的展示内容
    ameover:false,//实习目的文字是否超出
},
//实习目的
  reasonShows(){
     this.setData({
      showAme:!this.data.showAme
     });
     if(!this.data.showAme){
       this.setData({
         ame2:this.data.ame
       });
     }else{
      this.setData({
        ame2:this.Cutsubstr(this.data.ame,98)
      });
     }
  },
  //超出字符显示省略号，str是字符串内容，len是长度
  Cutsubstr(str, len) {
    if (!str || !len) {
      return '';
    }
    var build = "";
    for (var i = 0; i < str.length && len > 0; i++) {
      build += str.substr(i, 1);
      len -= str.charCodeAt(i) > 127 ? 2 : 1;
    }
    if (build.length < str.length)
      build += "...";
    return build;
  },
  onShow() {
    var fonts=this.data.ame;
    console.log(fonts.length);
    if(fonts.length<50){
      this.setData({
        ame2:fonts,
      })
    }else{
      var fonts2=this.Cutsubstr(fonts,98);
      this.setData({
        ame2:fonts2,
        ameover:true
      })
    }
    
  },

2、xml内容

<view class="reason">
          {{ame2}}
          <view class="btn_con2" wx:if="{{ameover}}">
            <view bindtap="reasonShows">{{showAme?'展开':'收起'}} <image class="sicon" src="{{showAme?'../images/sicon1.png':'../images/sicon2.png'}}" mode=""/> </view>
          </view>
        </view>

3、css

.reason{
  width: 532rpx;
  text-align: justify;
  position: relative;
  word-break: break-all;
}
.btn_con2{
  position: absolute;
  bottom: 0rpx;
  right: 0;
  color: #2FC1C2;
  display: flex;
  align-items: center;
}