微信小程序长文本的收缩展开，封装成组件（拆箱即用）

2022-12-31 08:11:42 前端

微信小程序可以通过监听元素的高度进行文本自适应的展开收起，建议封装成组件，以便使用

效果

先看效果

微信小程序文本收起

微信小程序文本展开

组件的wxml文件

<!--components/adjustableText/adjustableText.wxml-->
<text class="content {{ isShowMore ? 'content-open' : 'overlines-hidden' }}" style="font-size: {{ fontSize }}rpx;color: {{ fontColor }};{{ isShowMore ? '' : '-webkit-line-clamp:' + n + ';' }}" selectable="{{ selectable }}">{{ content }}</text>
<block wx:if="{{ showShowMoreBtn }}">
  <view wx:if="{{ !isShowMore }}" style="margin-top: 20rpx;" class="col center">
    <view class="row center"  bindtap="showMore">
      <view style="font-size: {{ btnFontSize }}rpx;color: {{ btnFontColor }};">展开</view>
      <image src="/assets/icons/arrow/arrow_bottom.png" style="width: 32rpx;height: 32rpx;"></image>
    </view>
  </view>

  <view wx:if="{{ isShowMore }}" style="margin-top: 20rpx;" class="col center">
    <view class="row center"  bindtap="showMore">
      <view style="font-size: {{ btnFontSize }}rpx;color: {{ btnFontColor }};">收起</view>
      <image src="/assets/icons/arrow/arrow_bottom.png" style="width: 32rpx;height: 32rpx;transform: rotate(180deg);"></image>
    </view>
  </view>
</block>

组件的js文件

// components/adjustableText/adjustableText.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    content: String,
    n: {
      type: Number,
      value: 2
    },
    fontSize: {
      type: Number,
      value: 28
    },
    fontColor: {
      type: String,
      value: '#333333'
    },
    btnFontSize: {
      type: Number,
      value: 24
    },
    btnFontColor: {
      type: String,
      value: '#333333'
    },
    selectable: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    isShowMore: true, // 默认展开 以便于判断区域高度
    showShowMoreBtn: false,
  },

  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      this.createSelectorQuery().selectAll(".content").boundingClientRect(res => {
        if (res[0].height > this.properties.n * this.properties.fontSize / 2) {
          this.setData({
            isShowMore: false,
            showShowMoreBtn: true
          })
        }
      }).exec()
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    showMore: function (e) {
      this.setData({
        isShowMore: !this.data.isShowMore
      })
    },
  },

})

组件的wcss文件

.row {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}

.col {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.sb {
  justify-content: space-between;
}

.center {
  align-items: center;
}

/*  */

.content {
  margin-top: 24rpx;
  width: 656rpx;
  line-height: 34rpx;
  color: #BFBFBF;
}

.content-open {
  display: block;
}

.overlines-hidden {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-line-clamp: 2; */
  overflow:hidden;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
}

使用方法

在需要使用的page的.json文件将文件引入

"usingComponents": {
    "adjustable-text": "/components/adjustableText/adjustableText"
  },

在要使用的page中

<adjustable-text content="这是一段测试文本" n="{{ 2 }}" font-size="{{ 28 }}" font-color="#BFBFBF" btn-font-size="{{ 24 }}" btn-font-color="#BFBFBF" selectable="{{ false }}"></adjustable-text>

参数说明：

content: 文本内容
n: 超过n行后收缩，默认2行
font-size: 文本的尺寸，单位rpx，默认28rpx
font-color: 文本的颜色，默认#333333
btn-font-size: 收起展开按钮的文字大小，单位rpx，默认24rpx
btn-font-color: 收起展开按钮的文字颜色，默认#333333
selectable: 是否可以选择文本，用于允许选择复制文本的情形，默认为false

资源文件

组件用到的箭头图片也给大家一起放这了

欢迎小伙伴们在下方评论区留言 ~ O(∩_∩)O
文章对我有帮助, 点此请博主吃包辣条 ~ O(∩_∩)O

AdSense Anaconda Android apache API apt Auth AWS B-tree Bandwagon Blog bower brew bytes Caffe Catalina certbot Charles cloudcone Composer conda CoreML CPU crontab CSS csv Cuda cv2 datetime Digitalocean DNS Docker Docker-Compose Eloquent Excel export Flask FTP GET Git GitHub GitLab Gmail GoDaddy Google GTM hash Homebrew Homestead HTML http HTTPS IDEA image imagemagick imagick imgick import InnoDB ios iou iPhone ISO8601 iTerm2 Java JavaScript JPG JS Keras Laravel Laravel-Admin lazyload Linux list Livewire lnmp load logs Lravel Mac Markdown matplotlib md5 mix MobileNet Mojave mongo MongoDB MySQL Namesilo Nginx Node npm numpy Nvidia Nvidia-Docker onevps OpenCV Openpose openpyxl oss Outline parse PayPal PHP php-fpm PhpStorm PHP扩展 PIL Pillow pip PNG POST Protobuf PyCharm pyenv pymongo Python Python,人工智能,机器学习,VOC,xml Queue Redis requests RGB Sanctum save selenium SEO Shadowsock Shadowsocks ShadowsocksR simplemde Spring Boot SQLServer ssd SSH ssl SSL证书 SSR str Sublime sudo swap Swift Tensorflow TensorflowLite Terminal Terminator timestamp Ubuntu urllib UTC v2ray Valet Validation Validator VienBlog virtualenvs VPN VPS Vultr Web Windows WordPress Xcode xlsx yaml YAPI YUV zip zmq zsh 上网下载图片主从同步云主机云存储云开发云服务器人工智能代码管理优化优惠码伪原创作弊与反作弊免费ss账号免费提现切片前端加密协议博客友链双击事件后台运行后端命令国内镜像源图标图片操作图片转换域名多身份认证大小写转换姿态检测安卓模拟器安装定时任务定时执行密码密钥导出导入小程序码延迟加载异常微信微信小程序快捷方式慢查询懒加载提现搜索引擎搬瓦工搭梯子教程数据库数据重复文件上传无法登录日志日期时区时间时间戳服务器机器学习权限梯子模拟浏览器港版支付宝漏洞爬虫生活服务用户管理病毒登录目标检测科学上网系统升级索引组件组件开发编辑器自动付款自定义组件英文伪原创计划任务计算机视觉订阅通知认证语法读写分离远程仓库远程连接配置文件重定向错误异常错误提示队列阿里云香港香港手机号

亲情非友情链接