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小程序开发
• 前言
• 1.组件代码
• 2.使用

前言

基于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 ({ paddingBottom: !showAll ? 40 : 0 }}>classNames(`textShow-content-text${index || 0}`,"font-26-sm",{"textShow-content-text-less": !showAll})}>{text}{showAll && this.props.children}{showFoldBtn && (() => {this.handleFoldText();}}style={{position: showAll ? "relative" : "absolute"}}>{showAll ? "收起" : "展开"}{!showAll && {">>"}})});}
}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.使用

'12232424141'} index={0}>