收藏
回答

【求助】scroll-view展示wx:for循环的数据时,如何动态设置背景?

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 需求 scroll-view 工具 6.6.7 2.0.4

- 需求的场景描述(希望解决的问题)

<scroll-view class="...." scroll-x="true" style="width:100%">

<block wx:for ={{contents}} >

<view style="background-color: red" >{{item.name}}    {{item.price}}  </view>  

     </block>

</scroll-view>

- 希望提供的能力

block 标签中间的那个view就是滑块,我希望它的颜色不要总是red,这样没办法区分不同的内容,

请问中间的view的背景颜色要怎样能自动变不同的颜色? 谢谢!

回答关注问题邀请回答
收藏

1 个回答

  • 卢霄霄
    卢霄霄
    2018-07-19

    background-color: {{item.color}}


    item.color="rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"


    2018-07-19
    有用
    回复 16
    • 天空翱翔
      天空翱翔
      2018-07-19

      谢谢解答! 这个思路很有启发


      item.color 能自己定一个列表,在wx:for循环里面通过下标来展示吗?

      (毕竟随机颜色可能并不太理想。

      2018-07-19
      回复
    • 卢霄霄
      卢霄霄
      2018-07-19回复天空翱翔

      1、可以根据wx-for时候的 index来引入样式 class="{{index%5==0?"color1":""}}"

      2、可以 item.color = colorArray[parseInt(Math.random()*5)] 来随机颜色(假设 colorArray里有5个颜色哈)

      3、可以试试 css的子节点选择器 https://www.cnblogs.com/mafeifan/p/3592342.html


      2018-07-19
      回复
    • 天空翱翔
      天空翱翔
      2018-07-19回复卢霄霄

      2、 就这个有点不太转得过弯来: item.color = colorArray[parseInt(Math.random()*5)] 这段语句是放在哪个文件里(js or wxml)? 放在<view >里面貌似不行吧,并不能放赋值语句。谢谢!

      2018-07-19
      回复
    • 卢霄霄
      卢霄霄
      2018-07-19回复天空翱翔

      额。。 js里呀。。你不是要做个列表吗(colorArray)

      2018-07-19
      回复
    • 天空翱翔
      天空翱翔
      2018-07-19回复卢霄霄

      o(︶︿︶)o 唉 鄙人才疏学少,本来以为看懂了,还是没懂。。。


      1、class="{{index%5==0?"color1":""}}"  这个用法很少看到,不太了解其中原理和逻辑,

      可否麻烦告知在哪里可以学习到这个格式的用法?  感激不尽!

      2018-07-19
      回复
    查看更多(11)
登录 后发表内容