微信小程序通过js循环传值为空时怎么让该标签隐藏不显示，（附图片）

今天药忘吃喽~ 2022-03-19 04:38 193阅读 0赞

其实两个图片你应该就能看明白了，代码就是让你实践用一下，好比第一张图片上面标注出来的三个方框，和下面标注出来的一个方框，其实就是通过两次循环得出来的，只不过第一次需要三个标签，第二次需要一个标签，那么后面的标签就需要隐藏，怎么隐藏呢？那你就看第二张图片喽，在text标签里面加个判断就好喽。  
效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20190215095926711.png]  
test.js

// pages/my/sellout/sellout.js
    var app = getApp()
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        currentTab: 0,
        da: [{
          imgurl: "../../images/shu.png",
          mei: "每个词都知道某种魔圈",
          pin: "有涂鸦",
          wuze:"污啧",
          meiban:"霉斑/书册泛黄",
          jin: "￥20.6",
          que: "确定收货",
          off: "关闭订单",
        }, {
            imgurl: "../../images/shu.png",
            mei: "每个词都知道某种魔圈",
            pin: "品相完好",
            // meiban: "霉斑/书册泛黄",
            jin: "￥20.6",
            que: "确定收货",
            off: "关闭订单",
          },]
      },

text.wxml

<view class='main' wx:for="{
       {da}}">
          <view class='main-top'>
            <image src='{
       {item.imgurl}}'></image>
          </view>
          <view class='main-middle'>
            <view class='middle-top'>{
       {item.mei}}</view>
            <view class='middle-zhong'>
              <text wx:if="{
       {item.pin}}"> {
       {item.pin}}</text>
              <text wx:if="{
       {item.wuze}}">{
       {item.wuze}}</text>
              <text wx:if="{
       {item.meiban}}">{
       {item.meiban}}</text>
            </view>
            <view class='main-bottom'>
              <view class='middle-left'>{
       {item.jin}}</view>
              <view class='middle-middle'>{
       {item.que}}</view>
              <view class='middle-right'>{
       {item.off}}</view>
            </view>
          </view>
        </view>

test.wxss

.main {
      height: 230rpx;
      display: flex;
      margin: 0 25rpx;
      border-bottom: 1rpx solid #e6e6e6;
    }
    
    /* 左 */
    
    .main-top {
      height: 160rpx;
      width: 120rpx;
      margin: 30rpx 40rpx 30rpx 0;
    }
    
    .main-top image {
      height: 160rpx;
      width: 120rpx;
    }
    
    /* 右 */
    
    .main-middle {
      margin-top: 30rpx;
    }
    
    .middle-top {
      font-size: 30rpx;
      font-weight: bold;
    }
    
    .middle-zhong {
      height: 55rpx;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
    }
    
    .middle-zhong text {
      font-size: 25rpx;
      color: #676767;
      padding: 10rpx 20rpx;
      border: 1rpx solid #e6e6e6;
      border-radius: 10rpx;
      margin-right: 15rpx;
    }
    
    .main-bottom {
      display: flex;
    }
    
    .middle-left {
      font-size: 30rpx;
      color: #9cc0ff;
      margin-right: 130rpx;
    }
    
    .middle-middle {
      font-size: 30rpx;
      color: #fff;
      width: 150rpx;
      height: 50rpx;
      background: #b27a69;
      text-align: center;
      border-radius: 20rpx;
      margin-right: 10rpx;
      line-height: 50rpx;
    }
    
    .middle-right {
      font-size: 30rpx;
      color: #fff;
      width: 150rpx;
      height: 50rpx;
      background: #ccc;
      text-align: center;
      border-radius: 20rpx;
      line-height: 50rpx;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70]: /images/20220319/1caa50a751704099908a2c0da8b88932.png
[20190215095926711.png]: /images/20220319/a616f32c099445e7bccee12977598e30.png