<template>
<view class="wrap">
<view class="top"><u-search @custom="searchList" @search="searchList" placeholder="请输入搜索条件" v-model="keyword"></u-search></view>
<loading-list top="80rpx" bottom="100rpx" ref="list" url="/stock" class="member-list">
<view slot="list" slot-scope="{ list }">
<view v-for="(item, index) in list" :key="index" class="member-item">
<view class="member-left">
<view class="avatar-box" :style="{'background-color':getRandomColor( item )}">
{{ item.Name[0] }}
</view>
</view>
<view class="member-info">
<view>{{ item.Name }}</view>
<view>{{ item.Price }}/{{ item.Specs }}</view>
<view>库存: {{ item.Quantity }}</view>
</view>
<view class="ico"><u-icon name="arrow-right" color="#909399" size="20"></u-icon></view>
</view>
</view>
</loading-list>
</view>
</template>
<script>
import LoadingList from '@/components/page-lists/loading-list.vue';
export default {
data() {
return {
listData: [],
listQuery: {},
keyword: ''
};
},
components: {
LoadingList
},
computed: {
},
methods: {
searchList() {
this.listQuery = {
Name: this.keyword
};
this.$refs.list.loadList(this.listQuery, true);
},
getRandomColor(item) {
console.log(item)
const rgb = []
for (let i = 0; i < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
}
}
};
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
![5***@qq.com](https://img-cdn-tc.dcloud.net.cn/account/identicon/799b69a49a61588988a9873e995aeefc.png)
- 发布:2022-04-21 17:48
- 更新:2022-04-21 18:11
- 阅读:164
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 21H1-19043.1586
HBuilderX类型: 正式
HBuilderX版本号: 3.4.6
第三方开发者工具版本号: 1.06.2203070
基础库版本号: 2.23.4
项目创建方式: HBuilderX
示例代码:
操作步骤:
v-for循环遍历数组,并且给每个创建的图片组件设置一个随机背景色,randomColor每执行一个都会返回一个随机的rgb颜色,但是这个方法被多次执行。
v-for循环遍历数组,并且给每个创建的图片组件设置一个随机背景色,randomColor每执行一个都会返回一个随机的rgb颜色,但是这个方法被多次执行。
预期结果:
输入文字时randomColor方法不执行
输入文字时randomColor方法不执行
实际结果:
输入文字时randomColor方法执行
输入文字时randomColor方法执行
bug描述:
小程序BUG
每次在输入框输入完文字后,getRandomColor这个方法总是被调用一次
2 个回复
5***@qq.com (作者)
各位大哥 - -,给看看啊
小枫叶 - 外包接单加v:wlmk1234567 注明来意
只有小程序这样?
5***@qq.com (作者)
H5没问题,其他平台暂时没有测试
2022-04-21 18:20