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

来源：12-16 外部样式类的使用技巧

钦哥仔

2018-08-31

关键代码：

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数组中获取样式，作用到相应的标签上

写回答

3回答

钦哥仔

提问者

2018-09-03

// 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七月

谢谢指点

2018-09-03

共2条回复

7七月

2018-09-03

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

钦哥仔

又想错了，(✿◡‿◡)

2018-09-03

共2条回复

7七月

2018-09-03

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

钦哥仔

老师，以下这种写法比原来的好吗? // wxs .... var change_color = function (index, colors=[]) { return colors[index] } module.exports = { change_color: change_color } //wxml

2018-09-03

共1条回复

纯正商业级微信小程序应用实战，全方位小程序特性讲解

真实数据的高质量小程序项目，学会直接工作

4782 学习 · 2125 问题

查看课程

相似问题

组件之间的样式是共用的么

回答 1

上节课说的方式应该是相当于样式穿透吧

回答 1

回调函数问题

回答 1

component 子组件怎么调用父级函数

回答 1

使用外部样式，能生效，是不是新版本的小程序支持了？

回答 1

打开慕课网App查看更多内容