微信小程序Ⅷ [WXSS 小知识积累]

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/80454100

♩. 前言

  • 微信小程序,作为一个前端为主的语言,涉及到的页面布局自然跟 HTMLCSS 有很大的耦合性
  • 此处作为日常的小知识积累

不定期,补充更新

♫. 积累

①. CSS3 Filter的十种特效

  • 通常来讲:Filters 主要是运用在图片上,以实现一些特效,使用这些简单的属性设置可以达到很好的视觉体验

其默认值是 none,他不具备继承性,其中 filter-function 一个具有以下值可选:

    grayscale 灰度
    sepia 褐色(求专业指点翻译)
    saturate 饱和度
    hue-rotate 色相旋转
    invert 反色
    opacity 透明度
    brightness 亮度
    contrast 对比度
    blur 模糊
    drop-shadow 阴影

②. ES6,你真的知道吗???

  • ECMAScript6(简称ES6)是 JavaScript 语言的下一代标准
  • 2015年6月 正式发布,所以又称 ES2015
  • 由于目前并不是所有浏览器都能兼容 ES6 全部特性,但是 ES6 在实际项目中的广泛使用已成为一种趋势,所以作为一个前端开发者,ES6 的语法是我们必须掌握的
作者:
链接:https://www.imooc.com/article/details/id/19684#
来源:慕课网

③. import 使用

 //使用举例,其中的 Movie.js 是一个ES6 实现的类
 import { Movie } from '../../../class/Movie.js';
  • js 文件中,使用 import 关键字,个人测试发现,要用相对路径才会生效,不然会有如下的报错:

④. 地址三级联动

⑤. 图片上传、删除、预览

⑥. open-data userAvatarUrl 头像做圆角

首先,你测试会发现这样一点:小程序open-data中的头像,我们是不能对其做圆角之类的处理

  • 其中,我的前端代码为 :
    <view class='userimg'>
        <open-data class="open-data-class" type="userAvatarUrl"></open-data>
    </view>
  • 则样式代码如下:
.open-data-class {
    width: 160rpx;
    height: 160rpx; 
    display:block; 
    overflow:hidden; 
    border-radius: 50%;
}
  • 然后对于整体的布局,可自行调整即可,个人局部效果如下:

⑦. 小程序显示富文本

  • 注意,这也是个重点,毕竟我们多数的后台对于文章内容啥的,都是用UEditor等编辑器生成的富文本内容,所以,在小程序页面上更要很好的适配显示
  • 微信小程序之HTML富文本解析

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯社交用户体验设计

Demoo使用秘籍,比好用更好用 - 腾讯ISUX

20840
来自专栏数据小魔方

数据透视表多表合并

今天跟大家分享有关数据透视表多表合并的技巧! 利用数据透视表进行多表合并大体上分为两种情况: 跨表合并(多个表在同一工作薄内) 跨工作薄合并(多个表分别在不同...

1.1K40
来自专栏程序员的碎碎念

【分享】Vue.js新手入门指南

最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学...

46130
来自专栏前端杂货铺

关于首屏时间采集自动化的解决方案

关于首屏 首屏时间是指从转向该页面到屏幕中该页面所有内容都可见时的时间。已经有太多的关于首屏时间的计算,在本文中并不重复阐述这些已经被提出或者实现的方案,而旨...

76670
来自专栏Material Design组件

Human Interface Guidelines —— Alerts

38580
来自专栏iOS技术

iOS图片浏览器(功能强大/性能优越)

支持 cocopods,功能完善,性能不错,代码质量尚可,喜欢的朋友可以给个小星星?。

65370
来自专栏tkokof 的技术,小趣及杂念

Dev-C++,Time to say goodbye ?(更新2012-02-04)

  记得在那段很久以前的学生时代,自己曾经很反感Visual Studio的过度臃肿,再加上当时学校的实验PC陈腐老旧:经常假死的Windows 2000,外加...

14820
来自专栏理论坞

UI(用户界面)设计规则和规范

界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作,起到向导的作用。同时界面如同人的面孔,具...

30430
来自专栏我有一个梦想

UE4新手编程之创建C++项目

 虚幻4中常用的按键和快捷键 虚幻4中有一些按键和快捷键很常用,牢记它们并运动到实际的项目开发中,将会大大地提高你的工作效率和使得工作更简便快捷。下面将列举它们...

31260
来自专栏程序员的知识天地

2018前端工程师成长路线图

成为前端工程师,第一步应该是学习HTML/CSS/JavaScript,这是基础。

43520

扫码关注云+社区

领取腾讯云代金券