小程序实现分类

迷南。 2022-10-25 01:48 115阅读 0赞

wxml:

<view class="navBar">
       <view class="item" wx:for="{ {navBarArr}}" wx:key='index'>
          <image src="../../images/{ {item.image}}"></image>
          <view>{
       {item.name}}</view>
       </view> 
    </view>

wxss:

/\* 分类布局 \*/

.navBar{ 
      color: #666;
       display: flex;
       padding-top: 20rpx;
       flex-wrap: wrap;
    }
    .item{ 
      width: 25%;
      text-align: center;
      margin-bottom: 20rpx;
      font-size: 26rpx;
      color: #666;
    }
    
    .item image{ 
      width: 74rpx;
      height: 74rpx;
    }

js:

navBarArr:[
         { 
           id:1,
           image:'time1.png',
           name:'美容养颜'
         },
         { 
          id:1,
          image:'time2.png',
          name:'保健调养'
        },
        { 
          id:1,
          image:'time3.png',
          name:'补养'
        },
        { 
          id:1,
          image:'time4.png',
          name:'减肥'
        },
        { 
          id:1,
          image:'time5.png',
          name:'母婴'
        },
        { 
          id:1,
          image:'time6.png',
          name:'节气'
        }, { 
          id:1,
          image:'time7.png',
          name:'常见食疗'
        }, { 
          id:1,
          image:'time8.png',
          name:'维生素'
        }
       ]

效果图：

![在这里插入图片描述][20210130170502388.png]

[20210130170502388.png]: /images/20221024/238c341133f74105aa2888de35092afc.png

发表评论取消回复

表情：

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

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

相关阅读

相关垃圾分类小程序系统毕业设计,垃圾分类小程序系统设计与实现,垃圾分类系统毕设参考

功能清单【管理员功能】会员管理：查看网站所有注册会员信息，支持删除资讯录入：录入资讯标题、时间、资讯内容等管理资讯：查看现有资讯列表，支持修改和删除功

约定不等于承诺〃/ 2024年03月31日 12:40/ 0 赞/ 69 阅读

相关垃圾分类小程序，云开发 (附源码)

简介这是一个完整的已经线上运行的垃圾分类小程序，点击可查看[源码][Link 1]，可随意 star。也可以扫描下方的小程序码直接体验。 ![aHR0cHM6Ly9y

逃离我推掉我的手/ 2023年07月18日 03:18/ 0 赞/ 11 阅读

相关小程序实现分类

wxml: <view class="navBar"> <view class="item" wx:for="{ {navBarArr}}" wx:ke

迷南。/ 2022年10月25日 01:48/ 0 赞/ 116 阅读

相关小程序的事件分类和事件详细解释

小程序事件分为冒泡事件和非冒泡事件：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

待我称王封你为后i/ 2022年10月16日 07:54/ 0 赞/ 278 阅读

相关人工智能图片分类Python小程序

个人小作业，虽说做的很差，也算是一个学习的转化；主要用于分类自己下载的壁纸 1 背景学期末需要一个学习成果的展示，高难度的自己做不来，模型也跑不动（电脑有点渣），刚好

痛定思痛。/ 2022年10月07日 14:59/ 0 赞/ 159 阅读

相关小程序功能实现

小程序功能实现小程序搜索框实现实现带搜索记录的搜索框小程序优化

我不是女神ヾ/ 2022年09月08日 00:16/ 0 赞/ 207 阅读

相关微信小程序微商城（七）：动态API实现商品分类

IT实战联盟博客：[http://blog.100boot.cn][http_blog.100boot.cn] 上一篇：[微信小程序微商城（六）：动态API实现新品特卖商品

青旅半醒/ 2022年05月20日 01:46/ 0 赞/ 345 阅读

相关小程序制作分类可滚动区域 scroll-view

效果图: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

心已赠人/ 2022年04月05日 05:38/ 0 赞/ 325 阅读

相关 flask实现分类搜索的小测试

　　最新学长要求实现一个搜索的功能呢，也费了一点功夫。这个案例也没有学长写的好，比学长的实现差了不少，待我仔细研究习再发出相应代码　项目要求，搜索语法如下： t

青旅半醒/ 2021年10月29日 16:46/ 0 赞/ 221 阅读

相关微信小程序之侧边栏分类实现

效果图 ![在这里插入图片描述][20190422222348867.gif] 实现思路把屏幕当成一个固定的盒子，然后把盒子分成两边，并让盒子的每一边都能够滚动

谁借莪１个温暖的怀抱￠/ 2021年06月26日 16:06/ 0 赞/ 598 阅读