微信小程序开发周记（11.20-11.26）

实现1：下拉生成颜色

可以不断显示随机颜色。

下拉刷新可以重置颜色列表，上拉触底可以延申显示内容。

wxml：

<!--pages/getc/getc.wxml-->
<button type="primary" bind:tap="navifunc">后退</button>

<view class="num-item" wx:for="{{colorList}}" wx:key="index" style="background-color: {{item}};" >{{item}}</view>

这里通过 style 来设置背景颜色。可能存在在 wxss 中的写法。

js 部分代码：

	getcolor() {
      const numColors = 10;
      const generatedColors = [];

      for(let i=0; i<numColors; i++) {
        const red = Math.floor(Math.random() * 256);
        const green = Math.floor(Math.random() * 256);
        const blue = Math.floor(Math.random() * 256);
        const alpha = Math.floor(Math.random() * 256);

        const rgbaColor = `rgba(${red}, ${green}, ${blue}, ${alpha})`;
        generatedColors.push(rgbaColor);
      }

      this.setData({
        colorList: [...this.data.colorList, ...generatedColors]
      })
    },
    onPullDownRefresh() {
      this.setData({
        colorList: []
      })
      this.getcolor()
    },
    onReachBottom() {
        this.getcolor()
    },

实现2：计数器

输入自增步数，增加 count 。

wxml：

<!--pages/test/test.wxml-->
<button class="but" type="primary" bind:tap="tapfunction">增加count</button>


<block wx:if="{{isnumber}}">
  <view>总计的次数为{{count}}</view>
</block>
<block wx:else>
  <view>输入不是数字！</view>
  <button bind:tap="resetCount" size="mini" type="warn">重置</button>
</block>

<view>在此框内输入数字：</view>
<input value = "{{msg}}" bindinput="inputHandler"/>

js 部分代码：

    inputHandler(e) {
      this.setData({
        msg: e.detail.value,
        countInfo: Number(e.detail.value)
      })
      this.data.isnumber = !isNaN(Number(e.detail.value))
    },
            tapfunction(e) {
      this.setData({
        count: this.data.count + this.data.countInfo
      })
    },

但是似乎 wx:if 的判断灵敏度不高，在我输入非数字信息的时候并没有显示重置。