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

最新推荐文章于 2024-06-20 17:12:33 发布

原创最新推荐文章于 2024-06-20 17:12:33 发布 · 3.6k 阅读

3 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主同意不得转载

微信小程序专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种在小程序中实现商品详情页动态展示的方法，通过两次循环和条件判断，根据商品状态显示或隐藏特定的商品属性标签，如品相、污渍、霉斑等，使页面布局更加灵活和美观。

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

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;
}