小程序如何像vue操作一样在动态绑定类名?

转载 2018年04月16日 11:17:02

小程序开发中遇到这样一个问题... 
排行榜开发的时候,前三名的样式不同,其余的样式一样。但是都是通过同一元素来遍历的,当时卡了一下。后来发现有module模块化这一概念,于是查了下api,一下子就做出来了。

就是不同名次上边的样式根据实际情况展示效果。

模块化

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

主要代码

module部分

  1. <wxs module="rank">
  2. var indexof = function(index){
  3. switch(index){
  4. case 0:
  5. return 'first-price';
  6. break;
  7. case 1:
  8. return 'second-price';
  9. break;
  10. case 2:
  11. return 'third-price';
  12. break;
  13. }
  14. };
  15. module.exports.style = indexof;
  16. </wxs>

view

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

有什么好的方法或者问题都可以互相交流哦~ 
喜欢的点个赞哦~

如何让微信小程序与 React Native 共享代码

-
  • 1970年01月01日 08:00

Vuejs-学习记录(三)Class与Style绑定

1 Class 与 Style在使用组件的时候,不可避免的要去使用内联的 style 属性去设置标签样式,按照常规的使用,style 只能是一些属性列表组合成的字符串;这限制了在使用组件时可以自定义或...
  • gccll
  • gccll
  • 2017-05-13 15:14:31
  • 4082

微信小程序如何动态增删class类名

简述由于微信小程序开发不同于以往的普通web开发, 因此无法通过js获取wxml文件的dom结构, 因此从js上直接添加一个类名应该不可能了. 可是我们可以通过微信小程序数据绑定以及view标签的”d...
  • c_kite
  • c_kite
  • 2017-06-07 14:36:22
  • 17989

微信小程序框架wepy之动态控制类名

控制类名 style .liBkgCor { background-color: red; } template
  • kingov
  • kingov
  • 2017-11-05 20:38:29
  • 519

微信小程序与vue的区别,知乎回答!!!

明显不是嘛,数据属性更新是这样的 小程序: Page({ data: { items: [] }, onLoad: function(options) { this...
  • qq_24122593
  • qq_24122593
  • 2016-12-09 11:49:02
  • 5460

几个小程序,最大字符字串,

一个字符串参数(value)由字母(a-z,A-Z)组成,且最大字符位数为40,要求写一个函数(maxLength) 返回该参数中连续相同字母的最大个数及该字母,如果最大位数有多个, 则返回第一个。例...
  • godwanglong
  • godwanglong
  • 2011-01-10 21:08:00
  • 362

微信小程序多张图片和表单一起上传,验证表单及进度条的实现完整代码

欢迎加入微信小程序交流qq群(173683895) 效果图: 完整代码: 注 册 须 知 : 标☆号为必填项 头 像 上 传 ☆ ...
  • qq_35713752
  • qq_35713752
  • 2018-01-04 21:54:25
  • 388

vue中动态添加class类名

vue  动态添加class类名,灵活得让你发狂,下面示例几个             动态添加类名                                 ...
  • qq940853667
  • qq940853667
  • 2017-08-19 16:03:59
  • 8990

vue中属性动态绑定数据方法

在vue2.0中,src、href等属性实现数据绑定,不能用{{}}进行绑定,否则就会报错,那么应该怎么绑定呢?? 先看几个错误的写法 常见错误写法1: img src="value.src...
  • wang1006008051
  • wang1006008051
  • 2017-09-07 19:30:24
  • 1235

vue动态添加class

样式表 HTML 效果样式表/* 表格 - 行 - 已登记状态 */ .registered { background-color: #FFF9E5; } /* 表格 - 行 - 未登记hov...
  • WarnerWu
  • WarnerWu
  • 2017-07-25 17:27:50
  • 1135
收藏助手
不良信息举报
您举报文章:小程序如何像vue操作一样在动态绑定类名?
举报原因:
原因补充:

(最多只允许输入30个字)