web学习笔记（七十六）

1.wxss和css的区别

2.wxss通过less来编写代码

3.小程序实现下拉刷新的操作

4.定义变量的技巧

5.小程序实现触底加载的操作

1.wxss和css的区别

在wxss中为了做适配我们引入了一个新的计量单位rpx,和vue的适配差不多，将整个屏幕分为750份，1rpx就是一份的大小。
小程序支持样式导入操作，使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
```
@import "../..//static/common/common.wxss";
```
在wxss中没有*号选择器
在wxss中局部样式会覆盖全局样式

2.wxss通过less来编写代码

通过less我们可以实现样式嵌套，在小程序中想要通过less来编写代码需要使用Esat LESS插件来完成操作。

我们需要修改一下这个插件的配置，因为这个插件默认是把css实现less，而我们现在是需要wxss实现less。

在管理扩展的.json文件中将下列代码复制进去即可：

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

然后在使用时我们需要先将页面自动生成的对应.wxss文件删除，然后创建同名的.less文件，在.less文件中编写相关样式，编写完代码进行保存时插件会自动再次生成.less文件，当我们上线小程序时需要删除.less文件（温馨提示：可以自己将这个.less文件进行备份，防止后面需要修改样式）

3.小程序实现下拉刷新的操作

在小程序中可以通过在全局配置的window中开启下拉刷新配置来实现下拉刷新的操作，也可以给某个页面单独实现下拉刷新的效果，

 "enablePullDownRefresh": true,

我们可以通过设置navigationBar的相关配置来完善下拉刷新的样式。

  "window": {"navigationBarTextStyle": "white","navigationBarTitleText": "这里是导航条","navigationBarBackgroundColor": "#999","enablePullDownRefresh": true,"backgroundColor": "#000","backgroundTextStyle": "dark"},

此时我们可以在子页面的.js文件中配置 onPullDownRefresh方法，这个方法是在该子页面执行下拉刷新时触发的事件，需要注意的时这个方法是写在单独的子页面中，由Page实例包裹的，千万不能写在app.js中。

  async onPullDownRefresh() {// 开启提醒wx.showLoading({title: "刷新中",});console.log("下拉刷新");// 调用方法获取数据await this.getMoredata();// 数据得到之后，需要关闭下拉刷新动作wx.stopPullDownRefresh();// 停止提醒wx.hideLoading();},

4.定义变量的技巧

（1）定义在data内部：在这里定义一个响应式数据，此处数据的更新是合并更新。

（2）定义在data的外部：此处的数据不是响应式数据，但是当我们发送请求时需要的页码等变量并不需要响应式数据，此时就可以将数据声明在data外部。

  data: {count: 1, //这个数据后面赋什么值，初始值就是什么类型。users: [{ name: "小张", age: 20 },{ name: "小刘", age: 24 },{ name: "小赵", age: 23 },],},page: 1,//在data外部定义的数据相当于一个普通的类，直接用this打点就可以操作，不是响应式，不需要this.setData来操作。