2.事件绑定、样式

1.事件绑定

 

bindinput  双向绑定

• 需要给input标签绑定 input事件 绑定关键字 bindinput 
• 输入框的值 通过事件源对象来获取 e.detail.value
• 把输入框的值 赋值到data当中 ：
• this.setData({ e.detail.value }) ;

 

bindtap  点击事件

 

• 无法在小程序 事件中 直接传参，通过自定义属性的方式来传递参数（data-名称 =“{{传参}}”）
• 事件源中获取 自定义属性

 

2.样式（不用主动引入样式文件）

 

　　样式rpx

• 把页面的某些元素的单位 由px改成rpx
• 设计稿 750px，  750px = 750rpx ，1px = 1rpx
• 吧屏幕宽度 改成 375px， 1px = 2rpx ，1rpx = 0.5px

   

 

 一个设计稿 宽度 或者未知 page：

             1.设计稿存在一个元素 宽度100px

             2.拿以上的需求去实现不同宽度的页面的适配

 

　　　　page px = 750rpx

　　　　1px =750rpx / page

　　　　100px =750rpx*100 / page

　　　　假设 page = 375 px

 

　　　　3.利用 calc属性， css 和 wxss 都支持一个属性。

 

　　　　width：calc(750rpx*100/375);  (750 和 rpx中间不要留空格，运算符两边不要留空格)

 

 　样式导入

       

　　通过@import引入，路径只能是相对路径，'@import  "../../css/comm.wxss"'

 

3.选择器和使用less

 

小程序不支持通配符" * "，原生小程序不支持less

 

原生小程序支持less的方法：

1. 编辑器 vscode
2. 安装插件 easy less
3. 在vs code的设置中加入

 

"less.compile":{
    "outExt":  ".wxss"
}

    

4. 在编写样式的地方，新建less文件，如index.html,然后正常编辑即可

 

在less中导入less，'@import  "../../css/comm.less"'