微信小程序实现九宫格效果

本文实例为大家分享了微信小程序实现九宫格效果的具体代码,供大家参考,具体内容如下

1.九宫格实现示例图:

Tips: 说明:

使用 display: -webkit-flex;对布局做兼容。

保证每排三个图标的两对对齐,采用:justify-content: space-between;属性。

父元素必须设置 flex-wrap: wrap;属性进行换行,否则会在一排展示。

个子元素的宽度width: 33.33333333%;按照其占位大小分配。

使用justify-content:center;属性设置元素居中。

使用flex-direction: column;flex-wrap: wrap;属性设置icontext元素竖直排列。

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序项目实践之九宫格实现及item跳转功能

    效果图: 实现效果图红色线包含部分的九宫格效果,并附带item点击时间.  具体实现: 1.首先添加图片资源文件    在项目根目录新建一个目录,取名为images , 用于存放图片资源,然后添加进入几张图片 2.在home目录下的home.js 文件中(参照前两篇小程序实践文章) 进行数据源的配置 数据源为一个数组,每个数组元素为一个对象,该对象包含name(item文字),img(item示意图),url(点击该item跳转目录) 3.依据列表渲染的知识点进行home.wxml的编程   

  • 微信小程序 九宫格实例代码

    微信小程序 九宫格 实现效果图: 小程序是长在微信上的,是移动端的界面,为了能够更方便的使用,我们常常希望使用九宫格界面的方式作为导航,那要如何实现呢? 基于一个简单的思考,九宫格就是三行三列,如果把行作为一个单位,再将每一行分成三列,那是不是就可以了?我们实践一下. 首先来考虑九宫格数据的生成,每一个格子需要有一个图标.一个标题.一个便于跳转的路由,那天现在我们有九个页面,所以定义一个一维数组即可.为了更好的进行后续的配置,我们将这个数组独立到一个文件中routes.js,然后将其在index

  • 微信小程序实现九宫格抽奖

    本文实例为大家分享了微信小程序实现九宫格抽奖的具体代码,适用于年会抽奖,供大家参考,具体内容如下 效果图比较卡顿,真实运行效果是旋转的 用到的素材: 实现步骤: 实现原理 改变每一项的透明度实现选中效果.利用setTimeOut时间使旋转速度越来越慢.达到慢慢停止的效果.实际应用中可以将9张奖品图片和中奖项均通过接口返回.以方便奖品的调整. 1.布局绘制 <view class="container"> 停止位置:<input value='{{luckPositio

  • 微信小程序实现九宫格效果

    本文实例为大家分享了微信小程序实现九宫格效果的具体代码,供大家参考,具体内容如下 1.九宫格实现示例图: Tips: 说明: 使用 display: -webkit-flex;对布局做兼容. 保证每排三个图标的两对对齐,采用:justify-content: space-between;属性. 父元素必须设置 flex-wrap: wrap;属性进行换行,否则会在一排展示. 个子元素的宽度width: 33.33333333%;按照其占位大小分配. 使用justify-content:cente

  • 微信小程序 tabs选项卡效果的实现

    微信小程序 tabs选项卡效果 前言: 最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下.思路如下: 1.首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类 2.选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块 3.使用三

  • 微信小程序五星评分效果实现代码

    微信小程序五星评分效果实现代码 很多做过电商项目的朋友会经常用到评分的功能,我这里正好写了一个例子,发出来分享一下: 我写的是5分满分制的,首先,准备3个图片, ,像这样的,分别代表分数为0,0.5,1 时的状态, 效果图:(以3.5为例) 然后上代码: js: function pingfenxing(pingfen){ var that=this, //这里是图片的路径,自己需要改 data={ ling:"img/pingfen0.png", zheng:"img/pi

  • 微信小程序实现日历效果

    本文实例为大家分享了微信小程序实现日历效果的具体代码,供大家参考,具体内容如下 效果预览: wxml部分: <view class='box1' style='width: {{ sysW * 7 }}px'> <view class='dateBox'>{{ year }} - {{ month}}</view> <block wx:for='{{ weekArr }}'> <view style='width: {{ sysW }}px; heig

  • 微信小程序实现选项卡效果

    本文实例为大家分享了微信小程序实现选项卡效果展示的具体代码,供大家参考,具体内容如下 demo.wxss .swiper-tab{ width: 100%; border-bottom: 2rpx solid #777777; text-align: center; line-height: 80rpx;} .swiper-tab-list{ font-size: 30rpx; display: inline-block; width: 33.33%; color: #777777; } .on

  • 微信小程序实现走马灯效果实例

    前言 日常开发中,我们经常会遇到文字横向循环滚动的效果,俗称走马灯,也是项目中经常会使用的一个功能.在网页web前端很常见,今天就介绍下小程序的实现方式,一种是用的css样式实现,另一种是运用小程序的动画功能实现. @keyframes 实现 利用@keyframes的规则来实现,非常方便,只需要css样式就可以满足,使用方法跟web上一样. <view class="marquee"> <text>这是一段滚动的文字</text> </vie

  • 微信小程序实现九宫格翻牌动画

    本文实例为大家分享了微信小程序实现九宫格翻牌的具体代码,供大家参考,具体内容如下 9宫格翻牌需求: 1.进来时平铺9个格子显示 2.点击开始抽奖时洗牌动作 3.洗完牌后呈现9个都是未翻牌的状态 4.点击任意一个牌子,有翻转的动作 5.翻转结束后出现中奖的弹窗 555,当时真的一点一点调动画 敲黑板~ wxml: <view class="main_border"> <view class="inside_border viewport-flip"&

  • uniapp实现微信小程序的电子签名效果(附demo)

    目录 1.标签和样式 2.横屏切换 3.绘图 3.1.初始化数据会吧? 3.2.触摸开始时获取起点,会吧? 3.3.触摸移动获取路径点,会吧? 3.4.触摸结束,将未绘制的点清空防止对后续路径产生干扰,简单吧? 3.5.绘制笔迹,没得问题吧? 4.扫尾处理 画布可以做很多事情,比如可以绘图,也可以做海报.在这里只是想拿它来的实现亲笔签名,开启不一样的亲笔签名姿势. 开发框架:uniapp开发语言:vue2展示平台:微信小程序(实际可以兼容多个平台) 标签和样式没什么好说的,这里绘制了简单的页面,

  • 微信小程序的动画效果详解

    前言 由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是高度封装的H5,封装了各种组件.根据官方的说法小程序运行不是在浏览器当中.姑且算是微信的插件吧. 二.小程序不能操纵DOM 小程序不能直接操纵DOM,鼓励的是数据绑定.例如vue.js这种.所以个人而言感觉跟如果习惯了用JQ去操纵DOM的开发者很不习惯.需要一个习惯的过程. 三.小程序不能引用JQ

随机推荐