需求

我们今天来实现一下,点击当前用户的div, 自动滚动到用户在排行榜中的位置.

效果

大家可以先看一下下面的GIF, 所实现的效果.

实现

1. 准备DOM 结构

首先,我们在进行列表建设的时候, 需要准备好一个数据. 因为此处我们是使用的vue3来进行编写. 对于列表我们使用的是v-for列表渲染来做的. 在渲染的时候, 我们需要给每一个列表项(当前就是每一个用户项)添加一个自定义属性. 具体的话, 可以看下 下方的关键代码.

核心代码就是

 <div v-for="(item, index) in rankingData" :key="item.user.id" :data-key="item.user.id"

 </div>

因为数据是后端返回的, 是包含的user_id,而且这个user_id 是不可能重复的. 我们只要保证每个列表的自定义的属性是唯一的即可.

2. 绑定方法,实现方法

接下来,我们需要考虑的是,在点击的时候,如何获取到当前的dom. 这对我们目前来说就很容易了, 因为我们可以根据据user_id 拿到我们当前点击的dom.

添加一个方法

<!-- 当前用户排名情况 -->

        <div class="text-white w-[100%] ...."  @click="scrollToCurrentRankingPosition(userId)">

实现方法.

第一步: 拿到rankingList的dom实例.

这里我们通过vue3提供ref拿到dom. 可以看下
模板引用

<div v-else class=" overflow-auto bg-white" ref="rankingList">



const rankingList = ref(null);

第二步: 根据userId获取到具体的DOM

const currentItem = rankingList.value.querySelector(`[data-key="${id}"]`);

第三步: 使用scrollIntoView方法滚动视图到当前选中的元素

 // 平滑滚动到当前元素

  currentItem.scrollIntoView({ behavior: 'smooth', block: 'center' });

scrollIntoView方法 讲解:

• Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

简单来讲就是被调用的者的元素出现在用户的视线里面.
scrollIntoView() 方法有三种调用形式：

参数

• alignToTop（可选）：布尔值，控制元素滚动到顶部还是底部对齐。默认为 true（顶部对齐）。


• scrollIntoViewOptions（可选实验性）：对象，包含以下属性：
  
  
  
  
  • behavior：定义滚动行为是平滑动画还是立即发生。可取值有 smooth（平滑动画）、instant（立即发生）或 auto（由CSS的 scroll-behavior 属性决定）。
  
  
  • block：定义垂直方向的对齐方式，可取值有 start、center、end 或 nearest。默认为 start。
  
  
  • inline：定义水平方向的对齐方式，可取值有 start、center、end 或 nearest。默认为 nearest。
  
  
  
  

目前我们实现了效果.

但是我们发现,还可以继续改进, 目前我们虽然滚动到了屏幕的中间, 但是我们很难去发现. 所以我们可以继续完善一下这个方法. 就是滚动到视图的中间的同时高亮选中的DOM.

3. 额外扩展, 高亮当前的元素

定义一个两个方法,一个用于应用样式, 一个应用于移除样式.

const applyHighlightStyles = (element) => {

    element.style.transition = 'background-color 1s ease, border-color 1s ease';

    element.style.border = '1px solid transparent'; // 预定义边框样式

    element.style.borderColor = '#006cfe'; // 设置边框颜色

    element.style.backgroundColor = '#cfe5ff'; // 设置背景色为浅蓝色

};



const removeHighlightStyles = (element) => {

    element.style.backgroundColor = ''; // 移除背景色

    element.style.borderColor = 'transparent'; // 移除边框颜色

};

然后再在我们之前的方法的后面加入代码

            // 设置高亮显示的样式

            applyHighlightStyles(currentItem);



            // 清除之前的定时器（如果有）

            if (currentItem._highlightTimer) {

                clearTimeout(currentItem._highlightTimer);

            }



            // 设置定时器，2秒后移除高亮显示

            currentItem._highlightTimer = setTimeout(() => {

                removeHighlightStyles(currentItem);

                currentItem._highlightTimer = null;

            }, 2000);

然后在组件卸载前记得清除定时器.

onUnmounted(() => {

    if (rankingList.value) {

        // 遍历所有项目，清除定时器

        rankingList.value.querySelectorAll('[data-key]').forEach(item => {

            if (item._highlightTimer) {

                clearTimeout(item._highlightTimer);

                item._highlightTimer = null;

            }

        });

    }

});

效果:

总结

整体下来的思路就是:

哈喽哈喽🌈

哈喽大家好！我是小周🤪🤪🤪。相信各位前端小伙伴都知道可以用window.print()这个方法来调用打印机实现打印功能，但是直接下载功能window.print()还是无法实现的。今天我来介绍另外一种实现方式，真正的开箱即用，既可以实现打印和直接下载，也可以防止内容截断。

技术栈

1、html2canvas

html2canvas 一个可以将html转换成canvas的三方库

2、jsPDF

jsPDF 生成pdf文件的三方库

一些用到的方法介绍

1、canvas.getContext('2d').getImageData()

canvas.getContext('2d').getImageData() 是 HTML5 Canvas API 中用于获取指定区域的像素数据的方法。它返回一个 ImageData 对象，该对象包含了指定区域中每个像素的颜色和透明度信息。

canvas.getContext('2d').getImageData(x, y, width, height)

参数说明：

• x: 采集的图像区域的左上角的水平坐标。


• y: 采集的图像区域的左上角的垂直坐标。


• width: 采集的图像区域的宽度（以像素为单位）。


• height: 采集的图像区域的高度（以像素为单位）。

返回值：

返回一个 ImageData 对象，包含以下属性：

• width: 图像数据的宽度。


• height: 图像数据的高度。


• data: 一个 Uint8ClampedArray 类型的数组，存储了区域中每个像素的颜色和透明度信息。每个像素占用 4 个元素，分别对应：
  
  
  
  
  • data[n]: 红色通道的值（0 到 255）
  
  
  • data[n+1]: 绿色通道的值（0 到 255）
  
  
  • data[n+2]: 蓝色通道的值（0 到 255）
  
  
  • data[n+3]: 透明度（alpha）通道的值（0 到 255），255 表示完全不透明，0 表示完全透明。
  
  
  
  

代码实现

1、设置 DomToPdf 类

export class DomToPdf {



_rootDom = null 

_title = 'pdf' //生成的pdf标题

_a4Width = 595.266 

_a4Height = 841.89 

_pageBackground = 'rgba(255,255,255)' //页面背景色

_hex = [0xff, 0xff, 0xff] //用于检测分页的颜色标识



//初始化状态

constructor(rootDom, title, color = [255, 255, 255]) { 

    this._rootDom = rootDom 

    this._title = title 

    this._pageBackground = `rgb(${color[0]},${color[1]},${color[2]})`

    this._hex = color 

}



}

2、设置 pdf的生成函数

  async savePdf() {

    const a4Width = this._a4Width

    const a4Height = this._a4Height

    const hex = this._hex



    return new Promise(async (resolve, reject) => {

      try {

        const canvas = await html2canvas(this._rootDom, {

          useCORS: true,

          allowTaint: true,

          scale: 0.8,

          backgroundColor: this._pageBackground,

        })

        const pdf = new jsPDF('p', 'pt', 'a4')

        let index = 1,

          canvas1 = document.createElement('canvas'),

          height

        let leftHeight = canvas.height



        let a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height)

        let position = 0

        let pageData = canvas.toDataURL('image/jpeg', 0.7)

        pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen')



        function createImpl(canvas) {

          if (leftHeight > 0) {

            index++

            let checkCount = 0

            if (leftHeight > a4HeightRef) {

              let i = position + a4HeightRef

              for (i = position + a4HeightRef; i >= position; i--) {

                let isWrite = true

                for (let j = 0; j < canvas.width; j++) {

                  let c = canvas.getContext('2d').getImageData(j, i, 1, 1).data

                  if (c[0] !== hex[0] || c[1] !== hex[1] || c[2] !== hex[2]) {

                    isWrite = false

                    break

                  }

                }

                if (isWrite) {

                  checkCount++

                  if (checkCount >= 10) {

                    break

                  }

                } else {

                  checkCount = 0

                }

              }

              height =

                Math.round(i - position) || Math.min(leftHeight, a4HeightRef)

              if (height <= 0) {

                height = a4HeightRef

              }

            } else {

              height = leftHeight

            }

            canvas1.width = canvas.width

            canvas1.height = height

            let ctx = canvas1.getContext('2d')

            ctx.drawImage(

              canvas,

              0,

              position,

              canvas.width,

              height,

              0,

              0,

              canvas.width,

              height,

            )

            if (position !== 0) {

              pdf.addPage()

            }

            pdf.setFillColor(hex[0], hex[1], hex[2])

            pdf.rect(0, 0, a4Width, a4Height, 'F')

            pdf.addImage(

              canvas1.toDataURL('image/jpeg', 1.0),

              'JPEG',

              0,

              0,

              a4Width,

              (a4Width / canvas1.width) * height,

            )

            leftHeight -= height

            position += height

            if (leftHeight > 0) {

              setTimeout(createImpl, 500, canvas)

            } else {

              resolve(pdf)

            }

          }

        }

        if (leftHeight < a4HeightRef) {

          pdf.setFillColor(hex[0], hex[1], hex[2])

          pdf.rect(0, 0, a4Width, a4Height, 'F')

          pdf.addImage(

            pageData,

            'JPEG',

            0,

            0,

            a4Width,

            (a4Width / canvas.width) * leftHeight,

          )

          resolve(pdf)

        } else {

          try {

            pdf.deletePage(0)

            setTimeout(createImpl, 500, canvas)

          } catch (err) {

            reject(err)

          }

        }

      } catch (error) {

        reject(error)

      }

    })

  }

3、设置承接pdf的方法

//直接下载pdf

  async downToPdf(setLoadParent) {

    const newPdf = await this.savePdf()

    const title = this._title

    newPdf.save(title + '.pdf')

    setLoadParent(false)

  }



//通过构造链接的形式去跳转打印页面

  async printToPdf(setLoadParent) {

    const newPdf = await this.savePdf()

    const pdfBlob = newPdf.output('blob')

    const pdfUrl = URL.createObjectURL(pdfBlob)

    setLoadParent(false)

    window.open(pdfUrl)

  }

完整代码

import html2canvas from 'html2canvas'

import jsPDF from 'jspdf'

export class DomToPdf {

  _rootDom = null

  _title = 'pdf'

  _a4Width = 595.266

  _a4Height = 841.89

  _pageBackground = 'rgba(255,255,255)'

  _hex = [0xff, 0xff, 0xff]



  constructor(rootDom, title, color = [255, 255, 255]) {

    this._rootDom = rootDom 

    this._title = title

    this._pageBackground = `rgb(${color[0]},${color[1]},${color[2]})`

    this._hex = color

  }

  async savePdf() {

    const a4Width = this._a4Width

    const a4Height = this._a4Height

    const hex = this._hex



    return new Promise(async (resolve, reject) => {

      try {

        const canvas = await html2canvas(this._rootDom, {

          useCORS: true,

          allowTaint: true,

          scale: 0.8,

          backgroundColor: this._pageBackground,

        })

        const pdf = new jsPDF('p', 'pt', 'a4')

        let index = 1,

          canvas1 = document.createElement('canvas'),

          height

        let leftHeight = canvas.height



        let a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height)

        let position = 0

        let pageData = canvas.toDataURL('image/jpeg', 0.7)

        pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen')



        function createImpl(canvas) {

          if (leftHeight > 0) {

            index++

            let checkCount = 0

            if (leftHeight > a4HeightRef) {

              let i = position + a4HeightRef

              for (i = position + a4HeightRef; i >= position; i--) {

                let isWrite = true

                for (let j = 0; j < canvas.width; j++) {

                  let c = canvas.getContext('2d').getImageData(j, i, 1, 1).data

                  if (c[0] !== hex[0] || c[1] !== hex[1] || c[2] !== hex[2]) {

                    isWrite = false

                    break

                  }

                }

                if (isWrite) {

                  checkCount++

                  if (checkCount >= 10) {

                    break

                  }

                } else {

                  checkCount = 0

                }

              }

              height =

                Math.round(i - position) || Math.min(leftHeight, a4HeightRef)

              if (height <= 0) {

                height = a4HeightRef

              }

            } else {

              height = leftHeight

            }

            canvas1.width = canvas.width

            canvas1.height = height

            let ctx = canvas1.getContext('2d')

            ctx.drawImage(

              canvas,

              0,

              position,

              canvas.width,

              height,

              0,

              0,

              canvas.width,

              height,

            )

            if (position !== 0) {

              pdf.addPage()

            }

            pdf.setFillColor(hex[0], hex[1], hex[2])

            pdf.rect(0, 0, a4Width, a4Height, 'F')

            pdf.addImage(

              canvas1.toDataURL('image/jpeg', 1.0),

              'JPEG',

              0,

              0,

              a4Width,

              (a4Width / canvas1.width) * height,

            )

            leftHeight -= height

            position += height

            if (leftHeight > 0) {

              setTimeout(createImpl, 500, canvas)

            } else {

              resolve(pdf)

            }

          }

        }

        if (leftHeight < a4HeightRef) {

          pdf.setFillColor(hex[0], hex[1], hex[2])

          pdf.rect(0, 0, a4Width, a4Height, 'F')

          pdf.addImage(

            pageData,

            'JPEG',

            0,

            0,

            a4Width,

            (a4Width / canvas.width) * leftHeight,

          )

          resolve(pdf)

        } else {

          try {

            pdf.deletePage(0)

            setTimeout(createImpl, 500, canvas)

          } catch (err) {

            reject(err)

          }

        }

      } catch (error) {

        reject(error)

      }

    })

  }

  async downToPdf(setLoadParent) {

    const newPdf = await this.savePdf()

    const title = this._title

    newPdf.save(title + '.pdf')

    setLoadParent(false)

  }



  async printToPdf(setLoadParent) {

    const newPdf = await this.savePdf()

    const pdfBlob = newPdf.output('blob')

    const pdfUrl = URL.createObjectURL(pdfBlob)

    setLoadParent(false)

    window.open(pdfUrl)

  }

结束

好喽，开箱即用的打印和下载功能的实现就完成了。欢迎大家阅读，我是小周🤪🤪🤪

<div>

      <div class="animate-me">

        letterize.js&anime.js

      div>

      <div class="animate-me">

        anime.js&letterize.js

      div>

      ......

      <div class="animate-me">

        letterize.js&anime.js

      div>

      <div class="animate-me">

        anime.js&letterize.js

      div>

    div>

const letterize = new Letterize({

  targets: ".animate-me"

});

const animation = anime.timeline({

  targets: letterize.listAll,

  delay: anime.stagger(100, {

    grid: [letterize.list[0].length, letterize.list.length],

    from: "center"

  }),

  loop: true

});

3. 开始执行动画，首先设置 「文案呈圆环状扩散开，扩散的同时文字变小」，这里其实就是将字母的大小缩小。

animation

  .add({

    scale: 0.5

  })

此时的效果如下所示：

4. 继续处理下一步动画，「文字之间的间距从中心逐个扩散开，间距变大」，这里处理的其实就是将字母的间距加大，通过设置 letterSpacing 即可，代码如下：

animation

  .add({

    scale: 0.5

  })

  .add({

    letterSpacing: "10px"

  })

此时的效果如下所示：

5. 后面还有2个步骤，「文案呈圆环状扩散开，扩散的同时文字变大；文字之间的间距从中心逐个聚拢，间距变小」，换做上面的思路也就是将文字变大和将文字间距变小，增加相应的代码如下：

  .add({

    scale: 1

  })

  .add({

    letterSpacing: "6px"

  });

在线预览

码上掘金地址：

最后

本文通过 Letterize.js + Anime.js 实现了一个很炫酷的文字动画效果，文字的每个字符呈波浪式的扩散式展开和收起。anime.js还有很多的参数可以尝试，有兴趣的朋友可以尝试探索看看~

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）

参考

动画效果发布者 Wojciech Krakowiak ：https://codepen.io/WojciechWKROPCE/pen/VwLePLy

如图所示，这是一个很炫酷的按钮悬浮特效，鼠标悬停时，按钮呈现发光的效果，周边还出现类型萤火虫的效果。本文将解析如何实现这个按钮特效，基于这个动图可以分析出需要实现的要点：

• 有一个跟随鼠标移动的圆点


• 按钮悬停时有高亮发光的效果


• 悬停时按钮周边的萤火中效果

实现过程

跟随鼠标移动的圆点

这个部分需要基于JS实现，但不是最主要的实现代码

如果单纯做一个跟随鼠标移动的点很简单，只需要监听鼠标事件获取坐标实时更新到需要移动的元素上即可。但是仔细看这里的效果并不是这样，圆点是跟随在鼠标后面，鼠标移动停止后圆点才会和鼠标重合。这里是使用了一个名为 Kinet 的库来实现的这个鼠标移动动画效果，具体实现如下：

• acceleration: 加速度，控制动画的加速程度。


• friction: 摩擦力，控制动画的减速程度。


• names: 定义了两个属性 x 和 y，用于表示动画的两个维度。

 var kinet = new Kinet({

   acceleration: 0.02,

   friction: 0.25,

   names: ["x", "y"],

 });

2. 通过 document.getElementById 获取页面中 ID 为 circle 的元素，以便后续进行动画处理。

前言

但凡用过鸿蒙原生弹窗的小伙伴，就能体会到它们是有多么的难用和奇葩，什么AlertDialog，CustomDialog，SubWindow，bindXxx，只要大家用心去体验，就能发现他们有很多离谱的设计和限制，时常就是一边用，一边骂骂咧咧的吐槽

实属无奈，就把鸿蒙版的SmartDialog写出来了

flutter自带的dialog是可以应对日常场景，例如：简单的打开一个弹窗，非UI模块使用，跨页面交互之类；flutter_smart_dialog 是补齐了大多数的业务场景和一些强大的特殊能力，flutter_smart_dialog 对于flutter而言，日常场景是锦上添花，特殊场景是雪中送炭

但是 ohos_smart_dialog 对于鸿蒙而言，日常场景就是雪中送炭！单单一个使用方式而言，就是吊打鸿蒙的CustomDialog，CustomDialog的各种限制和使用方式，我不想再去提及和吐槽了

有时候，简洁的使用，才是最大的魅力

鸿蒙版的SmartDialog有什么优势？

• 单次初始化后即可使用，无需多处配置相关Component


• 优雅，极简的用法


• 非UI区域内使用，自定义Component


• 返回事件处理，优化的跨页面交互


• 多弹窗能力，多位置弹窗：上下左右中间


• 定位弹窗：自动定位目标Component


• 极简用法的loading弹窗


• 等等......

目前 flutter_smart_dialog 的代码量16w+，完整复刻其功能，工作量非常大，目前只能逐步实现一些基础能力，由于鸿蒙api的设计和相关限制，用法和相关初始化都有一定程度的妥协

鸿蒙版本的SmartDialog，功能会逐步和 flutter_smart_dialog 对齐（长期），api会尽量保持一致

效果

• Tablet 模拟器目前有些问题，会导致动画闪烁，请忽略；注：真机动画丝滑流畅，无任何问题

极简用法

// dialog

SmartDialog.show({

  builder: dialogArgs,

  builderArgs: Math.random(),

})



@Builder

function dialogArgs(args: number) {

  Text(args.toString()).padding(50).backgroundColor(Color.White)

}



// loading

SmartDialog.showLoading()

安装

• github：github.com/xdd666t/oho…


• ohos：ohpm.openharmony.cn/#/cn/detail…

ohpm install ohos_smart_dialog 

配置

下述的配置项，可能会有一点多，但，这也是为了极致的体验；同时也是无奈之举，相关配置难以在内部去闭环处理，只能在外部去配置

这些配置，只需要配置一次，后续无需关心

完成下述的配置后，你将可以在任何地方使用弹窗，没有任何限制

初始化

• 因为弹窗需要处理跨页面交互，必须要监控路由

@Entry

@Component

struct Index {

  navPathStack: NavPathStack = new NavPathStack()



  build() {

    Stack() {

      // here: monitor router

      Navigation(OhosSmartDialog.registerRouter(this.navPathStack)) {

        MainPage()

      }

      .mode(NavigationMode.Stack)

      .hideTitleBar(true)

      .navDestination(pageMap)



      // here

      OhosSmartDialog()

    }.height('100%').width('100%')

  }

}

返回事件监听

别问我为啥返回事件的监听，处理的这么不优雅，鸿蒙里面没找全局返回事件监听，我也没辙。。。

• 如果你无需处理返回事件，可以使用下述写法

// Entry页面处理

@Entry

@Component

struct Index {

  onBackPress(): boolean | void {

    return OhosSmartDialog.onBackPressed()()

  }

}



// 路由子页面

struct JumpPage {

  build() {

    NavDestination() {

      // ....

    }

    .onBackPressed(OhosSmartDialog.onBackPressed())

  }

}

• 如果你需要处理返回事件，在OhosSmartDialog.onBackPressed()中传入你的方法即可

// Entry页面处理

@Entry

@Component

struct Index {

  onBackPress(): boolean | void {

    return OhosSmartDialog.onBackPressed(this.onCustomBackPress)()

  }



  onCustomBackPress(): boolean {

    return false

  }

}



// 路由子页面

@Component

struct JumpPage {

  build() {

    NavDestination() {

      // ...

    }

    .onBackPressed(OhosSmartDialog.onBackPressed(this.onCustomBackPress))

  }



  onCustomBackPress(): boolean {

    return false

  }

}

路由监听

• 一般来说，你无需关注SmartDialog的路由监听，因为内部已经设置了路由监听拦截器


• 但是，NavPathStack仅支持单拦截器（setInterception），如果业务代码也使用了这个api，会导致SmartDialog的路由监听被覆盖，从而失效

如果出现该情况，请参照下述解决方案

• 在你的路由监听类中手动调用OhosSmartDialog.observe

export default class YourNavigatorObserver implements NavigationInterception {

  willShow?: InterceptionShowCallback = (from, to, operation, isAnimated) => {

    OhosSmartDialog.observe.willShow?.(from, to, operation, isAnimated)

    // ...

  }

  didShow?: InterceptionShowCallback = (from, to, operation, isAnimated) => {

    OhosSmartDialog.observe.didShow?.(from, to, operation, isAnimated)

    // ...

  }

}

适配暗黑模式

• 为了极致的体验，深色模式切换时，打开态弹窗也应刷新为对应模式的样式，故需要进行下述配置

export default class EntryAbility extends UIAbility {  

  onConfigurationUpdate(newConfig: Configuration): void {  

    OhosSmartDialog.onConfigurationUpdate(newConfig)  

  }  

}

SmartConfig

• 支持全局配置弹窗的默认属性

function init() {

  // show

  SmartDialog.config.custom.maskColor = "#75000000"

  SmartDialog.config.custom.alignment = Alignment.Center



  // showAttach

  SmartDialog.config.attach.attachAlignmentType = SmartAttachAlignmentType.center

}

• 检查弹窗是否存在

// 检查当前是否有CustomDialog，AttachDialog或LoadingDialog处于打开状态

let isExist = SmartDialog.checkExist()



// 检查当前是否有AttachDialog处于打开状态

let isExist = SmartDialog.checkExist({ dialogTypes: [SmartAllDialogType.attach] })



// 检查当前是否有tag为“xxx”的dialog处于打开状态

let isExist = SmartDialog.checkExist({ tag: "xxx" })

配置全局默认样式

• ShowLoading 自定样式十分简单

SmartDialog.showLoading({ builder: customLoading })

但是对于大家来说，肯定是想用 SmartDialog.showLoading() 这种简单写法，所以支持自定义全局默认样式

• 需要在 OhosSmartDialog 上配置自定义的全局默认样式

@Entry

@Component

struct Index {

  build() {

    Stack() {

      OhosSmartDialog({

        // custom global loading

        loadingBuilder: customLoading,

      })

    }.height('100%').width('100%')

  }

}



@Builder

export function customLoading(args: ESObject) {

  LoadingProgress().width(80).height(80).color(Color.White)

}

• 配置完你的自定样式后，使用下述代码，就会显示你的 loading 样式

SmartDialog.showLoading()



// 支持入参，可以在特殊场景下灵活配置

SSmartDialog.showLoading({ builderArgs: 1 })

CustomDialog

• 下方会共用的方法

export function randomColor(): string {

  const letters: string = '0123456789ABCDEF';

  let color = '#';

  for (let i = 0; i < 6; i++) {

    color += letters[Math.floor(Math.random() * 16)];

  }

  return color;

}



export function delay(ms?: number): Promise<void> {

  return new Promise(resolve => setTimeout(resolve, ms));

}

传参弹窗

export function customUseArgs() {

  SmartDialog.show({

    builder: dialogArgs,

    // 支持任何类型

    builderArgs: Math.random(),

  })

}



@Builder

function dialogArgs(args: number) {

  Text(`${args}`).fontColor(Color.White).padding(50)

    .borderRadius(12).backgroundColor(randomColor())

}

多位置弹窗

export async function customLocation() {

  const animationTime = 1000

  SmartDialog.show({

    builder: dialogLocationHorizontal,

    alignment: Alignment.Start,

  })

  await delay(animationTime)

  SmartDialog.show({

    builder: dialogLocationVertical,

    alignment: Alignment.Top,

  })

}





@Builder

function dialogLocationVertical() {

  Text("location")

    .width("100%")

    .height("20%")

    .fontSize(20)

    .fontColor(Color.White)

    .textAlign(TextAlign.Center)

    .padding(50)

    .backgroundColor(randomColor())

}



@Builder

function dialogLocationHorizontal() {

  Text("location")

    .width("30%")

    .height("100%")

    .fontSize(20)

    .fontColor(Color.White)

    .textAlign(TextAlign.Center)

    .padding(50)

    .backgroundColor(randomColor())

}

跨页面交互

• 正常使用，无需设置什么参数

export function customJumpPage() {

  SmartDialog.show({

    builder: dialogJumpPage,

  })

}



@Builder

function dialogJumpPage() {

  Text("JumPage")

    .fontSize(30)

    .padding(50)

    .borderRadius(12)

    .fontColor(Color.White)

    .backgroundColor(randomColor())

    .onClick(() => {

      // 跳转页面

    })

}

关闭指定弹窗

export async function customTag() {

  const animationTime = 1000

  SmartDialog.show({

    builder: dialogTagA,

    alignment: Alignment.Start,

    tag: "A",

  })

  await delay(animationTime)

  SmartDialog.show({

    builder: dialogTagB,

    alignment: Alignment.Top,

    tag: "B",

  })

}



@Builder

function dialogTagA() {

  Text("A")

    .width("20%")

    .height("100%")

    .fontSize(20)

    .fontColor(Color.White)

    .textAlign(TextAlign.Center)

    .padding(50)

    .backgroundColor(randomColor())

}



@Builder

function dialogTagB() {

  Flex({ wrap: FlexWrap.Wrap }) {

    ForEach(["closA", "closeSelf"], (item: string, index: number) => {

      Button(item)

        .backgroundColor("#4169E1")

        .margin(10)

        .onClick(() => {

          if (index === 0) {

            SmartDialog.dismiss({ tag: "A" })

          } else if (index === 1) {

            SmartDialog.dismiss({ tag: "B" })

          }

        })

    })

  }.backgroundColor(Color.White).width(350).margin({ left: 30, right: 30 }).padding(10).borderRadius(10)

}

自定义遮罩

export function customMask() {

  SmartDialog.show({

    builder: dialogShowDialog,

    maskBuilder: dialogCustomMask,

  })

}



@Builder

function dialogCustomMask() {

  Stack().width("100%").height("100%").backgroundColor(randomColor()).opacity(0.6)

}



@Builder

function dialogShowDialog() {

  Text("showDialog")

    .fontSize(30)

    .padding(50)

    .fontColor(Color.White)

    .borderRadius(12)

    .backgroundColor(randomColor())

    .onClick(() => customMask())

}

AttachDialog

默认定位

export function attachEasy() {

  SmartDialog.show({

    builder: dialog

  })

}



@Builder

function dialog() {

  Stack() {

    Text("Attach")

      .backgroundColor(randomColor())

      .padding(20)

      .fontColor(Color.White)

      .borderRadius(5)

      .onClick(() => {

        SmartDialog.showAttach({

          targetId: "Attach",

          builder: targetLocationDialog,

        })

      })

      .id("Attach")

  }

  .borderRadius(12)

  .padding(50)

  .backgroundColor(Color.White)

}



@Builder

function targetLocationDialog() {

  Text("targetIdDialog")

    .fontSize(20)

    .fontColor(Color.White)

    .textAlign(TextAlign.Center)

    .padding(50)

    .borderRadius(12)

    .backgroundColor(randomColor())

}

多方向定位

export function attachLocation() {

  SmartDialog.show({

    builder: dialog

  })

}



class AttachLocation {

  title: string = ""

  alignment?: Alignment

}



const locationList: Array<AttachLocation> = [

  { title: "TopStart", alignment: Alignment.TopStart },

  { title: "Top", alignment: Alignment.Top },

  { title: "TopEnd", alignment: Alignment.TopEnd },

  { title: "Start", alignment: Alignment.Start },

  { title: "Center", alignment: Alignment.Center },

  { title: "End", alignment: Alignment.End },

  { title: "BottomStart", alignment: Alignment.BottomStart },

  { title: "Bottom", alignment: Alignment.Bottom },

  { title: "BottomEnd", alignment: Alignment.BottomEnd },

]



@Builder

function dialog() {

  Column() {

    Grid() {

      ForEach(locationList, (item: AttachLocation) => {

        GridItem() {

          buildButton(item.title, () => {

            SmartDialog.showAttach({

              targetId: item.title,

              alignment: item.alignment,

              maskColor: Color.Transparent,

              builder: targetLocationDialog

            })

          })

        }

      })

    }.columnsTemplate('1fr 1fr 1fr').height(220)



    buildButton("allOpen", async () => {

      for (let index = 0; index < locationList.length; index++) {

        let item = locationList[index]

        SmartDialog.showAttach({

          targetId: item.title,

          alignment: item.alignment,

          maskColor: Color.Transparent,

          builder: targetLocationDialog,

        })

        await delay(300)

      }

    }, randomColor())

  }

  .borderRadius(12)

    .width(700)

    .padding(30)

    .backgroundColor(Color.White)

}



@Builder

function buildButton(title: string, onClick?: VoidCallback, bgColor?: ResourceColor) {

  Text(title)

    .backgroundColor(bgColor ?? "#4169E1")

    .constraintSize({ minWidth: 120, minHeight: 46 })

    .margin(10)

    .textAlign(TextAlign.Center)

    .fontColor(Color.White)

    .borderRadius(5)

    .onClick(onClick)

    .id(title)

}



@Builder

function targetLocationDialog() {

  Text("targetIdDialog")

    .fontSize(20)

    .fontColor(Color.White)

    .textAlign(TextAlign.Center)

    .padding(50)

    .borderRadius(12)

    .backgroundColor(randomColor())

}

Loading

对于Loading而言，应该有几个比较明显的特性

• loading和dialog都存在页面上，哪怕dialog打开，loading都应该显示dialog之上


• loading应该具有单一特性，多次打开loading，页面也应该只存在一个loading


• 刷新特性，多次打开loading，后续打开的loading样式，应该覆盖之前打开的loading样式


• loading使用频率非常高，应该支持强大的拓展和极简的使用

从上面列举几个特性而言，loading是一个非常特殊的dialog，所以需要针对其特性，进行定制化的实现

当然了，内部已经屏蔽了细节，在使用上，和dialog的使用没什么区别

默认loading

SmartDialog.showLoading()

自定义Loading

• 点击loading后，会再次打开一个loading，从效果图可以看出它的单一刷新特性

export function loadingCustom() {

  SmartDialog.showLoading({

    builder: customLoading,

  })

}



@Builder

export function customLoading() {

  Column({ space: 5 }) {

    Text("again open loading").fontSize(16).fontColor(Color.White)

    LoadingProgress().width(80).height(80).color(Color.White)

  }

  .padding(20)

  .borderRadius(12)

  .onClick(() => loadingCustom())

  .backgroundColor(randomColor())

}

最后

鸿蒙版的SmartDialog，相信会对开发鸿蒙的小伙伴们有一些帮助~.~

现在就业环境真是让人头皮发麻，现在的各种技术群里，看到好多人公司各种拖欠工资，各种失业半年的情况

淦，不知道还能写多长时间代码！

产品想法萌生背景:

我孩子4岁,很喜欢画画,平常在家里,画在纸上,墙的画板上,学习机上,每一次画都很专注,而外出时,有时候会无聊,比如就餐等位,长时间坐高铁,等爸爸剪头发等等场景,一时之间也不好找东西给他玩,于是有了做一个画画小程序给他的想法,同时也觉得会有同样需求的家长,尽管需求场景很小,用的频率很低,但这小程序也许是可以救急的

产品实施:

1.梳理初步想要实现的功能

2.开发实现

需求想要的效果都实现了,可随意改变颜色在白板上随意画画,效果如下

3.更多的想法

实现了画画功能,感觉太单一,于是想到涂色卡和字帖功能,具体如下

其实都是“画”这个功能的延伸,实现起来也比较顺利,实现效果如下

4.为什么废了?

• 想要在外出时画画,可以买一个小小的画板,一键清除那种,这样既能画画,还不用看手机,蛮多家长介意看手机的


• 需要场景很小,很多替代方案,各种小型的益智玩具,绘本等


• 字帖功能,一般是打印纸质版,练习握笔和书写习惯


• 欢迎补充哈哈哈

最后想说

虽然产品废了,但从0到1实现了自己的想法,收获还是很多的,我从事Java开发,因为实现这个想法,自学了小程序开发,AI抠图等,在开发过程中,解决了一个又一个开发障碍,最终达到想要的效果,对这个产品实现有任何疑问都可以留言哈,我都会解答!对了,搜索小程序“小乐画板”,就可以体验这款小程序

大屏主要是为了展示数据和酷炫的效果，布局大部分是9宫格，或者在9宫格上做的延伸，现在介绍下 泛积木-低代码 提供的大屏可视化配置。

首先查看效果展示：泛积木-低代码大屏展示，泛积木-低代码大屏展示 此页面注册登录之后可编辑（会定期恢复至演示版本）。

创建页面之后，点击进入编辑页面，在可视化编辑器左侧组件往下翻，找到自定义组件中的 大屏布局组件 ，将 大屏布局组件 拖入页面，可以看到下面的成果：

拖入的 大屏布局组件 将使用基础配置，并且已经自带了缩放容器组件。

缩放容器组件

缩放容器组件主要用于适配不同的尺寸大小，实现原理：缩放容器组件是以该组件的宽度和设计稿的宽度求比例，然后等比例缩放。

缩放容器组件支持配置 设计稿宽度、设计稿高度、样式名称、背景颜色，当要适配不同尺寸的屏幕时，我们只需要修改 设计稿宽度、设计稿高度 为对应尺寸即可。样式名称是添加您需要设置的 样式 或添加唯一的className，className作用的元素将作为后续全屏按钮点击时全屏的元素。

全屏按钮组件

全屏按钮组件主要用于配置全屏按钮加全屏元素等。在全屏元素中配置 缩放容器组件 的 唯一className 。

全屏按钮组件还支持配置 样式名称、字体颜色、字体大小、间距。字体颜色未配置时，会默认从 大屏布局组件 的字体颜色继承。

说完上述两个小组件之后，我们再来说说关键的 大屏布局组件。

大屏布局组件

大屏布局组件的配置项可以概括为两部分：

样式覆盖 填入 css 之后，会自动在组件内创建 style 标签添加样式，这个时候需要使用 css 优先级去覆盖默认展示内容，例如：

.large-screen-layout .large-screen-layout-header {

  height: 100px;

}

此时页面头部的高度将由默认的 80px 调整为 100px 。

头部背景图片 未设置时，头部高度默认为 80px ，设置之后，高度为背景图片按照宽度整体缩放之后的高度。

头部左/右侧内容 是配置 SchemaNode , SchemaNode 是指每一个 amis 配置节点的类型，支持模板、Schema（配置）以及SchemaArray（配置数组）三种类型。

例如：

{

  ...

  "headerLeft": {

    "type": "tpl",

    "tpl": "公司名称",

    "id": "u:3dc2c3411ae1"

  },

  "headerRight": {

    "type": "fan-screenfull-button",

    "targetClass": "largeScreenLayout",

    "fontSize": "22px",

    "id": "u:be46114da702"

  },

  ...

}

模块样式模板 用于统一设置 大屏单块模板组件 的样式模板，样式模板是事先定义好的一些简单样式。

大屏单块模板组件

大屏单块模板组件 是用于配置大屏每块内容，大屏布局组件 和 大屏单块模板组件 之间还有一层 grid-2d 组件。

grid-2d 组件 是使用 grid 布局，支持配置 外层 Dom 的类名、格子划分、格子垂直高度、格子间距、格子行间距，建议 大屏布局组件 -> 总体配置 -> 页面内容 -> 内边距 和格子间距设置一致，格子划分 指定 划分为几列，格子间距统一设置横向和纵向的间距，格子行间距可以设置横向间距，优先级高于格子间距。

格子垂直高度 = (缩放容器组件的设计稿高度 - 大屏布局组件头部高度 - 大屏布局组件头部高度页面内容内边距 * 2 - (格子行间距 || 格子间距) * 2) / 3

例如默认的： (1080 - 80 - 20 * 2 - 20 * 2) / 3 = 306.667px

大屏单块模板组件 支持如下配置：

样式覆盖 填入 css 之后，会自动在组件内创建 style 标签添加样式，这个时候需要使用 css 优先级去覆盖默认展示内容，例如：

.fan-screen-card .fan-screen-card-header {

  height: 80px;

}

此时模块头部的高度将由默认的 50px 调整为 80px 。 css 会作用于符合 css 的所有DOM元素，如果需要唯一设置，请在前面添加特殊的前缀，例如：

.fan-screen-card-1.fan-screen-card .fan-screen-card-header {

  height: 80px;

}

样式模板 可单独设置每个模块的样式。

模块头部右侧内容 是配置 SchemaNode , SchemaNode 是指每一个 amis 配置节点的类型，支持模板、Schema（配置）以及SchemaArray（配置数组）三种类型。

位置配置 每项的值都是数值，比如默认的 9 宫格就是 3 * 3，此时设置的值就是 1/2/3 ，宽度1就代表一列，高度1就代表一行。可以调整初始位置、宽度、高度等配置出多种布局方式。

大屏单块模板内容首先嵌套 Service 功能型容器 用于获取数据，再使用 Chart 图表 进行图表渲染。

如果需要轮流高亮 Chart 图表的每个数据，例如 大屏动态展示 可以使用如下配置：

dataFilter：

const curFlag = 'lineCharts';



if (window.fanEchartsIntervals && window.fanEchartsIntervals.get(curFlag)) {

  clearInterval(window.fanEchartsIntervals.get(curFlag)[0]);

  window.fanEchartsIntervals.get(curFlag)[1] && window.fanEchartsIntervals.get(curFlag)[1].dispose();

}



const myChart = echarts.init(document.getElementsByClassName(curFlag)[0]);

let currentIndex = -1;

myChart.setOption({

  ...config,

  series: [

    {

      ...config.series[0],

      data: data.line

    }

  ]

});

const interval = setInterval(function () {

  const dataLen = data.line.length;

  // 取消之前高亮的图形

  myChart.dispatchAction({

    type: 'downplay',

    seriesIndex: 0,

    dataIndex: currentIndex

  });

  currentIndex = (currentIndex + 1) % dataLen;

  // 高亮当前图形

  myChart.dispatchAction({

    type: 'highlight',

    seriesIndex: 0,

    dataIndex: currentIndex

  });

  // 显示 tooltip

  myChart.dispatchAction({

    type: 'showTip',

    seriesIndex: 0,

    dataIndex: currentIndex

  });

}, 1000);



if (window.fanEchartsIntervals) {

  window.fanEchartsIntervals.set(curFlag, [interval, myChart]);

} else {

  window.fanEchartsIntervals = new Map();

  window.fanEchartsIntervals.set(curFlag, [interval, myChart]);

}



return config;

修改高亮行 1 curFlag 设置为对应的 Chart 图表的 className，12-17 行是插入数据，22-39 为对应数据的切换展示方式。

当添加第二个 大屏单块模板 时，直接把第一个复制一份，调整位置、service组件的接口、dataFilter配置等。

至此大屏就配置完成了。

更详细的使用文档可以查看 泛积木-低代码 。

你好，我是猿java。

这篇文章，我们来聊聊 Java 语法糖。

什么是语法糖？

语法糖（Syntactic Sugar）是编程语言中的一种设计概念，它指的是在语法层面上对某些操作提供更简洁、更易读的表示方式。这种表示方式并不会新增语言的功能，而只是使代码更简洁、更直观，便于开发者理解和维护。

语法糖的作用：

• 提高代码可读性：语法糖可以使代码更加贴近自然语言或开发者的思维方式，从而更容易理解。


• 减少样板代码：语法糖可以减少重复的样板代码，使得开发者可以更专注于业务逻辑。


• 降低出错率：简化的语法可以减少代码量，从而降低出错的概率。

因此，语法糖不是 Java 语言特有的，它是很多编程语言设计中的一些语法特性，这些特性使代码更加简洁易读，但并不会引入新的功能或能力。

那么，Java中有哪些语法糖呢？

Java 语法糖

1. 自动装箱与拆箱

自动装箱和拆箱 (Autoboxing and Unboxing)是 Java 5 引入的特性，用于在基本数据类型和它们对应的包装类之间自动转换。

// 自动装箱

Integer num = 10; // 实际上是 Integer.valueOf(10)



// 自动拆箱

int n = num; // 实际上是 num.intValue()

2. 增强型 for 循环

增强型 for 循环（也称为 for-each 循环）用于遍历数组或集合。

int[] numbers = {1, 2, 3, 4, 5};

for (int number : numbers) {

    System.out.println(number);

}

3. 泛型

泛型（Generics）使得类、接口和方法可以操作指定类型的对象，提供了类型安全的检查和消除了类型转换的需要。

List<String> list = new ArrayList<>();

list.add("Hello");

String s = list.get(0); // 不需要类型转换

4. 可变参数

可变参数（Varargs）允许在方法中传递任意数量的参数。

public void printNumbers(int... numbers) {

    for (int number : numbers) {

        System.out.println(number);

    }

}



printNumbers(1, 2, 3, 4, 5);

5. try-with-resources

try-with-resources 语句用于自动关闭资源，实现了 AutoCloseable 接口的资源会在语句结束时自动关闭。

try (BufferedReader br = new BufferedReader(new FileReader("file.txt"))) {

    System.out.println(br.readLine());

} catch (IOException e) {

    e.printStackTrace();

}

6. Lambda 表达式

Lambda 表达式是 Java 8 引入的特性，使得可以使用更简洁的语法来实现函数式接口（只有一个抽象方法的接口）。

List<String> list = Arrays.asList("a", "b", "c");

list.forEach(s -> System.out.println(s));

7. 方法引用

方法引用（Method References）是 Lambda 表达式的一种简写形式，用于直接引用已有的方法。

list.forEach(System.out::println);

8. 字符串连接

从 Java 5 开始，Java 编译器会将字符串的连接优化为 StringBuilder 操作。

String message = "Hello, " + "world!"; // 实际上是 new StringBuilder().append("Hello, ").append("world!").toString();

9. Switch 表达式

Java 12 引入的 Switch 表达式使得 Switch 语句更加简洁和灵活。

int day = 5;

String dayName = switch (day) {

    case 1 -> "Sunday";

    case 2 -> "Monday";

    case 3 -> "Tuesday";

    case 4 -> "Wednesday";

    case 5 -> "Thursday";

    case 6 -> "Friday";

    case 7 -> "Saturday";

    default -> "Invalid day";

};

10. 类型推断 (Type Inference)

Java 10 引入了局部变量类型推断，通过 var 关键字来声明变量，编译器会自动推断变量的类型。

var list = new ArrayList<String>();

list.add("Hello");

这些语法糖使得 Java 代码更加简洁和易读，但需要注意的是，它们并不会增加语言本身的功能，只是对已有功能的一种简化和封装。

总结

本文，我们介绍了 Java 语言中的一些语法糖，从上面的例子可以看出，Java 语法糖只是一些简化的语法，可以使代码更简洁易读，而本身并不增加新的功能。

学习交流

如果你觉得文章有帮助，请帮忙转发给更多的好友，或关注公众号：猿java，持续输出硬核文章。

效果

实现方式

两种方式均可以在SSR页面中使用

方式1:自定义指令实现

import Vue from 'vue';



const DISTANCE = 100; // y轴移动距离

const DURATION = 1000; // 动画持续时间

const THRESHOLD_FOR_TRIGGERING_ANIMATION = 0.1; // 当元素一部分可见时触发动画



const animationMap = new WeakMap();



function handleIntersection(entries, observer) { // IntersectionObserver 回调函数, 处理元素的可见性变化

  for (const entry of entries) { // 遍历所有观察目标

    if (entry.isIntersecting) { // 如果目标可见

      const animation = animationMap.get(entry.target); // 获取动画对象

      if (animation) {

        animation.play(); // 播放动画

      } else {

        // 如果不支持 Web Animations API，则使用 CSS 动画回退方案

        entry.target.classList.add('active');

      }

      observer.unobserve(entry.target); // 播放一次后停止监听

    }

  }

}



let ob;

if ('IntersectionObserver' in window) { // 如果浏览器支持 IntersectionObserver

  ob = new IntersectionObserver(handleIntersection, { // 创建 IntersectionObserver 对象

    threshold: THRESHOLD_FOR_TRIGGERING_ANIMATION // 当元素一部分可见时触发动画

  });

} else {

  // 回退机制：如果不支持 IntersectionObserver

  ob = {

    observe(el) { // IntersectionObserver 接口的 observe 方法

      el.__onScroll__ = () => { // 监听元素的滚动事件

        if (isInViewport(el)) { // 如果元素在视窗内

          const animation = animationMap.get(el); // 获取动画对象

          if (animation) {

            animation.play();

          } else {

            // 如果不支持 Web Animations API，则使用 CSS 动画回退方案

            el.classList.add('active');

          }

          window.removeEventListener('scroll', el.__onScroll__); // 停止监听

        }

      };

      window.addEventListener('scroll', el.__onScroll__); // 监听元素的滚动事件

    },

    unobserve(el) { // IntersectionObserver 接口的 unobserve 方法

      if (el.__onScroll__) { // 如果元素有滚动事件监听

        window.removeEventListener('scroll', el.__onScroll__); // 停止监听

        delete el.__onScroll__; // 清理引用

      }

    }

  };

}



function isBelowViewport(el) { // 判断元素是否在视窗下方

  const rect = el.getBoundingClientRect();

  return rect.top > window.innerHeight;

}



function isInViewport(el) { // 判断元素是否在视窗内

  const rect = el.getBoundingClientRect();

  return rect.top < window.innerHeight && rect.bottom > 0;

}



const directive = {

  name: 'slide-in',

  inserted(el, binding) { // 元素插入到 DOM 时触发

    if (!isBelowViewport(el)) {  // 如果元素在视窗下方，则不执行动画

      console.log('Element is not below viewport');

      return;

    }



    const duration = binding.value && binding.value.duration ? binding.value.duration : DURATION; // 动画持续时间

    const animationOptions = { // 动画选项: 目标位置、持续时间、缓动函数

      duration: duration,

      easing: binding.value && binding.value.easing ? binding.value.easing : 'ease'

    };



    // 检查是否支持 Web Animations API

    let animation;

    if (el.animate) { // 如果支持 Web Animations API

      animation = el.animate([ // 创建动画对象

        {

          transform: `translateY(${DISTANCE}px)`,

          opacity: 0.5

        },

        {

          transform: 'translateY(0)',

          opacity: 1

        }

      ], animationOptions);

      animation.pause(); // 初始化时暂停动画

      animationMap.set(el, animation); // 保存动画对象

    } else {

      // 如果不支持 Web Animations API，则添加 CSS 动画回退类

      el.classList.add('animate-fallback'); // animate-fallback在下面SCSS中有定义

    }



    ob.observe(el); // 开始监听元素的可见性变化

  },

  unbind(el) { // 元素从 DOM 中移除时触发

    ob.unobserve(el); // 停止监听元素的可见性变化

  }

};



Vue.directive(directive.name, directive);

注册指令

directives/index.js

import './slide-in' // 元素缓慢上升效果

main.js

import './directives'

在页面中使用

<template>

    <div class="boxs .scroll-container">

        <div class="slide-box" v-slide-in="{ duration: 500, easing: 'ease-in-out' }">0 - slide-directives</div>

        <div class="slide-box" v-slide-in>1 - slide-directives</div>

        <div class="slide-box" v-slide-in>2 - slide-directives</div>

        <div v-slide-in>3 - slide-directives</div>

        <div v-slide-in="{ duration: 500, easing: 'linear' }">4 - slide-directives</div>

        <div v-slide-in>5 - slide-directives</div>

        <div v-slide-in="{ duration: 500 }">6 - slide-directives</div>

    </div>

</template>

<style lang="scss" scoped>

.boxs {

    div {

        text-align: center;

        width: 800px;

        height: 300px;

        background-color: #f2f2f2;

        margin: 0 auto;

        margin-top: 20px;

    }

}



<!-- 兼容性处理（可放到全局style中） -->

.animate-fallback {

    opacity: 0;

    transform: translateY(100px);

    transition: transform 1s ease, opacity 1s ease;

}



.animate-fallback.active {

    opacity: 1;

    transform: translateY(0);

}



@keyframes slideIn {

    from {

        opacity: 0;

        transform: translateY(100px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.animate-fallback-keyframes {

    opacity: 0;

    animation: slideIn 1s ease forwards;

}

</style>

方式2: 封装为组件

<template>

  <div ref="animatedElement" :style="computedStyle">

    <slot></slot>

  </div>

</template>



<script>

export default {

  name: 'slideIn',

  props: {

    duration: { // 动画持续时间

      type: Number,

      default: 1000

    },

    easing: { // 动画缓动效果

      type: String,

      default: 'ease'

    },

    distance: { // 动画距离

      type: Number,

      default: 100

    }

  },

  data() {

    return {

      hasAnimated: false // 是否已经动画过

    }

  },

  computed: {

    computedStyle() {

      return {

        opacity: this.hasAnimated ? 1 : 0,

        transform: this.hasAnimated ? 'translateY(0)' : `translateY(${this.distance}px)`,

        transition: `transform ${this.duration}ms ${this.easing}, opacity ${this.duration}ms ${this.easing}`

      }

    }

  },

  mounted() {

    if (typeof window !== 'undefined' && 'IntersectionObserver' in window) { // 检测是否支持IntersectionObserver

      this.createObserver() // 创建IntersectionObserver

    } else {

      // 如果不支持IntersectionObserver，则使用scroll事件来实现动画

      this.observeScroll()

    }

  },

  methods: {

    createObserver() {

      const observer = new IntersectionObserver(entries => { // IntersectionObserver回调函数

        entries.forEach(entry => { // 遍历每个观察目标

          if (entry.isIntersecting && !this.hasAnimated) { // 如果目标进入视口并且没有动画过

            this.hasAnimated = true // 标记动画过

            observer.unobserve(entry.target) // 停止观察

          }

        })

      }, { threshold: 0.1 }) // 观察阈值，表示目标在视口的百分比

      observer.observe(this.$refs.animatedElement) // 观察目标

    },

    observeScroll() {

      const onScroll = () => { // scroll事件回调函数

        if (this.isInViewport(this.$refs.animatedElement) && !this.hasAnimated) { // 如果目标在视口并且没有动画过

          this.hasAnimated = true // 标记动画过

          window.removeEventListener('scroll', onScroll) // 停止监听scroll事件

        }

      }

      window.addEventListener('scroll', onScroll) // 监听scroll事件

    },

    isInViewport(el) { // 判断目标是否在视口

      const rect = el.getBoundingClientRect()

      return rect.top < window.innerHeight && rect.bottom > 0

    }

  }

}

</script>

页面使用

<div class="text-slide-in-vue">

      <slide-comp v-for="(s ,idx) in list" :key="idx">

        <p>{{ s.text }} - slide-comp</p>

      </slide-comp>

    </div>



<div class="level-slide">

  <slide-comp v-for="(s, idx) in list" :key="idx" :duration="500 * idx + 500">

    <p>{{ s.text }} - slide-comp</p>

  </slide-comp>

</div>



<style>

.text-slide-in-vue {

  p {

    text-align: center;

    width: 400px;

    height: 200px;

    background-color: goldenrod;

    margin: 0 auto;

    margin-top: 20px;

  }

}



.level-slide {

  display: flex;

  align-items: center;

  justify-content: flex-start;

  gap: 20px;

  p {

      text-align: center;

      width: 200px;

      height: 200px;

      background-color: blueviolet;

      margin: 0 auto;

      margin-top: 20px;

    }

}

</style>

2024年宏观环境肉眼可见地恶化之下，程序员等普通人如何度过这次危机？

如何度过危机？对于个人最优的方案，是郭嘉最不想看到的方案

对于普通人，度过危机最好的办法是 降低消费、降低负债和多存钱。对于郭嘉而言，这是最不想看到的行为。 个人的最优方案和郭嘉的最优方案是相反的。 在经济下行期，郭嘉和个人的利益不一致也很正常。（上行期当然一致了）

记住这一点，不要认为郭嘉都已经提倡了，就认为对自己是最好的，作为理智的成年人要有独立判断能力。

郭嘉希望大家多带款、多消费、少存钱，只有如此需求端提振后，经济才能复苏。但是对于个人而言，外部环境的危机让我们对未来充满不安全感，多带款、多消费、少存钱就是作死的行为……

非必要不要买房

在中国34个省市区和直辖市，我相信绝大部分城市的房产已经是垃圾资产，拿到手里就会成为传家宝，可能永远也卖不出去。

只有极少数一线城市和 优质地段、优质物业、优质小区质量的少量小区或者别墅区存在增值空间。参照日本的经验，经济泡沫破裂后，虽然人口快速向一线城市群东京和大阪聚集，但是东京的房价依然持续在下跌

记住下跌趋势不要抄底，宁可追高，绝不抄底！

务必远离股市，尤其是A股

这是我的炒股心路历程，虽然赚了钱，但是差一点点就倾家荡产，万劫不复

虽然炒股赚了十多万，但差点倾家荡产！劝你别入坑

2019年，我开始涉足股市，在2021年中旬为了购房，将持有的股票全部卖出，赚了十多万元。在最高峰时期，我获利超过了二十多万元，但后来又回吐了一部分利润。虽然我的炒股成绩不是最出色的，但也超过了很多人。因为大多数股民都是亏损的，能够在股市长期盈利的人真的是凤毛麟角。

股市中普遍流传的七亏二平一赚的说法并不只是传闻，事实上，现实中的比例更加残酷，能够长期赚钱的人可能连10%都达不到。

炒股就是赌博

我想告诉大家，无论你在股市赚了多少钱，迟早都会还回去，越炒股越上头，赚的越多越上头。

赌徒不是一天造成的，谁都有赢的时候，无论赚多少，最终都会因为人性的贪婪 走上赌徒的道路。迟早倾家荡产。

之前炒股的经历分享

虽然炒股赚了十多万，但差点倾家荡产！劝你别入坑

多存钱，降低杠杆和负债率

虽然存钱的利率不到2%，但是总比亏本强很多啊，要明白现在中国的经济困境是 经济通缩，什么意思呢？就是各种工业品都在降价（例如汽车一直在降价），未来的钱更加值钱，所以利率低，希望大家赶紧花出去。

经济通胀的时候，物价在飞速上涨，虽然利率高，但是物价涨得更高，钱越来越不值钱，所以银行希望大家都去存钱。

记住银行希望你干什么，大概率对你是不好的。 银行赚的就是你的钱~

现在越是利率低，越是要存在银行这样才保险。 如果你的路子特别野，可以考虑将资产转成美元或港币，这两种货币的存款利率更加高，可以达到4%+

有房贷的提前还房贷

存量房贷的利率比存款利率高了将近3%， 100万的带款，每年就多3万元的利息，长达30年，将近五六十万元的利差，千万不可小觑。

但是银行会有各种手段限制大家提前还房贷。归根结底，经济下行期，银行的利益和个人的利益是对立的~

第一次提前还房贷，就尝到了甜头，使用6万块钱，起到了18万的效果

我在工行App上，申请 提前还贷，选择缩短 18个月的房贷，只需要 6万2，而我每个月房贷才1万，相当于是用 6 万 顶 18 万的房贷。还有比这更划算的事情吗？

提前还房贷的经历

买房后，害怕失业，更不敢裸辞，心情不好就提前还房贷，缓解焦虑

对于房奴而言，提前还房贷就是最好的投资方式，没有之一，就是最好的投资方式。

欲买桂花同载酒，人生要及时行乐

虽然推荐大家降低消费，但是不建议大家为了省钱，牺牲青春。

100块钱对于一个10岁孩子的快乐，和对于30岁成年人的快乐是完全不对等的。

小时候有10块钱，够我买三四个玩具，可以和小伙伴开开心心的玩一个暑假。现在我有1000张10块钱，也找不回儿时的快乐。

人活着是为了享受人生的，不是为了受罪来的。建议大家 可持续性的及时行乐，该玩还是要玩。不要老了感慨道：欲买桂花同载酒，终不似，少年游

好好学习，提高自己，度过危机期，遍地是机会

经济危机过后，资产的价格一定一落千丈，各行各业都非常萧条，但是随着需求复苏，这意味着遍地都是机会。前提是你有发现机会的眼光、抓住机会的能力和勇于行动的魄力。

想一想，危机过后，我们手握大量的现金，面对遍地的廉价资产，面对日渐热情的消费需求，再加上更加成熟强大的自我，一定大有可为。 前提是好好存钱，好好积累提高自己。（如何判断危机过去，是一门学问，不要太冲动）

要想做到这一切，一定要注重低谷期、危机期的积累。

祝各位长期有耐心，把未来的信心全部放在投资自己上，不要把未来的信心投资在股票和、产和奢侈消费上哦~

祝未来的大家纵情四海、前途似锦

2024 七夕随笔