2018年03月_Syleapn

原创小程序的text-overflow

text-overflow原本是CSS3的一个属性。在微信小程序中也支持。下面我们一步步的进行~text-overflow文本溢出显示省略号~注：使用text-overflow时，需要设置固定的宽度才起作用，所以该元素必须具有块状元素的属性（款装元素+行内块状元素）1、一行文本溢出显示省略号 overflow: hidden; white-space:nowrap; text-overf...

2018-03-27 14:49:54 8047

原创 border-radius的一种经典使用(上凸边框）

对于border-radius，大家应该都很熟悉->为元素添加圆边框。所以，此处不在讲解border-radius的语法，不懂的戳这里，http://www.w3school.com.cn/cssref/pr_border-radius.aspw3cschool讲的很详细~下面我就利用border-radius添加圆边框这个功能实现以下效果-》向上凸出的弧线（红色线）-》此效果利...

2018-03-22 17:22:30 3271

在微信小程序中，轮播图上的小圆点默认样式为黑灰色，这在视觉体验上不是很惊艳眼球，有时达不到我们的需求。那么，怎样进行默认样式的改变呢？需要准备的东西：3张图片（swiper1,swiper2,swiper3）~为了方便大家理解代码以及本地图片的引入，这里把我的文件结构也show~一、方法1采用官方提供的swiper属性(indicator-color与indicator-active-color)...

2018-03-19 18:13:18 36566 7

原创小程序中textarea字数限制与计算

不管做什么类型的项目，几乎都会碰到评论框。正好也是项目需要，就顺便来总结总结：在以往的前端中，大家都知道很容易实现。那么，在小程序中，如何去实现它呢？其实，只要你仔细看了官方文档https://mp.weixin.qq.com/debug/wxadoc/dev/component/textarea.html也很容易，思路如下：1、在textarea中绑定bindinput事件。2、通过var va...

2018-03-19 14:33:17 16558 1

转载 display:none和visibility:hidden的区别

转载自新浪博客->最初的你,文章地址：http://blog.sina.com.cn/s/blog_51048da7010185io.htmlvisibility和display两个属性都有隐藏元素的功能，display:none和visibility:hidden的区别，简单的总结一句话就是：visibility:hidden隐藏，但在浏览时保留位置；而display:none视为不存在，...

2018-03-17 15:30:55 1108

转载详解Html替换元素与非替换元素

前部分转载自：详解HTML行内置换元素与非置换元素的区分一般情况下，行内元素只能包含数据和其他行内元素，除非你可以对css进行更改，那就可以另说了。而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。以上只是个大概的说法，具体都某些特定的元素这条规律不一定适用~通常我们的认识是这样的：一、行内元素b, big, i, small,...

2018-03-16 20:24:24 3797 2

转载视觉格式化模型中的各种框

首先，感谢博主doyeo（CSS探索之旅）！转载自doyeo（CSS探索之旅）的视觉格式化模型中的各种框，具体戳这里->视觉格式化模型中的各种框在聊这个话题之前，我们可能得先简单说说视觉格式化模型这个概念。视觉格式化模型的全称是 Visual formatting model，它被用来描述用户代理（比如浏览器）在图形媒体下如何处理文档树。在视觉格式化模型中，每个文档树的元素会根据框...

2018-03-16 15:17:12 943

转载微信小程序 wx:key

原作者：哈尔滨的酸柠檬转载自：http://blog.csdn.net/sinat_31177681/article/details/53557642在实际开发过程中遇到 warning： Now you can provide attr "wx:key" for a "wx:for" to improve performance.上网查找资料与查看官方文档发现原因大致如下：官方解释：wx:key...

2018-03-16 10:35:04 740

转载 CSS进阶系列一（flex布局基础知识——介绍、规范、主要思想、专业术语）

首先，感谢博主的总结，转载自微信小程序club茂茂，地址：http://www.wxappclub.com/topic/735下面正式：一、介绍flex是flexible box的缩写，意为弹性布局。flexible box是CSS3新增加的，用来为盒模型提供最大的灵活性。 1.flex旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。...

2018-03-15 10:30:58 555

原创微信小程序点击控件修改样式

通常，页面呈现的效果，我们直接在css中进行，可是有时我们需要进行通过一系列操作比如点击后，要使得样式进行改变。我们知道微信小程序也可以使用一些伪类进行这类操作样式的改变，比如hover等。毕竟小程序是基于数据驱动的，也为了便于后续修改与维护，我们利用数据绑定来实现它。******第一种方法******one->进行布局wxml：<view class="mn">点击样式改变&l...

2018-03-14 17:20:39 19450 3

原创微信小程序中遮罩层的实现

近期在写一点小东西，碰到遮罩层，今天把它总结下来，方便大家共同学习：有好几种方法，今天先来第一种。准备工作：一张图片：close.png一、方法1先上效果：点击“核算”以后，遮罩层出现，同时conts（即面板）出现。再次点击“核算”或conts右上角的关闭按钮时，遮罩层消失，conts隐藏。源码：wxml代码<vi...

2018-03-13 20:40:34 38259 5

原创微信小程序中多个相同的组件点击时当前样式的改变

第一次用CSDN写博客，以前的是新浪博客，地址为：http://blog.sina.com.cn/99yt99 以后一直就用CSDN，新浪上面就不更新了。1、需要的东西一张透明背景的图片：proper.png 2、效果展示默认选中与样式改变的为“距离优先”，当然自己可以在ceshi.js中改变自己想默认的那个。通过点击切换改变样式）3、源码：wxml代码<view class...

2018-03-12 14:46:31 16964 5

Syleapn的博客