• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序for循环给里面单独的view加单独的样式

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

效果图如下:

  

上面是个列表从数据库拿下来所有的信息;在视图层直接一个for循环展示下来,现在麻烦来了前三个和后面的额不一样,小程序不允许dom操作,那怎么解决呢?

  解决办法:

    wx:for和wx:if  wx:elif嵌套着使用

  代码:

    wxml

        

<navigator url="../play/play?id={{item.muId}}&index={{index}}" wx:for="{{imagescoverArr}}" >
  <!--第一个-->
  <view wx:if="{{index==0}}" class="music_list_li1">
    <image class="tubiao" src="../../img/one.png"></image>
    <view class="Head_portrait">
      <image class="image1" src="{{item.imcsrc}}"></image>
    </view>
    <view class="music_info">
      <view class="music_name"> {{item.muName}} </view>
      <view class="singer_name">{{item.nickname}}</view>
    </view>
  </view>
  <!--第二个-->
  <view wx:elif="{{index==1}}" class="music_list_li2">
    <image class="tubiao" src="../../img/two.png"></image>
    <view class="Head_portrait">
      <image class="image2" src="{{item.imcsrc}}"></image>
    </view>
    <view class="music_info">
      <view class="music_name"> {{item.muName}} </view>
      <view class="singer_name">{{item.nickname}}</view>
     </view>
  </view>
  <!--第三个-->
  <view wx:elif="{{index==2}}" class="music_list_li3">
    <image class="tubiao" src="../../img/three.png"></image>
    <view class="Head_portrait">
      <image class="image3" src="{{item.imcsrc}}"></image>
    </view>
    <view class="music_info">
      <view class="music_name"> {{item.muName}} </view>
      <view class="singer_name">{{item.nickname}}</view>
    </view>
    </view>
    <!--从第四个开始-->
    <view wx:else class="music_list_li">
      <view class="Head_portrait">
         <image class="image" src="{{item.imcsrc}}"></image>
      </view>
      <view class="music_info">
      <view class="music_name"> {{item.muName}} </view>
        <view class="singer_name">{{item.nickname}}</view>
      </view>
    </view>
</navigator>

 上面是主要的处理代码

原理就是:

    在view里面拿到后台的数据数组,完了把和别人不一样的单独拿出来做下单独处理,

    怎么单独处理就是wx:if判断

      在这种情况下给他不同额样式

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
用于删除java注释的小程序发布时间:2022-07-18
下一篇:
C++编写的解码器小程序map发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap