1. 将内容垂直水平分布
.container{ display:flex; flex-direction:column; align-items:center; }
让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容: #main div {flex:1;}
微信小程序 文字自动换行在wxss中添加 : word-break:break-all; 即可
2. div和img之间的缝隙问题
这次做的项目,客户说,banner图的上下之间不要留有空隙,仔细一看才发现,上下竟然都有空隙。审查元素,发现所有的div,img的padding和margin都是0,对于这个间隙究竟是如果产生的真的是找不到原因。 网上查了一下,类似的问题还蛮多的。
解决方法基本是四种: 1.将img设置为block; 这个基本可以解决img和div下方的缝隙问题。 2.设置img的竖直对齐方式 v-align:bottom; 3.设置父div的font-size:0 4.设置外层的div的line-height:0
推荐使用第一种方式。 但是本次项目奇怪的地方在于上下皆有缝隙,开始时,上面的缝隙可以通过margin-top:-10px解决。但是后来改了代码结构后,此方式也不行。网上找了很多,亦没有解决方式。
因此采用定位的方式解决: 设置父元素的position为relative 子元素img的position为absolute;设置top为0,完美解决此问题。 为了避免影响其他布局,设置下div的高度为img的高度。
4.微信小程序 实现动态显示和隐藏某个控件
在小程序的开发过程中,经常需要用到隐藏某个控件这种情况。
因为项目原本是需要将两个canvas切换,但是小程序的canvas支持的功能实在是少,本来就jQuery mobile或者将canvas转为图片就可以很容易实现滑动效果,但是都不支持,最后只能是做一个canvas,需要时显示,不需要时隐藏。
实现方法:
logs.wxml {{showView?'Click To Check IdleReason':'Click To Check MTStatus'}}
logs.js Page({ data: { showView: true }, onLoad: function (options) { // 生命周期函数--监听页面加载 showView: (options.showView == "true" ? true : false) } , onChangeShowState: function () { var that = this; that.setData({ showView: (!that.data.showView) }) }, })
logs.wxss .bright789_view_hide{ display: none; } .bright789_view_show{ display: block; }
从上面三个页面的文件可以很明显看出逻辑:logs.wxml的onChangeShowState按钮会在logs.js中触发一个事件,它会改变showView的值,而在logs.wxml中会根据showView的值确定画布canvas的class属性,而在logs.wxss中具体再设置两个class属性哪个是否显示
5.数组对象splice方法:arr.splice(1,1);
这种方式数组长度相应改变,但是原来的数组索引也相应改变 splice参数中第一个1,是删除的起始索引(从0算起),在此是数组第二个元素 第二个1,是删除元素的个数,在此只删除一个元素,即'b'; 此时遍历数组元素可以用普通遍历数组的方式,比如for,因为删除的元素在 数组中并不保留
- 该方法IE5.5以后才支持
值得一提的是splice方法在删除数组元素的同时,还可以新增入数组元素 比如arr.splice(1,1,'d','e'),d,e两个元素就被加入数组arr了 结果数组变成arr:'a','d','e','c'
js只保留整数,向上取整,四舍五入,向下取整等函数 1.丢弃小数部分,保留整数部分 parseInt(5/2)
2.向上取整,有小数就整数部分加1 Math.ceil(5/2)
3,四舍五入. Math.round(5/2)
4,向下取整 Math.floor(5/2)
Math 对象的方法 方法 描述 abs(x) 返回数的绝对值 acos(x) 返回数的反余弦值 asin(x) 返回数的反正弦值 atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值 atan2(y,x) 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间) ceil(x) 对一个数进行上舍入。 cos(x) 返回数的余弦 exp(x) 返回 e 的指数。 floor(x) 对一个数进行下舍入。 log(x) 返回数的自然对数(底为e) max(x,y) 返回 x 和 y 中的最高值 min(x,y) 返回 x 和 y 中的最低值 pow(x,y) 返回 x 的 y 次幂 random() 返回 0 ~ 1 之间的随机数 round(x) 把一个数四舍五入为最接近的整数 sin(x) 返回数的正弦 sqrt(x) 返回数的平方根 tan(x) 返回一个角的正切 toSource() 代表对象的源代码 valueOf() 返回一个 Math 对象的原始值