精华内容
下载资源
问答
  • 微信小程序九宫格布局
    2021-06-10 06:18:29

    一、概述

    效果图

    二、实现

    定义数据源

    test.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"
          }
        ]
      }
    })
    
    View Code

    定义样式

    test.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;
    }
    
    View Code

    说明:

    使用 display: -webkit-flex;对布局做兼容。
    保证每排三个图标的两对对齐,采用:justify-content: space-between;属性。
    父元素必须设置 flex-wrap: wrap;属性进行换行,否则会在一排展示。
    每个子元素的宽度width: 33.33333333%;按照其占位大小分配。
    使用justify-content:center;属性设置元素居中。
    使用flex-direction: column;和flex-wrap: wrap;属性设置icon和text元素竖直排列。

    test.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>
    
    View Code

    本文参考链接:

    https://blog.csdn.net/mjb00000/article/details/90513424

    更多相关内容
  • true, name: '微信', url: '', icon: '/imgs/wechat.png', code: '11' }, { isbind: true, name: '火车票', url: '', icon: '/imgs/tick.png', code: '11' }, ] }, { title: '家庭', items: [{ isbind: true, name: ...

    先上效果图

    0ec2e4f1aa64edb125a14fb6a89cf0ea.png

    使用注意事项

    1:注意在app.json中注册页面路径

    2:如果要增加新的item,可到js中对listservice数组进行增加

    3:listservice参数[

    title:分类标题

    items:这个分类下的所有item[

    name:这个item的名字

    url:这个item点击跳转路径

    ]]

    wxml代码

    {{item.title}}

    {{item.detail}}

    {{item.name}}

    wxss

    page{

    background:#eeecec;

    }

    .enable{

    z-index: 99999;

    background: #404040;

    opacity: 0.8;

    position: absolute;

    width: 100;

    bottom: 0px;

    top: 0px;

    left: 0px;

    right: 0px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #ffffff;

    }

    .enable text{

    color: #fafafa;

    font-size: 18px;

    font-weight: bold;

    }

    .grid {

    background: #ffffff;

    margin-bottom:10px;

    }

    .services{

    background:#f5f5f5;

    }

    .navigator{

    padding:20px 10px;

    }

    .grid-items {

    position: relative;

    overflow: hidden;

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    }

    .grid-items::before{

    content: " ";

    position: absolute;

    left: 0;

    top: 0;

    right: 0;

    height: 1px;

    border-top: 1px solid #d9d9d9;

    }

    .grid-items::after{

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 1px;

    bottom: 0;

    border-left: 1px solid #d9d9d9;

    color: #d9d9d9;

    -webkit-transform-origin: 0 0;

    transform-origin: 0 0;

    -webkit-transform: scalex(0.5);

    transform: scalex(0.5);

    }

    .grid-item{

    position: relative;

    float: left;

    width: 33.33333333%;

    box-sizing: border-box;

    }

    .grid-item::before{

    content: " ";

    position: absolute;

    right: 0;

    top: 0;

    width: 1px;

    bottom: 0;

    border-right: 1px solid #d9d9d9;

    color: #d9d9d9;

    -webkit-transform-origin: 100% 0;

    transform-origin: 100% 0;

    -webkit-transform: scalex(0.5);

    transform: scalex(0.5);

    }

    .grid-item::after{

    content: " ";

    position: absolute;

    left: 0;

    bottom: 0;

    right: 0;

    height: 1px;

    border-bottom: 1px solid #d9d9d9;

    color: #d9d9d9;

    -webkit-transform-origin: 0 100%;

    transform-origin: 0 100%;

    -webkit-transform: scaley(0.5);

    transform: scaley(0.5);

    }

    .item-content{

    position: relative;

    padding: 0px 0px;

    width: 100%;

    box-sizing: border-box;

    }

    .item-content-icon{

    width: 32px;

    height: 32px;

    margin: 0 auto;

    }

    .item-content-icon image{

    display: block;

    width: 100%;

    height: 100%;

    }

    .weui-grid_label {

    display: block;

    text-align: center;

    font-weight: bold;

    color: #707070;

    font-size: 16px;

    white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;

    }

    .grid-title{

    display: block;

    font-weight: bold;

    color: #707070;

    font-size: 14px;

    white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;

    padding: 7px;

    }

    .mask{

    width: 100%;

    height: 100%;

    position: absolute;

    z-index: 999;

    text-align: center;

    background: rgba(0, 0, 0, 0.619);

    color: #eee8e8;

    line-height: 32px;

    display: flex;

    }

    最重要的js

    const app = getapp()

    page({

    data: {

    servers:[]

    },

    onload: function () {

    var listservice = [

    {

    title: '社会',

    items: [{

    name: '捐助',

    url: '/pages/testpage/testpage',

    icon: '/imgs/love.png',

    code: '11'

    },

    {

    isbind: true,

    name: '捐衣物',

    url: '',

    icon: '/imgs/clothes.png',

    code: '11'

    }

    ]

    },

    {

    title: '生活',

    items: [{

    name: '微信',

    url: '',

    icon: '/imgs/wechat.png',

    code: '11'

    },

    {

    isbind: true,

    name: '微信',

    url: '',

    icon: '/imgs/wechat.png',

    code: '11'

    }, {

    isbind: true,

    name: '火车票',

    url: '',

    icon: '/imgs/tick.png',

    code: '11'

    },

    ]

    },

    {

    title: '家庭',

    items: [{

    isbind: true,

    name: '账单',

    url: '',

    icon: '/imgs/bill.png',

    code: '11'

    }

    ]

    }, {

    title: '其他服务',

    items: []

    }

    ]

    this.setdata({

    servers: listservice

    })

    },

    /**

    * 当点击item的时候传递过来

    */

    bindnavigator: function (e) {

    wx.navigateto({

    url: e.currenttarget.dataset.path,

    })

    },

    })

    展开全文
  • 微信小程序九宫格图的排版----注意层次排版(层次最重要) 1.wxml中的代码(图片和数据都是网页获取来的,详细下看) 2.排版 3.使用.js文件进行事件加载 | | | |

    微信小程序九宫格图的排版----注意层次排版(层次最重要)

    在这里插入图片描述

    1.wxml中的代码(图片和数据都是网页获取来的,详细下看)
    在这里插入图片描述
    2.排版
    在这里插入图片描述
    在这里插入图片描述
    3.使用.js文件进行事件加载
    在这里插入图片描述

    |
    |

    在这里插入图片描述
    |
    |
    在这里插入图片描述

    展开全文
  • 主要介绍了微信小程序项目实践之九宫格实现及item跳转功能,需要的朋友可以参考下
  • 根据返回的数组长度进行判断 显示对应布局 例如 arr.length为9,那么就应该显示9宫格盒子布局 其它盒子不显示 <view class="picture_box"> <!-- 单张图片 --> <view class="picture_list" wx:if=...
    效果图(目前数据都是自己写死的数据 到时是根据api返回显示的)

    在这里插入图片描述
    在这里插入图片描述

    总共分为 1张图 2张图 4张图 9张图 然后进行对应的样式布局
    代码:
    根据返回的数组长度进行判断 显示对应布局 例如 arr.length为9,那么就应该显示9宫格盒子布局 其它盒子不显示
    <view class="picture_box">
      
      <!-- 单张图片 -->
      <view class="picture_list" wx:if="{{picturelist.length<2}}">
        <!-- 单张图片展示 -->
        <image mode="scaleToFill" wx:for="{{picturelist}}" wx:key="index" src="{{item}}" bindtap="pictureclick"
          data-index="{{index}}"></image>
        <!-- 单个视频展示 -->
        <!-- <video  src="http://static.common.ylbyte.com/video/1.mp4"></video> -->
      </view>
    
      <!-- 2张图片 -->
      <view class="picture_list_two" wx:if="{{picturelist.length>1 && picturelist.length<3}}">
        <image mode="scaleToFill" wx:for="{{picturelist}}" wx:key="index" src="{{item}}" bindtap="pictureclick"
          data-index="{{index}}"></image>
      </view>
    
      <!-- 4张图片 -->
      <view class="picture_list_four" wx:if="{{picturelist.length>3 && picturelist.length<5}}">
        <image mode="scaleToFill" wx:for="{{picturelist}}" wx:key="index" src="{{item}}" bindtap="pictureclick"
          data-index="{{index}}"></image>
      </view>
    
      <!-- 多张图片 -->
      <view class="picture_list_N" wx:if="{{picturelist.length>5}}">
        <image mode="aspectFill" wx:for="{{picturelist}}" wx:key="index" src="{{item}}" bindtap="pictureclick"
          data-index="{{index}}"></image>
      </view>
    </view>
    
    目前项目有需求 我是这样写的 感觉还行吧 也可能有更好的方式~就是不知道 哈哈

    在这里插入图片描述

    展开全文
  • 微信小程序九宫格布局

    千次阅读 2020-04-09 15:43:22
    要求:写出九宫格布局,且最左侧无左边框和最右侧的元素无右边框 xml部分代码如下: <view class='chose-items'> <view class="choseitem wx:for="{{tabItms}}" wx:key="{{index}}" style="{{(index+1)%...
  • 微信小程序九宫格布局方案

    千次阅读 2018-12-24 17:27:00
    2018转眼即将逝去了,由于近期在弄一个小程序的项目的原因,今天在这里记录一下小程序九宫格布局方案,以备后期需要和相关知识温习。  对于整个小程序项目,原生开发小程序的方式这里就不多说了,官方有确切的...
  • 使用flex布局模型和wx:for属性仿微信“钱包”页面实现九宫格 项目创建完毕之后,在根目录中会生成文件夹pages用于存放页面文件。一般来说首页默认命名为index,表示小程序运行的第一个页面; 将app.json文件内...
  • 效果二维码 效果图 ... 微信小程序专栏 前端笔记专栏 微信小程序实现部分高德地图功能的DEMO下载 微信小程序实现MUI的部分效果的DEMO下载 微信小程序实现MUI的GIT项目地址 微信小程序实例列表 前端笔记列表 游戏列表
  • 本文实例为大家分享了微信小程序实现九宫格抽奖的具体代码,适用于年会抽奖,供大家参考,具体内容如下 效果图比较卡顿,真实运行效果是旋转的 用到的素材: 实现步骤: 实现原理 改变每一项的透明度实现选中效果...
  • 微信小程序九宫格抽奖和转盘抽奖的实现

    千次阅读 多人点赞 2021-05-07 20:05:36
    好了,下面是常见的两种抽奖方式:九宫格和转盘,在实际项目中用的还不错,分享给大家。 一、九宫格抽奖: 效果: 思路:    首先是结构上,用弹性布局就可以了,每一个奖品的宽度设置成3分之1,超
  • 微信小程序 九宫格实现效果图:小程序是长在微信上的,是移动端的界面,为了能够更方便的使用,我们常常希望使用九宫格界面的方式作为导航,那要如何实现呢?基于一个简单的思考,九宫格就是三行三列,如果把行作为...
  • 微信小程序-九宫格gridView封装实现
  • *this" bindtap="gridTap"> <text class="text">{{item.text}} <text class="num">{{item.num}} <text clas
  • 优化微信小程序九宫格布局方案

    万次阅读 多人点赞 2018-02-10 10:29:32
    2018年了,时间过的真快,最近想扩展一下知识面,也顺便学习一下比较成熟的微信小程序开发平台,于是乎就操刀微信,抽空花了几天看完微信小程序的开放平台(https://mp.weixin.qq.com/debug/wxadoc/dev/index.html),...
  • 微信小程序图片上传&九宫格拖拽组件 前言 图片上传加九宫格拖拽是一个比较常用的组件,常用于发帖或者评论等内容上传模块,我这篇九宫格拖拽的思路是借鉴了一款优雅的小程序拖拽排序组件实现这篇文章 实现效果...
  • (在真机上的效果就不演示了,是差不多的)实现思路布局在这里运用到了微信小程序的moveable-area和moveable-view两个标签。moveable-area是可拖拽的区域,需要设置其宽高。由于图片的大小我是根据屏幕来动态设置的,...
  • 九宫格布局-六个项目的布局:黄菊华老师 .jiugongge{ width:250px; height:250px; background-color:#CCC; display:flex;flex-wrap:wrap;} .xiangmu{ width:70px; height:70px; background-color:#0CF; margin:5...
  • 本文实例为大家分享了微信小程序实现九宫格抽奖的具体代码,适用于年会抽奖,供大家参考,具体内容如下效果图比较卡顿,真实运行效果是旋转的用到的素材:实现步骤:实现原理改变每一项的透明度实现选中效果。...
  • <view class="item-img"> <image class="item-img-img{{item.voucher_image.length}}" wx:for="{{item.voucher_image}}" wx:for-item="it" wx:for-index="idx" wx:key="idx" src="{{it}}">...
  • 微信小程序九宫格抽奖

    万次阅读 热门讨论 2018-10-11 17:23:55
    效果图比较卡顿,真实运行效果是旋转的 用到的素材:   ...实际应用中可以将9张奖品图片和中奖项均通过接口返回...1.布局绘制 &lt;view class="container"&gt; 停止位置:&lt;input va...
  • 微信小程序—Flex布局

    千次阅读 2022-05-12 09:44:50
    小程序布局
  • 最近在学习小程序,看到别人九宫格的做法,就留个笔记,也分享给大家 效果图如下所示 .wxml <image mode=widthFix src='/images/dfk.png'></image> 退换/售后 查看明细</view>
  • 如何使用CSS实现如下的九宫格布局: 代码如下: <view class="form-first-bottom"> <view class="add-container" wx:for="{{upimgarr}}" wx:key="unique"> <image class="selectclass1" src=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,078
精华内容 431
热门标签
关键字:

微信小程序九宫格布局