公告列表
公告列表
收藏
回答

怎么让文字总是显示最后的，前面的隐藏

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 需求 text 工具 6.7.2 2.25

- 需求的场景描述（希望解决的问题）

我有一个只显示一行的text组件，然后里面的文字会通过点击事件不停的增加，当文字内容超出这一行后，后面的会被隐藏，然后点击增加文字没有可见的反应，因为后面的文字被不断隐藏，前面的保持不变。现在我希望，当文字内容超出一行后，文字整体会忘左移动，显示最后面的，超出的前面部分被隐藏，求解

- 希望提供的能力


回答关注问题邀请回答
收藏

5 个回答

  • 忠于你°
    忠于你°
    2018-12-11
    <view style='position:relative;'>
            <scroll-view scroll-x="true" class="nav" scroll-into-view="{{moveFlag}}">
                <view class="nav_1 " bindtap='batch' data-type="backTel" hover-class='click-hov'>通讯录</view>
                <block wx:for="{{titles}}" wx:key="item">
                    <view class="n_ico iconfont icon-you "></view>
                    <view class="nav_1" bindtap='lookDpt' data-type="tit" data-index="{{index}}" hover-class='click-hov'>{{item}}</view>
                </block>
                <view class="nav_1 bumen" id="myDpt"> </view>
            </scroll-view>
        </view>
    nav {
    width:750rpx;
    height:115rpx;
    line-height:115rpx;
    box-sizing:border-box;
    padding:0 23rpx;
    background-color:#fff;
    white-space:nowrap;



    添加的时候更改scroll-into-view的值了,给最后一个元素的id对应就行了

    2018-12-11
    有用
    回复
  • ?.
    ?.
    2018-12-10
    <div class="test-box">
      <div class="test">{{testStr}}</div>
    </div>
    <button @click="addTest">添加文字</button>

    JS

    testNum: 0,
    testStr: '还记得防火防盗发的话'

    addTest() {
      let arr = ['我', '你', '他', '她']
      this.testStr = this.testStr + arr[this.testNum]
      this.testNum++
      if (+this.testNum > 3) {
        this.testNum = 0
      }
    },

    CSS

    .test-box
      height: 20px
      position: relative
      .test
        line-height: 20px
        position: absolute
        right: 0
        top: 0
        white-space: nowrap

    试试看

    2018-12-10
    有用
    回复 2
    • 箫
      箫
      2018-12-10

      还能让tsetStr滑动不？就是当有文字溢出后，可以滑到前面去，然后继续添加文字时，依然显示最后面，这样可以怎么实现呢

      2018-12-10
      赞
      回复
    • ?.
      ?.
      2018-12-10回复箫

      这个就不能这样写了，小程序的话你这个外面的盒子就应该是scroll-view了，然后增加文字后你要动态计算包裹文字的盒子宽度，再移动scroll-view的scroll-left，这样的话就能滑动也能实现你想要的尾部对齐的需求

      2018-12-10
      赞
      回复
  • 冉娃娃
    冉娃娃
    2018-12-10

    ### 问题解决

    wxss

    ```

    .test {
      position: absolute;
      right: 0;
      white-space: nowrap;
    }

    ```

    wxml

    ```

    <text bindtap="add" class="test">
      {{test}}
    </text>

    ```

    js

    ```

    add() {
      this.test += ['+1', '+22', '+333'][Math.ceil(Math.random() * 2)];
    },

    ```

    ### 解决思路

    - 设置`text`居右对齐 -> 增加文字时多的文字就会向前靠

    - 设置`text`绝对定位 -> 元素变宽后,会向左边延伸

    ### 建议

    - 这只是一个业务问题

    - 自己理一下思路,找到问题点,搜索一下即可.

    - 怀疑你自己去google过没有

    - 下面是我用你的问题google.第一条结果就可以解决你的问题.



    先看看这篇提问之前应该做的事情吧


    没有做到这四点,请不要提问

    https://developers.weixin.qq.com/community/develop/doc/0002060d8f84302c56c71efca51c04


    2018-12-10
    有用
    回复 2
    • 冉娃娃
      冉娃娃
      2018-12-10

      ---------------- 照例分割线  --------------------

      为什么社区不支持md?????

      2018-12-10
      赞
      回复
    • 箫
      箫
      2018-12-10

      您要是觉得我没百度什么的，您可以选择不回答，还是说每个问问题的您都要去嘲讽一般，以此显示您的优越？

      2018-12-10
      赞
      回复
  • Code Weaver
    Code Weaver
    2018-12-10

    使用scroll-view里面包裹text试试？ 顶部文案点击后会左右滑动。有空可以写个代码片段。


    2018-12-10
    有用
    回复 1
    • 箫
      箫
      2018-12-10

      每次点击，我都设置滚动值为文字长度*100，然后还是达不到效果呀

      2018-12-10
      赞
      回复
  • 箫
    箫
    2018-12-10

    求大神帮忙呀！

    2018-12-10
    有用
    回复 1
    • 坏人小白的💧
      坏人小白的💧
      2018-12-11

      WXS

      利用这个写一个页面js逻辑，就是你把要显示的从 ‘我想显示最后5个字符’；

      let a = '我想显示最后5个字符'

      <wxs module='m1'></wxs> 具体用法参照文档

      <text>{{m1.showRightText(a)}}</text>

      wxs：

          showRightText(a) {         return a.slice(-5); }

      这样只会显示最后5个数据，



      2018-12-11
      赞
      回复
请 登录 后发表内容
相关问题
相关文档