web学习笔记（七十六）

shan33__

已于 2024-07-10 19:49:01 修改

阅读量435

点赞数 4

分类专栏：笔记文章标签：前端学习笔记 javascript 微信小程序

于 2024-07-04 19:25:18 首次发布

本文链接：https://blog.csdn.net/shan33__/article/details/140183030

版权

笔记专栏收录该内容

83 篇文章 6 订阅

订阅专栏

1.wxss和css的区别

在wxss中为了做适配我们引入了一个新的计量单位rpx,和vue的适配差不多，将整个屏幕分为750份，1rpx就是一份的大小。
小程序支持样式导入操作(在wxss页面进行导入操作)，使用@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来操作。