GodKonws

发布：2020-08-15 00:54
更新：2020-08-17 16:04
阅读：1252

【报Bug】v-for循环创建组件时给组件绑定随机背景色，在微信小程序中只返回一中颜色

分类：uni-app

bug已确认

产品分类： uniapp/小程序/微信

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： window10

HBuilderX版本号： 2.8.3

第三方开发者工具版本号： 1.0.3

基础库版本号： 2.12.0

项目创建方式： CLI

CLI版本号： 3.0

示例代码：

<block v-for="img in fluidLayout[1]" :key="img.id">  
  <image lazy-load="true"   
              mode="aspectFill"   
             :style="{'background-color':randomColor(),'width':'100%'}"   
  </image>  
</block>

操作步骤：

`v-for`循环遍历数组，并且给每个创建的图片组件设置一个随机背景色，`randomColor`每执行一个都会返回一个随机的`rgb`颜色，

预期结果：

每一个图片的背景色都是随机的

实际结果：

每一个图片的背景色都是一样的

bug描述：

v-for循环创建组件时给组件绑定随机背景色，在微信小程序中只返回一中颜色，在小程序之外的其他的平台都是可以正常运行的，而在微信小程序中只会生成一种颜色

1图是小程序，2图是正常的

2020-08-15 00:54 负责人:无分享

2 个回复

jxtian

贴一下 randomColor() 的具体是实现代码

jxtian

这个问题原因是，微信的模板语法里不完全支持 JS 的表达式，比如方法。临时解决办法：你这种可以给方法传入一个当前环境相关的变量，编入v-for 的作用域去处理。

<block v-for="img in fluidLayout[1]" :key="img.id">    
  <image lazy-load="true"     
              mode="aspectFill"     
             :style="{'background-color':randomColor( img ),'width':'100%'}"     
  </image>    
</block>

该问题目前已经被锁定, 无法添加新回复

【报Bug】v-for循环创建组件时给组件绑定随机背景色，在微信小程序中只返回一中颜色

示例代码：

`<block v-for="img in fluidLayout[1]" :key="img.id"> <image lazy-load="true" mode="aspectFill" :style="{'background-color':randomColor(),'width':'100%'}" </image> </block>`

操作步骤：

`v-for`循环遍历数组，并且给每个创建的图片组件设置一个随机背景色，`randomColor`每执行一个都会返回一个随机的`rgb`颜色，

预期结果：

每一个图片的背景色都是随机的

实际结果：

每一个图片的背景色都是一样的

bug描述：

1图是小程序，2图是正常的

2 个回复

公告

相关问题

【报Bug】v-for循环创建组件时给组件绑定随机背景色，在微信小程序中只返回一中颜色

示例代码： <block v-for="img in fluidLayout[1]" :key="img.id"> <image lazy-load="true" mode="aspectFill" :style="{'background-color':randomColor(),'width':'100%'}" </image> </block>

操作步骤： v-for循环遍历数组，并且给每个创建的图片组件设置一个随机背景色，randomColor每执行一个都会返回一个随机的rgb颜色，

预期结果： 每一个图片的背景色都是随机的

实际结果： 每一个图片的背景色都是一样的

bug描述：

1图是小程序，2图是正常的

与内容相关的链接

2 个回复

公告

相关问题

示例代码：

`<block v-for="img in fluidLayout[1]" :key="img.id"> <image lazy-load="true" mode="aspectFill" :style="{'background-color':randomColor(),'width':'100%'}" </image> </block>`

操作步骤：

`v-for`循环遍历数组，并且给每个创建的图片组件设置一个随机背景色，`randomColor`每执行一个都会返回一个随机的`rgb`颜色，

预期结果：

每一个图片的背景色都是随机的

实际结果：

每一个图片的背景色都是一样的