【Taro开发】-文字展开收起组件（十五）

Taro小程序开发

系列文章的所有文章的目录

【Taro开发】-初始化项目（一）

【Taro开发】-路由传参及页面事件调用（二）

【Taro开发】-taro-ui（三）

【Taro开发】-带token网络请求封装（四）

【Taro开发】-自定义导航栏NavBar（五）

【Taro开发】-formData图片上传组件（六）

【Taro开发】-封装Form表单组件和表单检验（七）

【Taro开发】-tabs标签页及子组件的下拉刷新（八）

【Taro开发】-简易的checkBoxGroup组件（九）

【Taro开发】-页面生成二维码及保存到本地（十）

【Taro开发】-宣传海报，实现canvas实现圆角画布/图片拼接二维码并保存（十一）

【Taro开发】-分享给好友/朋友圈（十二）

【Taro开发】-小程序自动打包上传并生成预览二维码（十三）

【Taro开发】-全局自定义导航栏适配消息通知框位置及其他问题（十四）

【Taro开发】-文字展开收起组件（十五）

---

---

前言

基于Taro的微信小程序开发，主要组件库为Taro-ui
实现多行文字时可展开收起

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.组件代码

import Taro from "@tarojs/taro";
import { Component } from "react";
import { Text, View } from "@tarojs/components";
import classNames from "classnames";
import "./index.scss";
import { getSystemInfo, stylePerInJs } from "@/utils/util";

let globalSystemInfo = getSystemInfo();
class TextShow extends Component {
  constructor() {
    super();
    this.state = {
      showAll: true,
      showFoldBtn: false
    };
  }

  componentDidMount() {
    this.props.text && this.handleTextHight();
  }

  handleTextHight = () => {
    Taro.createSelectorQuery()
      .select(`.textShow-content-text${this.props.index || 0}`)
      .boundingClientRect()
      .exec(res => {
        if (!res[0])
          setTimeout(() => {
            this.handleTextHight();
          }, 500);
        else {
          let height = res[0].height;
          if (parseInt(height / (globalSystemInfo.screenWidth / 750)) > 150) {
            this.setState({
              showAll: false,
              showFoldBtn: true
            });
          }
        }
      });
  };

  handleFoldText = () => {
    this.setState({
      showAll: !this.state.showAll
    });
  };

  render() {
    const { showAll, showFoldBtn } = this.state;
    const { text, index } = this.props;
    return (
      <View className="textShow" style={{ paddingBottom: !showAll ? 40 : 0 }}>
        <Text
          className={classNames(
            `textShow-content-text${index || 0}`,
            "font-26-sm",
            {
              "textShow-content-text-less": !showAll
            }
          )}
        >
          {text}
        </Text>
        {showAll && this.props.children}
        {showFoldBtn && (
          <View
            className="operate-text-btn"
            onClick={() => {
              this.handleFoldText();
            }}
            style={{
              position: showAll ? "relative" : "absolute"
            }}
          >
            {showAll ? "收起" : "展开"}
            {!showAll && <View className="down">{">>"}</View>}
          </View>
        )}
      </View>
    );
  }
}

export default TextShow;

@import '@/styles/variables.scss';
.textShow{
  position: relative;
  .textShow-content-text-less {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal !important;
    -webkit-line-clamp: 4; 
    /*! autoprefixer: ignore next */
    -webkit-box-orient: vertical;
  }

  .operate-text-btn {
    font-size: $font-size-lg;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: $color-white;
    opacity: 0.6;
    position: absolute;
    width: 100%;
    bottom: 10px;
  }

  .down{
    transform: rotate(90deg);
    width: 40px;
  }

}

2.使用

<TextShow text={'12232424141'} index={0}>
  <View>
    <Image
      src=" https://img1.baidu.com/it/u=3820760661,13510362&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=467"
      className="plot-listItem-img"
    />
  </View>
</TextShow>