小程序动态绑定类名

2018-05-09

问题

在小程序开发中,绑定动态类基本是通过变量控制,在js中设置不同的变量来展示不同的样式。如何才能类似vuejs哪里动态绑定class呢?

WXS 模块

WXS 代码可以编写在 wxml 文件中的 标签内,或以 .wxs 为后缀名的文件内

我们可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过module.exports 或者 exports 才能对外暴露接口。 通俗的将就是自身独立,作用域只作用于该模块,与js互不影响。

示例代码

 <wxs module="rank">
            var indexof = function(index){
                switch(index){
                    case 0:
                        return 'first-price';
                        break;
                    case 1: 
                        return 'second-price';
                        break;
                    case 2: 
                        return 'third-price';
                        break;
                }
            };
            module.exports.style = indexof;
  </wxs>

然后在 view 使用

<view class="price {{rank.style(index)}}">{{index + 1}}</view>