微信小程序实现九宫格,小程序九宫格布局怎么做

—— 2020 ——

09/27

00:00

来源：

作者：未知

栏目：小程序开发

2020/9/27 0:00:00 来源：不详作者：未知

小程序九宫格的实现有几种方法，这里推荐用weui比较方便。

下面是实现步骤：

.js中添加数据

Page({

/**

* 页面的初始数据

*/

data: {

routers :[

{

text: '我的账户',

微信小程序实现九宫格,小程序九宫格布局怎么做

icon: '../../images/mine/mine_account.png',

url: '../myAccount/myAccount',

},

{

text: '我的合同',

icon: '../../images/mine/mine_contract.png',

url: '../myAccount/myAccount',

},

{

text: '浏览记录',

icon: '../../images/mine/mine_browing.png',

url: '../myAccount/myAccount',

},

{

text: '我要出租',

icon: '../../images/mine/mine_lease.png',

url: '../myAccount/myAccount',

},

{

text: '客服',

icon: '../../images/mine/mine_customService.png',

url: '../myAccount/myAccount',

},

{

text: '我的收藏',

icon: '../../images/mine/mine_collect.png',

url: '../myAccount/myAccount',

}

]

},

})

.wxml中，添加weui-grids

<view class="weui-grids">

<view class="weui-grid" wx:for="{{routers}}" wx:key="name">

<navigator url="{{item.url}}">

<view class="weui-grid__icon">

<image src=" {{item.icon}}" mode="scaleToFill" />

</view>

<text class="weui-grid__label">{{item.text}}</text>

</navigator>

</view>

</view>

wxss中设置样式

.weui-grids {

position: relative;

overflow: hidden;

margin-top: 10rpx;

}

.weui-grids:before {

content: " ";

position: absolute;

left: 0;

top: 0;

right: 0;

height: 1px;

border-top: 1px solid #D9D9D9;

color: #D9D9D9;

-webkit-transform-origin: 0 0;

transform-origin: 0 0;

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5);

}

.weui-grids: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);

}

.weui-grid {

position: relative;

float: left;

padding: 20px 10px;

width: 33.33333333%;

box-sizing: border-box;

background-color: white;

}

.weui-grid:before {

content:

【本站声明】
1、本站文章中所选用的图片及文字来源于网络以及用户投稿，由于未联系到知识产权人或未发现有关知识产权的登记，如有知识产权人并不愿意我们使用，如果有侵权请立即联系。
2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。

KESION 科汛软件
KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商，长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。
KESION 不断通过技术创新，提供产品和服务，助力企业向数字化转型，通过科技驱动商业革新，让商业变得更智慧！

▼点击进入科汛官网了解更多

热门标签

微信小程序 SaaS

上/下篇

小程序二维码怎么生成,怎么生成小程序二维码

最新消息报道，我们在使用小程序时，一般会通过扫小程序二维码来进入小程序，这种进入方式非常方便，避免了搜索，那么对于小程序开发者来说，小程序二维码要怎么生成呢？...

SaaS 2020/9/27 0:00:00
小程序怎么做自适应各种手机尺寸

最新消息显示，我们可以看到很多小程序界面，一些动画，画布无法在不同分辨率手机上实现自适应，下面小编就为大家解答小程序怎么做自适应各种手机尺寸...

SaaS 2020/9/27 0:00:00

换一换相关推荐

精选内容

热点精选

© 2006-2024 厦门科汛软件有限公司版权所有

ICP证闽B2-20190777 闽ICP备06009871号-1

闽公网安备 35020302001540号统一社会信用代码：91350206MA2XN2XQ4A 国家高新技术企业编号：GR201735100465 软件企业证书号：厦RQ-2017-0034 软件产品证书号：厦RC-2017-0005 认证联盟企业编号：928180109031687687593 国际权威认证：信息技术服务管理体系标准（ISO 20000）信息安全管理体系国际认证（ISO/IEC 27001）