实现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 的判断灵敏度不高，在我输入非数字信息的时候并没有显示重置。