微信小程序分类小图标导航

wxml内容

<view class='box'><view class='btn' wx:for="{{btns}}" wx:key="unique"><view class="{{item.name==select?'_select':'se'}}" data-class="{{item.name}}"  bindtap="bindGetScenes"><image class='img' src='{{item.url}}'></image><view class='name'>{{item.name}}</view></view></view>
</view>

js内容

Page({data: {btns: [{'name': '植物园','url': '../../img/flower.png'},{'name': '公园','url': '../../img/park.png'},{'name': '动物园','url': '../../img/animal.png'},{'name': '植物园1','url': '../../img/flower.png'},{'name': '公园1','url': '../../img/park.png'},{'name': '动物园1','url': '../../img/animal.png'}],select:'动物园',},// 事件处理函数onLoad() {},bindGetScenes:function(e){this.setData({select:e.currentTarget.dataset.class})}
})

wxss内容

.box {display: flex;flex-wrap: wrap;height: 360rpx;background: #fff;margin-top: 15rpx;padding: 20rpx;box-sizing: border-box;font-size: 9pt;}.btn {width: 33.3%;text-align: center;padding-top: 10rpx;box-sizing: border-box;}._select{color: #49A0E8;text-decoration-line: underline;}.img {display: block;width: 80rpx;height: 80rpx;margin: 0 auto;padding:10rpx;border-radius: 50%;}.name {padding-bottom: 10rpx;}

结果

微信小程序分类小图标导航相关推荐

微信小程序–分类导航
微信小程序–分类导航 UI直接给整个图片:里面包含文字和对应的分类导航图片 <view class="index_cate">< ...
微信小程序开发错误——底部导航栏没有显示完全
微信小程序开发错误--底部导航栏没有显示完全原因:由于在app.json中设置跳转页面时,假设有A.B.C.D四个图标(点击可以跳转),B和C的跳转页面相同,C的图标就会覆盖B的图标,B的图标就相当 ...
微信小程序——不同角色的导航栏显示不同
文章目录问题描述解决方法代码实现底部导航栏排查员存在的问题问题描述微信小程序的原生底部导航栏限制了数量(3-5个)且不能根据你的不用用户进行动态的底部导航栏变化,无法适应多种用户从 ...
微信小程序自定义头部标题导航栏
/*** 微信小程序头部自定义标题导航栏* * 参数:* pageTitle: 导航栏标题,默认不显示* navColor: 导航栏背景颜色,默认白色,透明为'transparent'属性值* noS ...
微信小程序中进行地图导航
前段时间一直都在做小程序做了两个月了,其中对于小程序还是有很不理解的地方看着一些大企业的小程序自己模仿其实还是有一些难度的,我觉得学习小程序看一遍文档是不够的我们要做的是看别人的例子对着文档一一对照! ...
微信小程序引入阿里巴巴图标库（不下载）
微信小程序引入阿里巴巴图标库(不下载)@TOC 阿里图标地址:https://www.iconfont.cn 第一步:选择资源管理-我的项目-选择Font class-查看在线链接-点击下方css链接 ...
微信小程序实现左侧滑动导航栏
微信小程序实现左侧滑动导航栏 1.左侧滑动导航栏图如下 2.这是我们左侧滚动栏的代码 wxml <view class='under_line'></view><view ...
微信小程序使用font-awesome图标库
微信小程序使用font-awesome图标库网上看到的方法,亲测成功:参考方法下载font-awesome字体包打开Transfonter网站,上传字体fontawesome-webfont.t ...
蚂蚁分类信息系统原生微信小程序百度小程序
蚂蚁分类信息系统原生微信小程序百度小程序,系统采用uniapp开发,小程序接口独立开发,兼容蚂蚁分类信息系统数据库.支持微信支付,百度支付
《微信小程序开发》页面导航最强详解 | 如何对小程序页面进行跳转？
<微信小程序开发> 页面导航最强详解 | 如何对小程序页面进行跳转? 文章目录 <微信小程序开发> 页面导航最强详解 | 如何对小程序页面进行跳转? 一.微信小程序导航二.命 ...

微信小程序分类小图标导航

微信小程序分类小图标导航相关推荐

最新文章

热门文章