小程序開發(fā)中遇到這樣一個問題...
排行榜開發(fā)的時候,前三名的樣式不同,其余的樣式一樣。但是都是通過同一元素來遍歷的,當時卡了一下。后來發(fā)現有module模塊化這一概念,于是查了下api,一下子就做出來了。
就是不同名次上邊的樣式根據實際情況展示效果。
模塊化
我們可以將一些公共的代碼抽離成為一個單獨的 js 文件,作為一個模塊。模塊只有通過 module.exports 或者 exports 才能對外暴露接口。
通俗的將就是自身獨立,作用域只作用于該模塊,與js互不影響。
主要代碼
module部分
-
<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="weui-badge {{rank.style(index)}}">{{index + 1}}</view>
有什么好的方法或者問題都可以互相交流哦~ 喜歡的點個贊哦~
|