小程序写点垃圾代码

发表于 更新于 分类于 本文字数： 2.5k 阅读时长 ≈ 2 分钟

列表倒计时

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
find() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
注意: find() 对于空数组，函数是不会执行的。
注意: find() 并没有改变数组的原始值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//添加倒计时参数res为接口返回数据列表
res.find((v) => {
    let nowTime = new Date().getTime();
    //expire_time为接口返回截止时间的时间戳
    let endDate = v.expire_time * 1000 - nowTime;
    if (endDate > 0) {
    //倒计时
    let stop = setInterval(() => {
        //days | hour 分别表示天和小时
        //days = Math.floor(time.t / 1000 / 60 / 60 / 24);
        //hour = Math.floor(time.t / 1000 / 60 / 60 % 24);
        let minute = Math.floor((endDate / 1000 / 60) % 60);
        let second = Math.floor((endDate / 1000) % 60);
        let min = minute < 10 ? "0" + minute : minute;
        let sec = second < 10 ? "0" + second : second;
        if (endDate <= 0) {
          //如果倒计时结束，改变当前订单状态，重新赋值orderList数据即可
          v.status = -1;
          this.setData({
            orderList: this.data.orderList
          })
          clearInterval(stop);
          return false;
        } else {
          endDate -= 1000;
        }
        v.goods_time = min + ":" + sec;
        //每秒重新赋值orderList数据
        this.setData({
          orderList: this.data.orderList
        })
    }, 1000);
    } else {
       v.status = -1;
       this.setData({
         orderList: this.data.orderList
    })
    }
})

这里着重强调，其实最合理的还是把列表分成单个组件，在组件中写倒计时代码，这样避免遍历带来的各种问题，又不用考虑列表各模块互相影响

web-view正确使用

小程序页面：

1
2
3
4
<navigator wx:for="{{imgUrlNew}}" wx:key="index" url="/pages/webview/webview?skipUrl={{item.url}}">
    <image src='{{item.img}}' mode="widthFix"></image>
    <text>{{item.name}}</text>
</navigator>

封装webview的页面：

1
2
<!-- webview.wxml -->
<web-view src="{{skipUrl}}"></web-view>

然后在webview.js中：

1
2
3
4
5
6
7
8
9
10
data: {
id:'',
imgUrl:''
},
onLoad: function (options) {
    //获取到链接中的webview链接参数,传入的链接要encode，否则如果链接有其他字符会被截断，然后赋值时再decode
    this.setData({
      skipUrl: decodeURIComponent(options.skipUrl)
    })
  },

父子自定义组件传参+数据绑定

子组件：

1
<view class="close" bindtap='onClose'></view>
1
2
3
4
5
6
7
8
9
/**
 * 组件的方法列表
 */
methods: {
    onClose(){
        //triggerEvent方法参数：事件名、detail对象和事件选项
        this.triggerEvent("closeReserve",{"name":"我是子组件传给父组件的数据"})
    }
}

父组件：

1
<hot-goods-popup wx:if="{{reserveSuccess}}" bindcloseReserve="closeReserve" />
1
2
3
4
5
6
7
8
9
10
/**
 * 组件的方法列表
 */
methods: {
    closeReserve(){
        this.setData({
        reserveSuccess: false
        })
    }
}