微信小程序左右翻页效果(微信小程序实现九宫格效果)
类别:编程学习 浏览量:2957
时间:2021-09-30 00:46:06 微信小程序左右翻页效果
微信小程序实现九宫格效果本文实例为大家分享了微信小程序实现九宫格效果的具体代码,供大家参考,具体内容如下
1.九宫格实现示例图:
Tips: 说明:
使用 display: -webkit-flex;
对布局做兼容。
保证每排三个图标的两对对齐,采用:justify-content: space-between;
属性。
父元素必须设置 flex-wrap: wrap;
属性进行换行,否则会在一排展示。
个子元素的宽度width: 33.33333333%;
按照其占位大小分配。
使用justify-content:center;
属性设置元素居中。
使用flex-direction: column;
和flex-wrap: wrap;
属性设置icon
和text
元素竖直排列。
2.在 .js文件中定义数据源:
Page({ /** * 页面数据源 */ data: { iconColor: [ 'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple' ], iconStyle: [ { "type":"success", "size":30, "color":"#32CD32" }, { "type": "success_no_circle", "size": 30, "color": "orange" }, { "type": "info", "size": 30, "color": "yellow" }, { "type": "warn", "size": 30, "color": "green" }, { "type": "waiting", "size": 30, "color": "rgb(0,255,255)" }, { "type": "cancel", "size": 30, "color": "blue" }, { "type": "download", "size": 30, "color": "purple" }, { "type": "search", "size": 30, "color": "#C4C4C4" }, { "type": "clear", "size": 30, "color": "red" } ] } })
3.在 .wxss文件中定义样式如下:
/* 九宫格容器布局样式 */ .grid-item-container { display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; border-top: 1rpx solid #D9D9D9; } /* item容器样式 */ .grid-item-child { display:flex; display: -webkit-flex; justify-content:center; flex-direction: column; flex-wrap: wrap; float: left; width: 33.33333333%; height: 200rpx; box-sizing: border-box; background-color: #FFFFFF; border-right: 1rpx solid #D9D9D9; border-bottom: 1rpx solid #D9D9D9; } /* icon样式 */ .grid-item-icon { display:flex; display: -webkit-flex; justify-content:center; } /* 文本样式 */ .grid-item-label { display:flex; display: -webkit-flex; justify-content:center; color: #666; font-size: 14px; }
4.在 .wxml文件中具体使用:
<view class='grid-item-container'> <block wx:for="{{iconStyle}}" wx:key="index"> <view class='grid-item-child'> <view> <icon class='grid-item-icon' type='{{item.type}}' size='{{item.size}}' color='{{item.color}}'/> <text class='grid-item-label'>{{item.type}}</text> </view> </view> </block> </view>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 微信小程序静态页面详情(微信小程序基础教程之echart的使用)
- 微信小程序如何请求服务器数据(微信小程序学习笔记之页面配置与路由方式)
- flask项目微信小程序(Python Flask 搭建微信小程序后台详解)
- 微信小程序存token(小程序开发实现access_token统一管理)
- 微信小程序canvas缩放(微信小程序之html5 canvas绘图并保存到系统相册)
- 微信小程序js 抽奖概率(小程序实现筛子抽奖)
- 微信小程序映射设置(微信小程序虚拟列表的实现示例)
- 微信小程序开发如何实现自动保存(微信小程序开发实用技巧之数据传递和存储)
- 微信小程序计时器(微信小程序实现简单的计算器功能)
- 微信小程序开发完整操作流程(微信小程序开发之组件设计规范)
- 微信小程序转盘动画效果(微信小程序实现摇筛子效果)
- 9小时搞定微信小程序开发(关于加快微信小程序开发的一些小建议)
- 微信小程序获取时间(微信小程序wxs日期时间处理的实现示例)
- 微信小程序ui聊天窗口(微信小程序实现简单聊天室)
- 微信小程序通知验证签名方法(微信小程序实现电子签名)
- 微信小程序语音录入(微信小程序使用同声传译实现语音识别功能)
- 春天养佛肚竹,做好这几件事,叶绿根壮寓意好 越养越旺家(春天养佛肚竹做好这几件事)
- 律界衣品最好,时尚圈学识数高,41岁的Amal堪称现实版的傲骨贤妻(时尚圈学识数高)
- 刘智泰确认出演《Good Wife》 担纲男一号(刘智泰确认出演Good)
- 《傲骨之战》剧终 律政女魔头Diane,为什么是大女主天花板(傲骨之战剧终律政女魔头Diane)
- 汉族(汉族的祖先是谁)
- 中国有几个名族(中国有几个民族没列入56个民族)
热门推荐
- python实时输出图像(Python给图像添加噪声具体操作)
- 如何删除docker中已停止的容器(一条命令重启所有已停止的docker容器操作)
- sql server 进阶(SqlServer AS的用法)
- 从宝塔面板找网站会员数据(BT宝塔面板高并发大流量网站优化方案分享)
- python图书管理系统(python面向对象法实现图书管理系统)
- css3右侧栏伸缩效果(使用CSS3实现环形进度条效果)
- laravel数据库管理教程(Laravel基础_关于view共享数据的示例讲解)
- VPS跟云服务器的区别是什么?(VPS跟云服务器的区别是什么?)
- pythonopt用法(Python语言检测模块langid和langdetect的使用实例)
- laravel api 调试(laravel 实现设置时区的简单方法)