舟山闪爸电子技术有限公司

產(chǎn)品中心
更多服務(wù)

微信小程序?qū)崿F(xiàn)九宮格,小程序九宮格布局怎么做

—— 2020 ——
09/27
00:00

來源：

作者：未知

閱讀：0

欄目：小程序開發(fā)

2020/9/27 0:00:00 來源：不詳 作者：未知
小程序九宮格的實現(xiàn)有幾種方法，這里推薦用weui比較方便。
下面是實現(xiàn)步驟：
 
.js中添加數(shù)據(jù)
Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    routers :[
      {
        text: '我的賬戶',

微信小程序?qū)崿F(xiàn)九宮格,小程序九宮格布局怎么做

        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中設(shè)置樣式
 
.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、本站文章中所選用的圖片及文字來源于網(wǎng)絡(luò)以及用戶投稿，由于未聯(lián)系到知識產(chǎn)權(quán)人或未發(fā)現(xiàn)有關(guān)知識產(chǎn)權(quán)的登記，如有知識產(chǎn)權(quán)人并不愿意我們使用，如果有侵權(quán)請立即聯(lián)系。
  2、本網(wǎng)站不對文章中所涉及的內(nèi)容真實性、準(zhǔn)確性、可靠性負(fù)責(zé)，僅系客觀性描述，如您需要了解該類商品/服務(wù)詳細(xì)的資訊，請您直接與該類商品/服務(wù)的提供者聯(lián)系。


KESION 科汛軟件

KESION 科汛軟件是國內(nèi)領(lǐng)先的在線教育軟件及私域社交電商軟件服務(wù)提供商，長期專注于為企業(yè)提供在線教育軟件及社交電商SaaS平臺解決方案。
公司核心產(chǎn)品云開店SaaS社交電商服務(wù)平臺、在線教育SaaS服務(wù)平臺、教育企業(yè)數(shù)字化SaaS云平臺、企微營銷助手、私有化獨(dú)立部署品牌網(wǎng)校和在線教育咨詢等。

KESION 不斷通過技術(shù)創(chuàng)新，提供產(chǎn)品和服務(wù)，助力企業(yè)向數(shù)字化轉(zhuǎn)型，通過科技驅(qū)動商業(yè)革新，讓商業(yè)變得更智慧！



▼點(diǎn)擊進(jìn)入科汛官網(wǎng)了解更多



熱門標(biāo)簽
微信小程序 SaaS
上/下篇

  • 小程序二維碼怎么生成,怎么生成小程序二維碼

    最新消息報道，我們在使用小程序時，一般會通過掃小程序二維碼來進(jìn)入小程序，這種進(jìn)入方式非常方便，避免了搜索，那么對于小程序開發(fā)者來說，小程序二維碼要怎么生成呢？...

    SaaS 2020/9/27 0:00:00

  • 小程序怎么做自適應(yīng)各種手機(jī)尺寸

    最新消息顯示，我們可以看到很多小程序界面，一些動畫，畫布無法在不同分辨率手機(jī)上實現(xiàn)自適應(yīng)，下面小編就為大家解答小程序怎么做自適應(yīng)各種手機(jī)尺寸...

    SaaS 2020/9/27 0:00:00
換一換相關(guān)推薦
精選內(nèi)容
熱點(diǎn)精選