每日技术总结:setInterval,setTimeout,文本溢出,小程序,wepy

时间:2024-01-19 17:09:22

前言:

项目背景:vue,电商,商品详情页


1.倒计时,倒计到0秒时停止

  data () {
return {
n: 10
}
},
created () {
let int = setInterval(() => {
this.n--
}, 1000)
let timer = setTimeout(() => {
clearInterval(int)
}, this.n * 1000)
}

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式

参考文档:HTML DOM setInterval() 方法

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式

参考文档:HTML DOM setTimeout() 方法

2.文本限制溢出省略,单行文本限制,多行文本限制等问题

(1)单行文本溢出

.ellipsis{
overflow: hidden;
text-overflow:ellipsis; //文本溢出显示省略号
white-space:nowrap; //文本不会换行(单行文本溢出)
width:130px; // 固定宽度
}

(2)多行文本溢出

.mult_line_ellipsis{
overflow: hidden;
text-overflow:ellipsis;//文本溢出显示省略号
display: -webkit-box;
-webkit-line-clamp:;
-webkit-box-orient: vertical;
width:130px;
}

参考文章: CSS文本溢出显示省略号

3.使用wepy开发小程序

小程序开发文档: https://developers.weixin.qq.com/miniprogram/dev/

wepy官方文档:微信小程序组件化开发框架WePY官方文档

结尾附上一段张小龙说的话:

“产品需要适应这个时代,而不是说我们的用户抱怨,就不去改变它了。尤其是UI上,我们永远不可能让所有的人满意。但是,我们会让产品越来越美,符合甚至引导当前用户的审美,而不是落伍于时代。”