微信小程序|icon列表跳转不同界面
效果:
包含图片、文字,分列布局,点击对应图标跳转到相应界面
WXML:
<!-- 三个主要功能:文书服务,在线咨询,律师匹配跳转到对应页面,可以返回注意php后台和数据库搭建--><view class="task_cate"><navigatorclass='cate_text {{index == cateActive ? "cate_text_active" : ""}}'url="./{{item.path}}/{{item.path}}?title=redirect"hover-class="other-navigator-hover"open-type="redirect" wx:for="{{cateArr}}" class="cate_item" wx:key="cate" bindtap="clickCate" data-index="{{index}}" > <view class="cate_icon"> <image src="../../images/index/{{item.icon}}.png"></image> </view><view class='cate_text {{index == cateActive ? "cate_text_active" : ""}}'>{{item.text}}</view></navigator>
</view>
WXSS:
/* 图标样式 */
.task_text{height: 120rpx;margin: 40rpx auto;text-align: center;
}
.task_text .task_title{font-size: 35rpx;height: 70rpx;line-height: 70rpx;
}
.task_text .task_desc{font-size: 30rpx;height: 50rpx;line-height: 50rpx;color: #999999;
}
.task_cate{width: 660rpx;margin: 0 auto;display: flex;flex-wrap: wrap;margin-top: 40rpx;
}
.task_cate .cate_item{width: 220rpx;height: 150rpx;text-align: center;margin-bottom: 50rpx;}
.task_cate .cate_item .cate_icon{height: 130rpx;
}
.task_cate .cate_item .cate_icon image{width: 120rpx;height: 110rpx;
}
.task_cate .cate_item .cate_text{height: 60rpx;line-height: 30rpx;font-size: 30rpx;color:#555858;
}
.task_cate .cate_item .cate_text_active{color: #ffb5b5;
}
JavaScript:
// pages/index/index.js
Page({data: {cateArr:[{icon: 'icon1_paper',text: '文书服务',path:'p1_paperwork'},{icon: 'icon2_insult',text: '在线咨询',path:'p2_onlineinquiry'},{icon: 'icon3_lawyer',text: '律师匹配',path:'p3_lawyermatch'}]},})
待修改之处:若要修改大小需要手动计算,应优化为根据rpx的规则,输入列数,自动导入icon、text、path的组件
微信小程序|icon列表跳转不同界面相关推荐
- 微信小程序新闻列表详情页
微信小程序新闻列表详情页 不忘初心,方得始终.初心易得,始终难守 首先创建 post-detail 文件夹,创建四种文件. 修改 post.wxml 文件代码,给每个新闻块添加一个点击事件.并且我们要 ...
- 微信小程序----icon组件
当前效果体验二维码 如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 效果图 原生的icon组件的属性 WXML <view class="icon- ...
- vue 传参 微信_小猿圈web前端之微信小程序页面间跳转传参方式总结
原标题:小猿圈web前端之微信小程序页面间跳转传参方式总结 最近小程序发展的越来越快,很多大公司也在打造自己的小程序平台以及购物小程序等等,今天小猿圈web前端讲师就总结了关于微信小程序的知识点,首先 ...
- 微信小程序 视频列表 封面图 禁止多个视频同时播放
微信小程序视频列表用到的组件是 video 链接 https://developers.weixin.qq.com/miniprogram/dev/component/video.html 先附上 ...
- 新闻列表页flex_微信小程序新闻网站列表页
javascript 技术文章 开发 微信小程序新闻网站列表页 在app.json中可以设置所有文件的头部导航颜色 (是window属性的子属性) 在具体页面可以单独设置该页面的导航颜色 (直接写该属 ...
- 微信小程序新闻列表功能(读取文件、template)
微信小程序新闻列表功能(读取文件.template) 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件,和 post.js 文件中,某些键值对键 ...
- 微信小程序开发系列 (四) :微信小程序的页面跳转路由设计
笔者由于工作需要,曾经参加过一个微信小程序同 SAP 系统集成的项目,因此从零开始学习了微信小程序的开发知识.这里通过系列文章把自己所学分享出来,希望对相关学习者有所帮助. 本教程前面三篇文章: 微信 ...
- 微信小程序 新闻列表及详情页
微信小程序 新闻列表及详情页 页面效果 新闻列表 <view class="conatiner"><view class="news-item" ...
- 解决微信小程序使用switchTab跳转后页面不刷新的问题
解决微信小程序使用switchTab跳转后页面不刷新的问题 参考文章: (1)解决微信小程序使用switchTab跳转后页面不刷新的问题 (2)https://www.cnblogs.com/mmyk ...
最新文章
- android自定义弹框效果合集,android 自定义弹出框AlertDialog ,很炫的哦
- 计算机丢失d3dcompiler,win7系统提示缺少D3DCompiler_47.dll文件怎么办
- 基于ASP.NET Core api 的服务器事件发送
- Javac可以编译,Java显示找不到或无法加载主类
- yum 多线程插件,apt多线程插件
- 等午饭吃过后的dwzjzx
- python 第13天作业
- 基本sql语句--入门语句
- windows上jupyter notebook主题背景、字体及扩展插件配置(集成vim环境)
- 最好用的十六进制编辑器 010 Editor
- 如何使用Python玩转PDF各种骚操作?你看了就知道。
- python返回对象_函数返回一个对象-python
- Ubuntu 20.04桌面美化
- Windows 进程激活服务
- 一、应广单片机的Mini-C语言基础
- wpf基于DevExpress实现折线图的两种方法
- python-for x in range (注意要点、细节)
- Leetcode 317. Shortest Distance from All Buildings (python+cpp)
- TweenMax逐帧动画
- android仿咸鱼底部导航栏,Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果...
热门文章
- vue中如何动态的绑定图片
- Arcmap做地图要领总结
- 扫码枪(条码枪)v1.0可以实现无焦点捕获扫码输入,并可上传数据到服务器
- 用python验证猜想之类的例子_python验证卡普耶卡(D.R.Kaprekar)6174猜想
- Boosting和Bagging区别
- uboot启动之BL1阶段的分析1
- NANK南卡无线蓝牙耳机体验:身材虽大,续航却格外长
- 编写各种outofmemory/stackoverflow程序
- 蓝牙芯片|伦茨科技-智能蓝牙BLE5.2芯片ST17H66
- form 表单 发送到邮箱