微信小程序Text超过一行自动隐藏

一、需求

text内容只能显示一行,超过一行隐藏,并在第一行后显示更多按钮,更多按钮也不能换行显示。

二、效果图

效果图中的 服务区域公司地址 字段为超行自动隐藏字段

  1. 只有一行时
    只有一行时

  2. 多行自动隐藏,显示更多
    多行自动隐藏

  1. 点击更多弹窗查看
    弹窗查看

三、实现

以公司地址为例

  1. text 和 更多按钮 水平排列,默认更多按钮隐藏

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <view class="card-text-overflow-group">
    <text
    class="card-text-overflow"
    <!-- 动态设置最大显示的行数 -->
    style="-webkit-line-clamp: {{addressLines}};"
    id="address">公司地址:{{address}}
    </text>

    <text
    class="look-more"
    hidden="{{addressLookMoreHidden}}"
    bindtap="lookMaroAddress">[更多]
    </text>
    </view>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    .card-text-overflow-group{
    margin-top: 12rpx;
    display: flex;
    }

    .card-text-overflow{
    flex: 1;
    font-size: 32rpx;
    color: #000000;
    /* 定义为自适应布局 */
    display: -webkit-box;
    word-break: break-all;
    text-overflow: clip;
    /* 多出部分隐藏 */
    overflow: hidden;
    /* 竖直方向的超出和隐藏 */
    -webkit-box-orient: vertical;

    }
    .look-more{
    font-size: 32rpx;
    color: #169BD5;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    Page({

    data:{
    //地址内容
    address:'',
    //默认最大显示2行
    addressLines: 2,
    //更多按钮
    addressLookMoreHidden: true,
    }
    })
  2. 动态计算行数,等地址信息请求成功后,渲染成功后计算

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    Page({

    /**
    * 网络请求
    * 生命周期函数--监听页面加载
    */
    onLoad: function (options) {
    wx.request({
    success: res => {
    //动态计算,同 onReady
    }
    })
    },


    /**
    *测试时,可以放在onReady
    * 生命周期函数--监听页面初次渲染完成
    */
    onReady: function () {

    setTimeout(() => {
    const superThis = this

    //查找地址元素
    wx.createSelectorQuery().select('#address')
    .boundingClientRect(function (rect) {

    //获取地址原始高度,一行数据的高度
    const fHeight = rect.height;

    var providerDetailData = 'json数据'
    superThis.setData({ address: providerDetailData["address"] });
    //二次查找
    wx.createSelectorQuery().select('#address')
    .boundingClientRect(function (rect) {
    //重新获取高度
    const lHeight = rect.height;
    //只显示一行
    superThis.setData({
    addressLines: 1,
    });
    //判断高度是否超过
    if (lHeight > fHeight) {
    //超过一行
    superThis.setData({ addressLookMoreHidden: false });
    }

    }).exec()
    }).exec()
    }, 300)
    },

    })
--- 青山不改 绿水长流,日后江湖相见,自当杯酒言欢,咱们就此别过。---

本文标题:微信小程序Text超过一行自动隐藏

文章作者:mecono

发布时间:2019年08月07日 - 11:08

最后更新:2019年12月19日 - 09:12

原始链接:https://mecono.cn/3021535003.html

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-ND 4.0许可协议。转载请注明出处!