小程序中实现打字效果（类GPT吐字效果）（下）

最新推荐文章于 2025-06-01 13:35:48 发布

心情无变化

最新推荐文章于 2025-06-01 13:35:48 发布

阅读量778

点赞数 5

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序前端 javascript 微信小程序

本文链接：https://blog.youkuaiyun.com/qq_45290368/article/details/143485444

小程序专栏收录该内容

23 篇文章

订阅专栏

在小程序中实现打字效果（类GPT吐字效果）（上）基础上结合scroll-view实现看到的内容为最新输出的内容。提供三种实现方式：

1、使用scroll-into-view属性，给最底部的元素设置一个id,并赋值给scroll-into-view属性

2、使用scroll-top属性，设置一个较大的值，使其滚动到底部

3、使用scroll-top和wx.createSelectorQuery()获取内容的高度，设置距离滚动高度scrollTop

下面分别介绍三种实现
公共wxss

.lines-block-new{
  display: inline;
  font-family: monospace;
  font-size: 40rpx;
  line-height: 60rpx;
  background: linear-gradient(90deg, transparent, transparent calc(100% - 2rpx), #000 calc(100% - 2rpx), #000);
  animation: colorChange .8s linear infinite;
  padding-right: 4rpx;
}
@keyframes colorChange {
  0%, 50% {
    background: linear-gradient(90deg, transparent, transparent calc(100% - 2rpx), #000 calc(100% - 2rpx), #000);
  }
  50%, 100% {
    background: linear-gradient(90deg, transparent, transparent calc(100% - 2rpx), transparent calc(100% - 2rpx), transparent);
  }
}

1、使用scroll-into-view属性，给最底部的元素设置一个id,并赋值给scroll-into-view属性

<scroll-view scroll-y style="height: 400rpx;" enhanced scroll-into-view="{{scrollBottom}}">
  <view id="lines-block-new" class="lines-block-new">{{contentElement}}</view>
  <view id="scroll-bottom"></view>
</scroll-view>

Page({

  /**
   * 页面的初始数据
   */
  data: {
    text: `这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。
    沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。
    路上只我一个人，背着手踱着。这一片天地好像是我的；我也像超出了平常的自己，到了另一世界里。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。
    曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。
    月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。`,
    contentElement: '',
    scrollBottom: 'scroll-bottom',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.tapText(this.data.text)
  },
  
  tapText(text){
    let index = 0;
    const that = this
    let contentElement = ''
    function addNextCharacter() {
      if (index < text.length) {
        contentElement += text[index];
        index++;
        that.setData({
          contentElement,
          scrollBottom: 'scroll-bottom', //1、使用scroll-iinto-view属性，给最底部的元素设置一个id,并赋值给scroll-iinto-view属性
        })
        that.timer = setTimeout(() => {
          addNextCharacter()
        }, Math.random() * 150 + 30);
      }else{
        clearTimeout(that.timer)
      }
    }
    addNextCharacter()
  },
})

2、使用scroll-top属性，设置一个较大的值，使其滚动到底部

<scroll-view scroll-y style="height: 400rpx;" enhanced scrollTop="{{scrollTop}}">
  <view id="lines-block-new" class="lines-block-new">{{contentElement}}</view>
</scroll-view>

Page({

  /**
   * 页面的初始数据
   */
  data: {
    textEn: 'Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet consectetur adipisicing elit',
    text: `这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。
    沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。
    路上只我一个人，背着手踱着。这一片天地好像是我的；我也像超出了平常的自己，到了另一世界里。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。
    曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。
    月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。`,
    contentElement: '',
    scrollTop: 0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.tapText(this.data.text)
  },
  
  tapText(text){
    let index = 0;
    const that = this
    let contentElement = ''
    function addNextCharacter() {
      if (index < text.length) {
        contentElement += text[index];
        index++;
        that.setData({
          contentElement,
          scrollTop: 10000,  //2、使用scroll-top属性，设置一个较大的值，使其滚动到底部
        })
        that.timer = setTimeout(() => {
          addNextCharacter()
          // that.getRect() //3、使用scroll-top和wx.createSelectorQuery()获取内容的高度，设置距离滚动高度scrollTop
        }, Math.random() * 150 + 30);
      }else{
        clearTimeout(that.timer)
      }
    }
    addNextCharacter()
  },
})

3、使用scroll-top和wx.createSelectorQuery()获取内容的高度，设置距离滚动高度scrollTop

<scroll-view scroll-y style="height: 400rpx;" enhanced scrollTop="{{scrollTop}}">
  <view id="lines-block-new" class="lines-block-new">{{contentElement}}</view>
</scroll-view>

Page({

  /**
   * 页面的初始数据
   */
  data: {
    textEn: 'Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet consectetur adipisicing elit',
    text: `这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。
    沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。
    路上只我一个人，背着手踱着。这一片天地好像是我的；我也像超出了平常的自己，到了另一世界里。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。
    曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。
    月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。`,
    contentElement: '',
    scrollTop: 0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.tapText(this.data.text)
  },
  
  tapText(text){
    let index = 0;
    const that = this
    let contentElement = ''
    function addNextCharacter() {
      if (index < text.length) {
        contentElement += text[index];
        index++;
        that.setData({
          contentElement,
        })
        that.timer = setTimeout(() => {
          addNextCharacter()
          that.getRect() //3、使用scroll-top和wx.createSelectorQuery()获取内容的高度，设置距离滚动高度scrollTop
        }, Math.random() * 150 + 30);
      }else{
        clearTimeout(that.timer)
      }
    }
    addNextCharacter()
  },

  getRect(){
    wx.createSelectorQuery().selectAll('.lines-block-new').boundingClientRect().exec(res => {
      const scrollTop = res[0][0].height
      if (this.data.scrollTop != scrollTop) {
        this.setData({
          scrollTop
        })
      }
    })
  },
})

完整代码示例参考：打字效果