巧用数组，调用外部样式类

Question

关键代码：

1.book-detail.js

// book-detail.js
Page({
  data: {
    book: null,
    comments: [],
    likeStatus: false,
    likeCounts: 0,
    bgColors: ['ex-tag0', 'ex-tag1'] // 添加一个 bgColors 数组，存储样式名称
  },
  ...
 })

2. book-detail.wxml

// book-detail.wxml
....
<view class="sub-container flex-col">
    <text class="headline">短评</text>
    <view class="comments-container">
      <block wx:for="{{comments}}" wx:key="content">
        <v-tag tag-class="{{bgColors[index]}}" text="{{item.content}}">
          <text class="num" slot="after">{{'+' + item.nums}}</text>
        </v-tag>
      </block>
    </view>
  </view>
  ....

3. book-detail.wxss

...
.ex-tag0 {
  background-color: #fffbdd !important;
}

.ex-tag1 {
  background-color: #eefbff !important;
}
...

解释一下：

就是在book-detail.js下，多声明一个bgColors数组，存储外部样式类名；在遍历短评的时候，根据index的取值，从bgColors数组中获取样式，作用到相应的标签上

Answer 1

提问者 钦哥仔 2018-09-03 08:17:38

// book-detail.wxml
<block wx:for="{{comments}}" wx:key="content">
    <v-tag tag-class="{{util.change_color(index, ['ex-tag0', 'ex-tag1'])}}" 
      text="{{item.content}}">
          <text class="num" slot="after">{{'+' + item.nums}}</text>
    </v-tag>
 </block>
 <wxs module="util">
     var change_color = function (index, colors=[]) {
      return colors[index]
    }

    module.exports = {
      change_color: change_color
    }
 </wxs>

这种写法比原来的好吗?!

• 7七月 #1

  你都用wx了，为撒还要在js里弄？把课程的表达式移到wxs里不就行了吗

• 提问者 钦哥仔 回复 7七月 #2

  谢谢指点

Answer 2

7七月 2018-09-03 06:15:20

主要是js里最好不涉及样式

• 提问者 钦哥仔 #1

  那将其定义为组件的一个属性，样式用外部传入，这种方法会不会好些？！

• 提问者 钦哥仔 #2

  又想错了，(✿◡‿◡)

Answer 3

7七月 2018-09-03 06:14:46

方式很多，不过我不认为这种方法是个好方法。

• 提问者 钦哥仔 #1

  老师，以下这种写法比原来的好吗?
  
  // wxs
  ....
  var change_color = function (index, colors=[]) {
    return colors[index]
  }
  
  module.exports = {
    change_color: change_color
  }
  
  //wxml
  <block wx:for="{{comments}}" wx:key="content">
          <v-tag tag-class="{{util.change_color(index, ['ex-tag0', 'ex-tag1'])}}" text="{{item.content}}">
            <text class="num" slot="after">{{'+' + item.nums}}</text>
          </v-tag>