每日技术总结:setInterval,setTimeout,文本溢出,小程序,wepy
前言:
项目背景: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() 方法用于在指定的毫秒数后调用函数或计算表达式
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的更多相关文章
- 微信小程序wepy开发循环wx:for需要注意
微信小程序wepy开发循环wx:for需要注意 item index值必须在wx:for之后使用 <view wx:for="{{tablist}}" class=" ...
- 小程序--wepy省市区三级联动选择
产品老哥对项目再一次进行关爱, 新增页面, 新增需求, 很完美........ 不多说, 记录一下新增东西中的省市区联动选择, (这里全国地区信息是在本地, 但不建议这么做, 因为js文件太大.. 建 ...
- [技术博客]海报图片生成——小程序canvas画布
目录 背景介绍 canvas简介 代码实现 难点讲解 圆角矩形裁剪失败之PS的妙用 编码不要过硬 对过长的文字进行截取 真机首次生成时字体不对 drawImage只能使用本地图片 背景介绍 目标:利用 ...
- 小程序wepy.js框架总结
wepy.js借鉴了Vue的语法风格和功能特性,对官方提供的框架进行了封装,更贴近于MVVM架构模式,让开发者更加容易上手,增加开发效率.(脏数据处理--是否有标识.是否有响应) 前端开发的对组件化开 ...
- 小程序(Wepy)--生成海报图片
对于小程序的分享, 除了分享给朋友, 好友群,是可以直接做到的, 但是要想扩大推广范围, 通过生成海报图片, 将自己小程序码带进去,应该是目前我所知的好办法了. 但是海报也不是那么好搞.之前自己手写出 ...
- 小程序 wepy框架 + iview-weapp的用法
最近在弄wepy的时候在想有没有什么ui比较合适一点的wepy的,也是在网上看了好久发现iview还不错.引用简单,上手超快,组件绚丽!当然,这里还介绍下微信官方建议的框架也是和不错的,有需要的可以看 ...
- 微信小程序wepy框架开发资源汇总
开源项目 wepy-wechat-demo:基于wepy开发的仿微信聊天界面小程序 深大的树洞:基于wepy开发的树洞类微信小程序 wepy-demo-bookmall:微信小程序
- 微信小程序 + wepy快速开发
wepy官网:https://tencent.github.io/wepy/document.html,想要了解全面最好去官网,以下只是指出项目里常用地方. 1.页面跳转 (1)//有返回跳转wepy ...
- AngularJS设置文本样式小程序
做了一个这样的程序通过选择框选择样式,下面的段落样式跟着改变.就是想做这么一个东西. <!DOCTYPE html> <html lang="en"> &l ...
随机推荐
- QT就是别人好心帮你做一些枯燥,并且很重复的代码编写工作,让你更好的把精力投入到你界面的逻辑和功能的实现的功能库(否则写了上万行代码了,才写出个BUG一大堆的毛坯)
好了,现在开始记录我学习QT的学习历程 . 本人也不是计算机专业出来的,自学了一点,但还是不好找工作,于是参加了培训,虽然感觉没多学到什么 编程的学习生涯就是不断的看别人的源码,然后自己参考着写写自己 ...
- 基于Linux平台的Lotus Domino 8系统部署五部曲(全视频展示)
基于Linux平台的Lotus Domino 8系统部署五部曲(全视频展示),学习就像看电影 第一部:安装部署 第二部:配置Domino 第三部:Notes8客户端配置 第四部:为Domino系统加装 ...
- Autoencoders and Sparsity(二)
In this problem set, you will implement the sparse autoencoder algorithm, and show how it discovers ...
- 【习题 8-12 UVA - 1153】Keep the Customer Satisfied
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 结束时间比较早的,就早点开始做. 所以,将n件事情,按照结束时间升序排. 然后对于第i件事情. 尽量把它往左排. 即t+1..t+a ...
- Git管理软件
软件下载地址 首先下载库 https://code.google.com/p/msysgit/ 接着安装 https://code.google.com/p/tortoisegit/ 然后就能够用了
- Hibernate中编程式事物的简单使用
一,openSessioin方式开启或者关闭事物 Session session = null; try { session = HibernateUtils.getSession(); sessio ...
- Dcloud课程8 开心一刻应用如何实现
Dcloud课程8 开心一刻应用如何实现 一.总结 一句话总结:app就是远程调用接口获得数据,我们在后台要做的,就是写一个个让页面获得接口的数据.这里用的是公共笑话接口. 1.ajax返回给页面的h ...
- BIND View 加速南北方网络互访
BIND View 加速南北方网络互访 南北方网络互访的问题一直以来就是广大运维人员的心病,两大网络运营商之间的连接带宽比较有限,跟不上互联网业务发展的速度.如何才能 ...
- react实战项目-很适合进阶
前言 前段时间学习完了React的基础,自己网上找了一些实战项目,做了几个感觉项目不是很全面,就想做一个完整的项目来提升自己的React水平.以前学习Vue的时候,就看过bailicangdu大神的v ...
- 洛谷 P1218 [USACO1.5]特殊的质数肋骨 Superprime Rib
P1218 [USACO1.5]特殊的质数肋骨 Superprime Rib 题目描述 农民约翰的母牛总是产生最好的肋骨.你能通过农民约翰和美国农业部标记在每根肋骨上的数字认出它们.农民约翰确定他卖给 ...