• 博客园logo
  • 会员
  • 周边
  • 新闻
  • 博问
  • 闪存
  • 众包
  • 赞助商
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
浪子义
博客园    首页    新随笔    联系   管理    订阅  订阅

利用java后台type值给wx:for生成的列表添加不同的图标

哈哈:我们在开发微信小程序时写一个列表时,往往只写列表的其中一个然后利用wx:for循环出来整个列表wxml代码如下:

<view class='index-item-bg'>
    <view class='index-item'>
      <view class='index-item-box' wx:for="{{shortcutList}}" style='background-color:#b5d6f1' data-pos='{{index}}' bindtap='tiao'>
        <image class='index-item-box-image' src='../../../images/icon/icon{{item.type}}.png'></image>
        <view class='icon-box-ctn'>
          <view class='index-item-box-title'>{{item.name}}</view>
          <view class='index-item-box-desc'>国家一级机器人培训单位</view>
        </view>
      </view>
    </view>
  </view>

生成的列表的效果图如下:

这个就是用wx:for循环出来的,但是如果换前面的图标的话如果用常规的做法是做不出来的但是如果利用type值的话一行代码就解决啦就是上面代码images标签里面的

<image class='index-item-box-image' src='../../../images/icon/icon{{item.type}}.png'></image>

其实起作用的就这一句{{item.type}}然而是什么意思呢icon{{item.type}}组合其实是图片的名字如下图images文件夹下的icon文件里面的图片所示:

讲到这有些同学应该明白啦吧其实有些东西思想不要局限最终效果如下:

 

本人原创博客希望大家提出意见:

posted @ 2017-12-07 09:52  浪子义  阅读(545)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3