微信小程序九宫格布局

先上效果图

使用注意事项

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

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

3:listService参数[
title:分类标题
items:这个分类下的所有Item[
name:这个Item的名字
url:这个Item点击跳转路径
icon:图标
]
]

WXML代码


<view id='services' class='services'><view class="grid" wx:for="{{servers}}" wx:key=""><view class='grid-title'><text>{{item.title}}</text></view><view class='grid-items'><block wx:for="{{item.items}}" wx:key=""><view class='grid-item'><view wx:if="{{item.enabled}}" class='mask'><text>{{item.detail}}</text></view><view class='navigator' data-path='{{item.url}}' data-isBind='{{item.isBind}}' bindtap='bindNavigator'  hover-class="none"><view class='item-content'><view class="item-content-icon"><image src="{{item.icon}}" mode="scaleToFill" /></view><text class="weui-grid_label">{{item.name}}</text></view></view></view></block></view></view>
</view>

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,})},
})

微信小程序九宫格布局相关推荐

android中实现微信九宫格,微信小程序九宫格布局
先上效果图使用注意事项 1:注意在app.json中注册页面路径 2:如果要增加新的item,可到js中对listservice数组进行增加 3:listservice参数[ title:分类标题 ...
java小程序九宫格_微信小程序九宫格布局
先上效果图使用注意事项 1:注意在app.json中注册页面路径 2:如果要增加新的Item,可到js中对listService数组进行增加 3:listService参数[ title:分类标题 ...
7.微信小程序（布局适配与物理逻辑像素）
微信小程序(布局适配与物理逻辑像素) 前言移动端开发经常遇到一些概念:物理像素.逻辑像素.像素密度.像素比等,本节来详细介绍下关键词: 屏幕尺寸.物理像素/屏幕分辨率/物理分辨率.逻辑像素DIP. ...
微信小程序中布局使用的css布局语法
微信小程序的布局是基于css的布局,可以参考一些学习网站上面的css的基础学习以下是布局的一些语法规则 class 用 .class{} id 用 #id{} 类的子元素添加css (1 ...
image 微信小程序flex_微信小程序flex布局案例(1)
微信小程序 flex 布局案例一前言最近在学习微信小程序时,看到很多布局都用到了 flex 布局,其实 flex 布局学习过好多东西不用就忘记了,这次用上就只得再去看了,争取学会.下面是我做的简单 ...
微信小程序九宫格图的排版----注意层次排版（层次最重要）
微信小程序九宫格图的排版----注意层次排版(层次最重要) 1.wxml中的代码(图片和数据都是网页获取来的,详细下看) 2.排版 3.使用.js文件进行事件加载 | | | |
微信小程序九宫格预览+单张图片预览
我们废话不多说直接上效果图下面是代码  <image style="width:550rpx; height: 600rpx;" sr ...
微信小程序flex布局怎么实现上中下3行铺满整个窗口。
问题描述: 在微信小程序中使用flex实现上中下3行布局铺满整个窗口. 如图 **WXML ** <!--/* ***HotApp云笔记,基于HotApp小程序统计云后台 ***免费云后台申请地 ...
【小程序与公众号】微信小程序九宫格抽奖（抽奖完全随机）
上图话不多说直接上图,抽奖是顺时针又快变慢(还原抽奖的动画)进行抽奖,抽奖的几率都是随机源码接下来展示的就是微信小程序中的九宫格抽奖说明适用范围抽奖逻辑只是原生JS,通过数据进行驱动,因此 ...

微信小程序九宫格布局

微信小程序九宫格布局相关推荐

最新文章

热门文章