小程序从数组从循环取数据，将符合条件的数据显示出来，并且显示数量不能超过3条

怼烎@ 2022-05-14 01:52 210阅读 0赞

问题描述：小程序从数组从循环取数据，将符合条件的数据显示出来，并且控制在首页的显示数量不超过3条

wxml:

<text wx:for="{
       {product_nav}}" data-idx="{
       {index}}" class="item {
       {currentTab==index ? 'active' : ''}}"
         wx:key="unique" bindtap="navbar_product">{
       {item}}</text>

并在要显示的内容处加上:<view class=" \{ \{item.isShow?'show':'hide'\}\}"></view>

js:

navbar_product: function (e) {
       this.setData({
          currentTab: e.currentTarget.dataset.idx,
          
        })
         this.showList(e);
      },
      showList: function (e) {
        let i = 0;
        let a = 0;
        let arrayItem = this.data.productItems;//获取循环数组对象
        for (let item of arrayItem) {
          if (item.typeId == e.currentTarget.dataset.idx) {
            if (a<3) {
              arrayItem[i].isShow = "true"
              a++;
            } else {
              arrayItem[i].isShow = ""
              break;
            }
          }
          i++;
        }
        this.setData({
          productItems: arrayItem
        })
      }

wxss:

.show{
      display: block;
    }
    .hide{
      display: none;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，210人围观）

还没有评论，来说两句吧...

相关阅读

相关 QT实现一个从数据库获取数据并且显示的代码

在使用 Qt 之前，你需要安装好相应的 Qt 库和编译器。下面是一个从 MySQL 数据库中获取数据并在 Qt 中显示的示例代码： include <QtSql>

电玩女神/ 2023年10月07日 23:21/ 0 赞/ 44 阅读

相关 mysql数字显示,如何从MySQL显示数据

![Image 1][] I created an Online Time Table and it's working fine and user or me can ad

梦里梦外;/ 2022年10月04日 12:56/ 0 赞/ 206 阅读

相关小程序循环取数据，根据要求显示不同的颜色

问题描述：从js中循环取数据，当取出数据为正时显示红色，取出数据为负时显示绿色代码： <view> <view wx:if="{

野性酷女/ 2022年05月15日 02:46/ 0 赞/ 478 阅读

相关小程序从数组从循环取数据，将符合条件的数据显示出来，并且显示数量不能超过3条

问题描述：小程序从数组从循环取数据，将符合条件的数据显示出来，并且控制在首页的显示数量不超过3条 wxml: <text wx:for="{ {pro

怼烎@/ 2022年05月14日 01:52/ 0 赞/ 211 阅读

相关 AnjularJs数据一直显示不出来？

在使用AnjularJs获取后台的json数据显示到页面中，数据一直显示不出来，而且ng-app等定义的AngularJs标签出现黄色警告线，未定义；但是我已经在html中引入

矫情吗；*/ 2022年05月09日 01:33/ 0 赞/ 273 阅读

相关微信小程序的的图片显示不出来

图片的路径分两种 1、本地的图片如images文件夹下面的 /images/t1.jpg 或者是[http://localhost:8080/Teacher/new

r囧r小猫/ 2022年01月28日 02:55/ 0 赞/ 554 阅读

相关 Oracle 从多条符合条件的记录中选择一条显示

SELECT ti.\ FROM ( SELECT pt.\, ROW\

梦里梦外;/ 2022年01月06日 10:53/ 0 赞/ 524 阅读

相关 Java中从list中删除符合条件的数据

import java.util.ArrayList; import java.util.Iterator; import java.util.List

傷城~/ 2022年01月05日 11:39/ 0 赞/ 339 阅读

相关 easyUI combobox 从后台取数据显示（明确前后的需求）

在解决这个问题之前，我们需要先明确两个问题？ 1.首先明确，定义在data-options（combobox中属性）中我们的"textFiled"和"valueFiled"需

叁歲伎倆/ 2021年11月17日 11:50/ 0 赞/ 449 阅读

相关 easyUI combobox 从后台取数据显示（第二种格式）

相比于第一种格式，这里的会更及简便一点（这里对格式要求没那么严格，只需要有返回值有我们需要的属性就行）： ![20190814165514563.png][] 第一篇更为详

柔情只为你懂/ 2021年10月14日 21:03/ 0 赞/ 264 阅读