前言:

项目背景: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上,我们永远不可能让所有的人满意。但是,我们会让产品越来越美,符合甚至引导当前用户的审美,而不是落伍于时代。”

每日技术总结:setInterval,setTimeout,文本溢出,小程序,wepy的更多相关文章

  1. 微信小程序wepy开发循环wx:for需要注意

    微信小程序wepy开发循环wx:for需要注意 item index值必须在wx:for之后使用 <view wx:for="{{tablist}}" class=" ...

  2. 小程序--wepy省市区三级联动选择

    产品老哥对项目再一次进行关爱, 新增页面, 新增需求, 很完美........ 不多说, 记录一下新增东西中的省市区联动选择, (这里全国地区信息是在本地, 但不建议这么做, 因为js文件太大.. 建 ...

  3. [技术博客]海报图片生成——小程序canvas画布

    目录 背景介绍 canvas简介 代码实现 难点讲解 圆角矩形裁剪失败之PS的妙用 编码不要过硬 对过长的文字进行截取 真机首次生成时字体不对 drawImage只能使用本地图片 背景介绍 目标:利用 ...

  4. 小程序wepy.js框架总结

    wepy.js借鉴了Vue的语法风格和功能特性,对官方提供的框架进行了封装,更贴近于MVVM架构模式,让开发者更加容易上手,增加开发效率.(脏数据处理--是否有标识.是否有响应) 前端开发的对组件化开 ...

  5. 小程序(Wepy)--生成海报图片

    对于小程序的分享, 除了分享给朋友, 好友群,是可以直接做到的, 但是要想扩大推广范围, 通过生成海报图片, 将自己小程序码带进去,应该是目前我所知的好办法了. 但是海报也不是那么好搞.之前自己手写出 ...

  6. 小程序 wepy框架 + iview-weapp的用法

    最近在弄wepy的时候在想有没有什么ui比较合适一点的wepy的,也是在网上看了好久发现iview还不错.引用简单,上手超快,组件绚丽!当然,这里还介绍下微信官方建议的框架也是和不错的,有需要的可以看 ...

  7. 微信小程序wepy框架开发资源汇总

    开源项目 wepy-wechat-demo:基于wepy开发的仿微信聊天界面小程序 深大的树洞:基于wepy开发的树洞类微信小程序 wepy-demo-bookmall:微信小程序

  8. 微信小程序 + wepy快速开发

    wepy官网:https://tencent.github.io/wepy/document.html,想要了解全面最好去官网,以下只是指出项目里常用地方. 1.页面跳转 (1)//有返回跳转wepy ...

  9. AngularJS设置文本样式小程序

    做了一个这样的程序通过选择框选择样式,下面的段落样式跟着改变.就是想做这么一个东西. <!DOCTYPE html> <html lang="en"> &l ...

随机推荐

  1. vim 基础学习之替换

    替换命令substitute可以用来查找跟替换操作. :[range]s[ubstitute]/{pattern}/{string}/[flags] [count] range-命令作用范围(缺省的情 ...

  2. 关于exports 和 module.exports

    本文来源为node.js社区附上链接 http://cnodejs.org/topic/5231a630101e574521e45ef8 require 用来加载代码,而 exports 和 modu ...

  3. #学习笔记#——JavaScript 数组部分编程(三)

    3.在数组 arr 末尾添加元素 item.不要直接修改数组 arr,结果返回新的数组 主要考察数组的concat方法,代码如下: arr.concat(item); concat 方法不修改原数组. ...

  4. UVA 12075 Counting Triangles

    https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...

  5. 请求头header里的contentType为application/json和capplition/x-www-form-urlencoded

    application/x-www-form-urlencoded 最常见的 POST 提交数据的方式了.浏览器的原生 <form> 表单,如果不设置 enctype 属性,那么最终就会以 ...

  6. 在Xampp中添加memache扩展

    1.首先下载phpmemcache,地址为: http://up.2cto.com/2012/0522/20120522094758371.rar 解压下的文件,解压后有以下文件: 接着以管理员身份打 ...

  7. 负载均衡之lvs

    集群(cluster):将一组计算机软/硬件连接起来,高度紧密的协作完成计算工作,其中的单个计算机通常称为节点.负载均衡集群(Load Balancing):通过负载均衡器,将负载尽可能平均分摊处理. ...

  8. STM32之串口IAP更新升级

    一.IAP简介 IAP是应用编程,目的是为了在产品发布后可以方便地通过预留的通信口对产品中的固件程序进行更新升级,后续产品发布后,更新程序我只需要把.bin文件通过串口发送给芯片就可以执行更 新,很方 ...

  9. jquery的图片轮播 模板类型

    先说一下用到的几个重要的事件 j jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) ...

  10. Day4晚笔记

    数据结构 并查集:捆绑两个点的信息,判断对错 倍增:LCA, 字符串 hash,模拟, 最小表示法 给定一个环状字符串,切开,使得字符串的字典序最小 图和树 割点,割边,强联通分量 点双联通分量 (把 ...