前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

小程序开发之居中、视频播放组件暂停优化、圆角、文本超出省略

1、多行文本水平居中:利用display: table属性

#container{

 width: 600px;

 height: 300px;

 border: 1px solid black;

 display: table;

}

#text{

 display: table-cell;

 vertical-align:middle;

 text-align: center;

}

2、微信小程序中view中的text标签居中

display:flex;

align-items:center;

justify-content:center;

3、missing space before opening brace: eslint的规则,意为大括号前丢失空格。

4、组件内无法执行uni-app的暂停视频播放

const curr = e.detail.current;

 // 暂停播放curr 的上一个及一个视频

 if ((curr - 1) >= 0) {

 const temp = 'myVideo' + (curr - 1);

 this.myvideo = uni.createVideoContext(temp, this);

 this.myvideo.pause();

 }

 if ((curr + 1) <= this.videoUrls.length - 1) {

 const temp = 'myVideo' + (curr + 1);

 this.myvideo = uni.createVideoContext(temp, this);

 this.myvideo.pause();

 }

5、Trailing spaces not allowed:警告代码后面有多余的空格导致的,删除空格即可。

6、css3 只给左上,右上,左下,右下设置圆角属性

-webkit-border-top-left-radius: 4px;  

-webkit-border-top-right-radius: 4px; 

-webkit-border-bottom-left-radius:4px;

-webkit-border-bottom-right-radius:4px;

7、小程序文本超出省略:

display: inline-block; /*设置为弹性盒子*/

 overflow:hidden; //超出一行文字自动隐藏

 text-overflow:ellipsis;//文字隐藏后添加省略号

 white-space:nowrap; //强制不换行

overflow: hidden;/*超出隐藏*/ 

display: -webkit-box; /*设置为弹性盒子*/

 -webkit-line-clamp: 3; /*最多显示x行*/

 text-overflow: ellipsis; /*超出显示为省略号*/ 

-webkit-box-orient: vertical;

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言