微信小程序左右翻页效果(微信小程序实现九宫格效果)
类别:编程学习 浏览量: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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 微信小程序存token(小程序开发实现access_token统一管理)
- 苹果微信小程序页面空白(iPhoneX安全区域Safe Area底部小黑条在微信小程序和H5的屏幕适配)
- 微信小程序图片加特效(微信小程序实现可实时改变转速的css3旋转动画实例代码)
- 微信小程序引用模板的函数(微信小程序页面与组件之间信息传递与函数调用)
- 微信小程序数学公式(微信小程序计算器实例详解)
- 微信小程序开发简单计算器(小程序实现计算器功能)
- 微信小程序css使用技巧(微信小程序 CSS filter滤镜的使用示例详解)
- 微信小程序语音录入(微信小程序使用同声传译实现语音识别功能)
- 微信小程序接口返回数据怎么弄(微信小程序页面返回传值的4种解决方案汇总)
- 微信小程序中的代码怎么编辑(微信小程序新手入门之自定义组件的使用)
- 微信小程序签名怎么操作(微信小程序实现简单手写签名组件的方法实例)
- 微信小程序开发模式(微信小程序引入Vant框架的全过程记录)
- 微信小程序获取手机信息(微信小程序获取手机号的踩坑记录)
- 宝塔小程序制作(宝塔面板微信小程序使用图文教程)
- 微信小程序抽签如何抽中(JavaScript实现班级抽签小程序)
- 微信小程序接入第三方支付的方法(小程序通过小程序云实现微信支付功能实例)
- 赏读 八月再见,九月你好(赏读八月再见九月你好)
- 散文 八月再见,九月,我在风中等你(散文八月再见九月)
- 8月再见 9月你好(8月再见)
- 魔兽世界 设计师爆料,原始版本并无PVP,跨阵营属于返璞归真(魔兽世界设计师爆料)
- 吐槽完《弧光大作战》之后,我们和设计师聊了聊魔兽首款手游的立项初衷和未来(吐槽完弧光大作战之后)
- 魔兽争霸3自定义战役少年杰雷 2(魔兽争霸3自定义战役少年杰雷)
热门推荐
- 在php中遍历数组使用(PHP读取远程txt文档到数组并实现遍历)
- mysql中group_concat
- python如何判断是否为回文数(对python判断是否回文数的实例详解)
- dockerfile镜像案例(Dockerfile构建自定义镜像的实现)
- python环境怎么安装pip(python2.7 安装pip的方法步骤管用)
- 阿里云服务器清除密码(阿里云服务器忘记密码怎么办?阿里云ECS密码重置图文教程)
- phpredis存储对象(PHP使用redis位图bitMap 实现签到功能)
- vue怎么引入axios(如何用vue封装axios请求)
- 虚拟主机流量什么意思(虚拟主机流量会受到什么限制?)
- dedecms可以长期使用吗(dedecms5.7 文章不能发布问题探讨及解决方法)