样式使用

普通写法

具体实现写在.cml的<style>标签内。

目前支持有如下两种关联到元素上：

静态class

  1. <view class="kind-list-item-hd-show class2 class3">
  2. </view>

动态class

目前 class 不支持传入对象的形式；简单数据绑定{{}}之内的会被当做一个表达式去处理；

  1. <view><text class="{{prefix+'a'}}">class数据绑定</text></view>
  2. <script>
  3. class Index {
  4.   data () {
  5.     return {
  6.       prefix: 'cls'
  7.     }
  8.   }
  9. }
  10. export default new Index();
  11. </script>

三元运算符

  1. <view class="{{open ? 'cls1 cls2' : 'cls3 cls4'}}">
  2. </view>

或者将其放入计算属性

  2. <template>
  3.   <view class="{{itemClass}}">
  4.   </view>
  5. </template>
  6. <script>
  7. class Index {
  8.   computed = {
  9.     itemClass() {
  10.       return open ? 'cls1 cls2' : 'cls3 cls4';
  11.     }
  12.   }
  13. }
  14. export default new Index();
  15. </script>

内联写法

模版中写内联样式，分为静态和动态两种，静态样式指纯字符串，动态样式是有数据绑定。style也不支持对象语法和数组语法；目前可以使用的方式如下：

静态样式：

  1. <template>
  2.   <view style="width: 200cpx;">
  3.   </view>
  4. </template>

动态样式：

  1. <template>
  2.   <view style="{{inlineStyle}}">
  3.   </view>
  4. </template>
  5. <script>
  6. class Index {
  7.   data = {
  8.     inlineStyle: 'width: 200cpx;'
  9.   }
  10. }
  11. export default new Index();
  12. </script>