咫尺资讯站一一为您提供时下热门前沿动态

查看更多
首页> 微信小程序资讯> 小程序wx:if条件选择器案例

小程序wx:if条件选择器案例

阅读:409微信小程序


微信小程序wx:if条件选择器 遍历数组案例

微信小程序wx:if条件选择器案例
微信小程序wx:if条件选择器案例
具体的文档我就不在啰嗦了下面是我写的一大个例子:.
场景需求:按照后台传 but 的字段,改变对应数据的css样式,

**根据字段改变前面的图标,是同理,**
1.index.wxml
注意这个地方wx:if="{{item.but === ‘c’ }}" 是全等 = = =
                   {{item.ss}}:                    {{item.ss}}                    {{item.ss}}         
2.index.js
Page({  /**   * 页面的初始数据   */  data: {    text: [      { ss: "第一条数据---111", but:"a"},      { ss: "第二条数据---222", but: "b" },      { ss: "第三条数据---333", but: "c" },      { ss: "第四条数据---444", but: "c" },      { ss: "第五条数据---555", but: "a" },      { ss: "第六条数据---666", but: "b" }      ]  },
3.index.wxss
样式写的很随意,主要是懒 得整理,
.bg_black {  height: 60rpx;  background:#000;  border-bottom: 1px solid #2b2e33;  margin: 10rpx;  color: #fff;  opacity: 0.4;}.bg_red {  height: 80rpx;  background:#000;  border-bottom: 1px solid #2b2e33;  margin: 10rpx;   color: #fff;   opacity: 0.6;}.bg_green{ height: 50rpx; background:#000;  border-bottom: 1px solid #2b2e33;  margin: 10rpx;   color: #fff;   opacity: 0.8;}
本来是这样的:

处理完是这样的:

后台给了接口后,可以吧data的数据换一下,就OK了

【温馨提示】即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至1223636800@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎