頁(yè)面展示

項(xiàng)目鏈接

https://download.csdn.net/download/weixin_45525272/17042019

項(xiàng)目設(shè)計(jì)

app.json

{
    "pages": [
        "pages/index/index",
        "pages/wallet/wallet"
    ],
    "sitemapLocation": "sitemap.json",
    "tabBar": {
      "list": [{
        "pagePath": "pages/index/index",
        "text": "發(fā)現(xiàn)",
        "iconPath": "/images/games.png",
        "selectedIconPath": "/images/games.png"
      },
      {
        "pagePath": "pages/wallet/wallet",
        "text": "錢包",
        "iconPath": "/images/shopping.png",
        "selectedIconPath": "/images/shopping.png"
      }]
    }
}

index（發(fā)現(xiàn)頁(yè)面）

wxml

<!--pages/index/index.wxml-->
<view class='container'>
  <view class='listGroup' wx:for='{{list}}' wx:for-item='group' wx:key='group{{index}}'>
    <view class='listItem' wx:for='{{group}}' wx:for-item='row' wx:key='row{{index}}'>
      <image src='{{row.icon}}'></image>
      <text>{{row.text}}</text>
      <image src='/images/arrow.png'></image>
    </view>
  </view>
</view>

wxss

/* pages/index/index.wxss */
/*背景容器樣式*/
.container{
  height: 100vh;/*高度為100視窗，寫(xiě)成100%無(wú)效*/
  background-color: silver;/*背景顏色為銀色*/
  display: flex;/*flex布局模型*/
  flex-direction: column; /*垂直布局*/
}

/*列表組樣式*/
.listGroup{
  background-color: white;/*背景顏色為白色*/
  margin: 20rpx 0;/*上下外邊距20rpx，左右0*/
}

/*列表項(xiàng)單行樣式*/
.listItem{
  display: flex;/*flex布局模型*/
  flex-direction: row; /*水平布局*/
  align-items: center; /*垂直方向居中*/
  border: 1rpx solid silver;/*1rpx寬的銀色實(shí)線邊框*/
  padding: 10rpx;/*內(nèi)邊距10rpx*/
}

/*圖標(biāo)的尺寸*/
image{
  width: 80rpx;/*寬度*/
  height: 80rpx;/*高度*/
  margin: 0 15rpx;/*上下外邊距0，左右外邊距15rpx*/
}

/*文本樣式*/
text{
  font-size: 40rpx;/*字體大小40rpx*/
  flex-grow: 1;/*擴(kuò)張多余空間寬度*/
}

js

// pages/index/index.js
Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    list: [
      //第1組列表
      [{ text: '朋友圈', icon: '/images/moments.png' }],
      //第2組列表
      [
        { text: '掃一掃', icon: '/images/scan.png' },
        { text: '搖一搖', icon: '/images/shake.png' }
      ],
      //第3組列表
      [
        { text: '看一看', icon: '/images/topStories.png' },
        { text: '搜一搜', icon: '/images/search.png' }
      ],
      //第4組列表
      [
        { text: '購(gòu)物', icon: '/images/shopping.png' },
        { text: '游戲', icon: '/images/games.png' }
      ],
      //第5組列表
      [{ text: '小程序', icon: '/images/miniProgram.png' }]
    ]
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁(yè)面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點(diǎn)擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

json

{
  "navigationBarTitleText": "發(fā)現(xiàn)"
}

wallet（錢包頁(yè)面）

wxml

<!--pages/wallet/wallet.wxml-->
<view class='container'>
  <view class='topPanel'>
    <view class='box1' wx:for='{{array1}}' wx:key='array1_{{index}}'>
      <image src='{{item.icon}}'></image>
      <text>{{item.text}}</text>
    </view>
  </view>
  <view class='servicePanel'>
    <view class='serviceTitle'>騰訊服務(wù)</view>
    <view class='serviceBlocks'>
      <view class='box2' wx:for='{{array2}}' wx:key='array2_{{index}}'>
        <image src='{{item.icon}}'></image>
        <text>{{item.text}}</text>
      </view>
    </view>
  </view>
</view>

wxss

/* pages/wallet/wallet.wxss */
/* pages/index/index.wxss */
/*1 背景容器樣式*/
.container {
    height: 100vh; /*高度為100視窗，寫(xiě)成100%無(wú)效*/
    background-color: silver; /*背景顏色為銀色*/
    display: flex; /*flex布局模型*/
    flex-direction: column; /*垂直布局*/
  }
  
  /*2 面板1：頂端狀態(tài)欄*/
  .topPanel {
    height: 300rpx; /*高度*/
    background-color: #686f79; /*背景顏色為灰色#686F79*/
    display: flex; /*flex布局模型*/
    flex-direction: row; /*水平布局*/
  }
  /*2-1 面板1：方格樣式*/
  .box1 {
    display: flex;/*flex布局模型*/
    flex-direction: column;/*垂直布局*/
    align-items: center;/*水平方向居中*/
    width: 33%;/*寬度約占屏幕1/3*/
    height: 250rpx;/*高度*/
  }
  /*2-2 面板1：方格內(nèi)圖標(biāo)樣式*/
  .box1 image{
    width: 110rpx;/*寬度*/
    height: 110rpx;/*高度*/
    margin: 20rpx;/*四周外邊距均為20rpx*/
  }
  /*2-3 面板1：方格內(nèi)文本樣式*/
  .box1 text{
    text-align: center;/*文本居中*/
    color: white;/*字體顏色為白色*/
    font-size: 35rpx;/*字號(hào)35rpx大小*/
  }
  
  /*3 面板2：騰訊服務(wù)欄*/
  .servicePanel {
    min-height: 600rpx; /*最小高度*/
    background-color: white; /*背景顏色為白色*/
    margin: 20rpx 0; /*上下外邊距20rpx，左右0*/
  }
  /*3-1 面板2：第一行標(biāo)題樣式*/
  .serviceTitle {
    padding: 20rpx;/*四周內(nèi)邊距20rpx*/
    border: 1rpx solid silver;/*1rpx寬的銀色實(shí)線邊框*/
    font-size: 30rpx;/*字號(hào)30rpx大小*/
    color: gray;/*字體顏色為灰色*/
  }
  /*3-2 面板2：九宮格區(qū)域樣式*/
  .serviceBlocks {
    display: flex;/*flex布局模型*/
    flex-direction: row;/*水平布局*/
    flex-wrap: wrap;/*允許換行*/
  }
  /*3-2-1 面板2：九宮格區(qū)域-方格樣式*/
  .box2 {
    border-right: 1rpx solid silver;/*1rpx寬的銀色實(shí)線邊框*/
    border-bottom: 1rpx solid silver;/*1rpx寬的銀色實(shí)線邊框*/
    display: flex;/*flex布局模型*/
    flex-direction: column;/*垂直布局*/
    align-items: center;/*水平方向居中*/
    justify-content: center;/*垂直方向居中*/
    width: 33%;/*寬度約占屏幕1/3*/
    height: 230rpx;/*高度230rpx*/
  }
  /*3-2-2 面板2：方格內(nèi)圖標(biāo)*/
  .box2 image {
    width: 90rpx;/*寬度*/
    height: 90rpx;/*高度*/
  }
  /*3-2-3 面板2：方格內(nèi)文本*/
  .box2 text {
    font-size: 30rpx;/*字號(hào)30rpx大小*/
  }
  

js

// pages/index/index.js
Page({

    /**
     * 頁(yè)面的初始數(shù)據(jù)
     */
    data: {
      //面板1的九宮格數(shù)組
      array1: [
        { icon: '/images/top/money.png', text: '收付款' },
        { icon: '/images/top/balance.png', text: '零錢\n0.00' },
        { icon: '/images/top/cards.png', text: '銀行卡' },
      ],
      //面板2的九宮格數(shù)組
      array2: [
        { icon: '/images/service/cardRepay.png', text: '信用卡還款' },
        { icon: '/images/service/mobileTopup.png', text: '手機(jī)充值' },
        { icon: '/images/service/wealth.png', text: '理財(cái)通' },
        { icon: '/images/service/utilities.png', text: '生活繳費(fèi)' },
        { icon: '/images/service/qqCoins.png', text: 'Q幣充值' },
        { icon: '/images/service/publicService.png', text: '城市服務(wù)' },
        { icon: '/images/service/charity.png', text: '騰訊公益' },
        { icon: '/images/service/insurance.png', text: '保險(xiǎn)服務(wù)' }
      ]
    },
  
    /**
     * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
     */
    onLoad: function (options) {
  
    },
  
    /**
     * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
     */
    onReady: function () {
  
    },
  
    /**
     * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
     */
    onShow: function () {
  
    },
  
    /**
     * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
     */
    onHide: function () {
  
    },
  
    /**
     * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
     */
    onUnload: function () {
  
    },
  
    /**
     * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
     */
    onPullDownRefresh: function () {
  
    },
  
    /**
     * 頁(yè)面上拉觸底事件的處理函數(shù)
     */
    onReachBottom: function () {
  
    },
  
    /**
     * 用戶點(diǎn)擊右上角分享
     */
    onShareAppMessage: function () {
  
    }
  })

json

{
  "navigationBarTitleText": "錢包",
  "navigationBarBackgroundColor":"#686F79"
}