pp电子

登录
免费开通
产品中心
更多服务

微信小程序实现九宫格,小程序九宫格结构怎么做

—— 2020 ——
09/27
00:00

泉源：

作者：未知

阅读：0

栏目：小程序开发

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 pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商，，，，，恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。

KESION 一直通过手艺立异，，，，，提供产品和服务，，，，，助力企业向数字化转型，，，，，通过科技驱动商业刷新，，，，，让商业变得更智慧！



▼点击进入pp电子官网相识更多



热门标签
微信小程序 SaaS
上/下篇

  • 小程序二维码怎么天生,怎么天生小程序二维码

    最新新闻报道，，，，，我们在使用小程序时，，，，，一般会通过扫小程序二维码来进入小程序，，，，，这种进入方式很是利便，，，，，阻止了搜索，，，，，那么关于小程序开发者来说，，，，，小程序二维码要怎么天生呢？？？？ ？...

    SaaS 2020/9/27 0:00:00

  • 小程序怎么做自顺应种种手机尺寸

    最新新闻显示，，，，，我们可以看到许多小程序界面，，，，，一些动画，，，，，画布无法在差别分辨率手机上实现自顺应，，，，，下面小编就为各人解答小程序怎么做自顺应种种手机尺寸...

    SaaS 2020/9/27 0:00:00
换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
微信小程序实现九宫格,小程序九宫格结构怎么做 - KESIO