taro微信小程序简单实现文本展开收起

最新推荐文章于 2024-11-05 14:28:40 发布

原创

最新推荐文章于 2024-11-05 14:28:40 发布 · 695 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#taro

该文章展示了一个使用Taro框架编写的LineEllipsis组件，该组件用于处理文本溢出时的显示，支持点击展开和收起。文章通过组件的状态管理和生命周期方法实现了文字的动态显示，当文字高度超过设定阈值时，显示展开按钮。

import Taro from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import { ITouchEvent } from '@tarojs/components/types/common';
import _ from 'lodash';
import './index.scss';

interface ILineEllipsis {
  text: string;
}

class LineEllipsis extends Taro.Component<ILineEllipsis> {
  disabled = false;

  state = {
    isExpansioned: false,
    overflow: false
  };

  init = () => {
    Taro.nextTick(() => {
      const query = Taro.createSelectorQuery().in(this.$scope);
      query.select(`#text`).boundingClientRect();
      query.exec(rect => {
        const height = _.get(rect, '0.height', 0);
        this.disabled = !(height > 30);
        t