0%

微信小程序开发记录之二

Posted on Edited on In

🐭微信小程序

wx:for和wx:key

在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

1
2
3
4
5
6
7
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

wx:key=”字符串”

这个”字符串”代表在 for 循环的 array 中 item 的某个“属性”

该“属性” 的值需要是列表中唯一的字符串或数字，且不能动态改变。

用于被遍历的组件需要多个属性的时候。

小程序分页实现

页面相关事件处理函数–监听用户下拉动作onPullDownRefresh() {}

页面上拉触底事件的处理函数onReachBottom() {}

在数据量不大的时候，采用concat进行页面数组数据的拼接，例如：

1
2
3
4
5
6
7
8
9
if (resp.result === 'success' && resp) {
      var temList = this.dataList;
      const list = resp.data || []
      list.map(item => {
        return Object.assign(item, {
          photo: getUserAvatar(item.idNo)
        });
      });
      this.dataList = temList.concat(list);
1
2
3
4
5
6
7
8
9
// 页面上拉触底事件的处理函数
  onReachBottom() {
    if (this.len >= this.pageSize) {
      this.pageNum += 1;
      this.getOrderList();
    } else {
      this.$toast('已经加载全部');
    }
  }

🐂ES6

Object.assign

1
var nObj = Object.assign({ },obj,obj1);

花括号里的叫目标对象，后面的obj、obj1是源对象。

对象合并是指：将源对象里面的属性添加到目标对象中去，若两者的属性名有冲突，后面的将会覆盖前面的

访问对象属性值

访问对象属性的两种方式 ： . 或 []
1、先声明一个变量 例如：env = ‘test’，使用domains[env]
2、直接 domains.test

🐯CSS相关

阿里图标库的使用

上一次有提到过，但使用的时候只是照样子去使用，没真正弄清楚在这项目里怎么个使用法。这次，终于get了！

可参考：官网帮助中心

  1. 复制 font class 的在线链接的代码， 在浏览器中打开，复制内容到 项目的iconfont.less中
  2. 现在就可以直接在class中使用
    1
    <text class="icon1 iconfont icon-icon_Order"></text>
    icon1 是自定义的样式，可以对使用的图标进行一些编辑，如颜色大小。

    iconfont 是字体的本来样式

    icon-icon_Order 是图标的名称

    CSS实现右三角图标

1
2
3
4
5
6
7
.right-triangle {
    width: 0;
    height: 0;
    border-bottom: 12rpx solid  rgba(93,93,93,1);
    border-left: 12rpx solid transparent;
    margin-left: 8rpx;
}