微信小程序一定高度文字的展开与收起

1.实现效果

2.实现思路

1.给文字设置相应的行高，假设想展示10行文字，此时设置一个最大高度是10*文字的行高。
2.获取当前文字盒子的整体高度，若大于设置的高度，添加overflow:hidden,height:最大高度；反正不添加样式，不显示箭头。
3.显示展开的箭头提示，当点击展开箭头时，切换图片，并不设置最小高度，文字展开。

3.实现代码

<view class="con"><view class="tips"><view class="{{height>200?'ative':''}} {{!ellipsis?'no_tive':''}}" id="text"><rich-text nodes="{{rule}}"></rich-text></view><view class='img_box' catchtap='ellbtn' wx:if="{{height>200}}"><image class='img_icon' src="{{ellipsis?'../img/open.png':'../img/close.png'}}"></image></view><view wx:if="{{height>200}}" class="drop_shadow"></view></view>
</view>

/* pages/wxCase/exlipTwo/index2.wxss */
.con {background: rgb(241, 225, 225);border-radius: 20rpx;padding: 20rpx;margin: 24rpx 39rpx 0 24rpx;
}.tips {font-size: 26rpx;font-weight: 500;color: #333333;line-height: 40rpx;position: relative;
}.img_box {text-align: center;margin-top: 10rpx;
}.img_icon {width: 45rpx;height: 50rpx;
}.ative {height: 400rpx;overflow: hidden;
}.no_tive {height: auto !important;
}

// pages/wxCase/exlipTwo/index2.js
Page({/*** 页面的初始数据*/data: {ellipsis:true,//默认收起rule: '<p>这是规苏苏苏苏苏苏苏苏苏苏苏则呢呵呵哈哈哈或哈哈哈红红火火恍恍惚惚</p><p>这是规则呢红红火火恍恍惚惚</p><p>这是规则呢红红火火恍恍惚惚</p><p>这是规则呢红红火火恍恍惚惚</p><p>这是规则呢红红火火恍恍惚惚</p><p>这是规则呢红红火火恍恍惚惚</p><p>这是规则呢红红火火恍恍惚惚</p><p>这是规则呢红红火火恍恍惚惚</p><p>这是规则呢红红火火恍恍惚惚</p><p>这是规则呢红红火火恍恍惚惚</p>'},onLoad: function (options) {//创建节点选择器var query = wx.createSelectorQuery();query.select('#text').boundingClientRect();query.exec((res) => {res[0].height;this.setData({height: res[0].height})})},/*** 收起/展开按钮点击事件*/ellbtn: function () {this.setData({ellipsis: !this.data.ellipsis})},})

4.更多代码，关注苏苏的码云

微信小程序一定高度文字的展开与收起相关推荐

微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮针对这个功能,产品的需求如下由于我们项目是教育类产品所以这里这个功能会用在发动态这里,就像微信朋友圈那样,我们叫班级圈. 用户发班级圈时,可以 ...
微信小程序-canvas绘制文字实现自动换行
微信小程序-canvas绘制文字实现自动换行在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为我们只能设置文本的最大宽度,这就产生 ...
微信小程序设置高度占满屏幕
因为有个页面需要改变背景颜色,所以要高度占满. 微信小程序设置高度占满屏幕: /*设置根节点,高度占满整个屏幕 */ page{height: 100%; } /*然后设置子节点高度100%*/ .c ...
微信小程序图片高度固定,width:auto,图片不展示
微信小程序图片高度固定,width:auto,图片不展示解决办法 image标签设置width:auto 设置mode属性mode=heightFix 高度固定,宽度不固定小程序版本 2.10.3 ...
虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序源码
简介: 虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序源码网盘下载地址: http://www.zijiepan5.xyz/hNiChK2xwgy0 图片:
2022虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序源码
简介: 虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序源码网盘下载地址:https://qumaw.lanzoul.com/ioRp700i1fgb
2022年虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序
2022年虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序下载地址:
微信 html 字体自动换行,详解微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvascontext.filltext参数为我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...
swiper高度自适应_微信小程序swiper高度自适应
微信小程序swiper高度自适应的实现方式,首先swiper默认最小高度150,下面请看开发实例. 要求:swiper高度自适应 wxml wxss .swiper image { width: 10 ...

微信小程序一定高度文字的展开与收起

1.实现效果

2.实现思路

3.实现代码

4.更多代码，关注苏苏的码云

微信小程序一定高度文字的展开与收起相关推荐

最新文章

热门文章