zoukankan      html  css  js  c++  java
  • 小程序for循环给里面单独的view加单独的样式

    效果图如下:

      

    上面是个列表从数据库拿下来所有的信息;在视图层直接一个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判断

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

     

  • 相关阅读:
    oracle过期备份未删除导致磁盘撑爆
    数据文件、监听日志、告警日志、redo日志、归档日志的迁移
    linux软件卸载命令
    Nginx版本平滑升级方案
    rsync 服务搭建
    在node节点部署kubectl管理k8s集群
    源码编译安装nginx及设置开机启动项
    K8S日常运维中关于“ImagePullBackOff”报错的处理思路分析
    查看所有日志命令:journalctl
    Docker编排工具Docker Compose的使用
  • 原文地址:https://www.cnblogs.com/lijuntao/p/7151234.html
Copyright © 2011-2022 走看看