微信小程序开发-02

前言

学习课程来自CSDN 1_bit

https://blog.csdn.net/a757291228/category_11488917.html

尺寸单位rpx和px的区别

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。

如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx

1rem相当于屏幕大小的1/20，1rpx相当于屏幕的1/750。

flex-direction

flex-direction: row;

默认值。灵活的项目将水平显示，正如一个行一样。

flex-direction: row-reverse;

与 row 相同，但是以相反的顺序。

flex-direction: column;

灵活的项目将垂直显示，正如一个列一样。

flex-direction: column-reverse;

与 column 相同，但是以相反的顺序。

flex-direction: initial;

设置该属性为它的默认值。

flex-direction: inherit;

从父元素继承该属性。

小程序：wx:for里面的item，index。以及自定义属性data-xxx的用法（双层循环取下标）。

通俗来说，

wx:for 这个是正常的循环，没什么可说的。

wx:for-item=‘变量名（随便起）’ 它是指定循环数据当前的变量名，可以通过 {undefined{变量名.属性}} 展示数组的元素。

wx:for-index=‘变量名（随便起）’ 它是指向当前元素的下标名，可以在其他事件中定义自定义事件（data-xxx='{undefined{变量名}}'，，该自定义属性可以在参数e下面打印出来）获取该下标。