九宫格布局小程序-模仿微信钱包界面设计-基础入门

news/2024/7/20 2:20:46 标签: 小程序, 微信, 微信小程序

代码展示：

使用flex布局模型和wx:for属性仿微信“钱包”页面实现九宫格

项目创建完毕之后，在根目录中会生成文件夹pages用于存放页面文件。一般来说首页默认命名为index，表示小程序运行的第一个页面；

将app.json文件内pages属性中的“pages/logs/logs”删除，并删除上一行末尾的逗号

删除utils文件夹及其内部所有内容。

删除pages文件夹下的logs目录及其内部所有内容

删除index.wxml和index.wxss中的全部代码

删除index.js中的代码 并输入page找到第二个选项按回车键让其自动补全函数

删除app.wxss中的全部代码

 会自动补全以下代码：

删除app.js中的全部代码，并且输入关键词app

 按回车键自动补全代码

小程序默认导航栏为黑底白字

需在index.json中自定义导航栏标题和背景颜色

{
  "navigationBarTitleText": "钱包",
  "navigationBarBackgroundColor": "#686F79" //灰色
}

页面设计

顶端钱包状态栏

腾讯服务栏

/**index.wxss**/
.container{
height: 100vh;
background-color: silver;
display: flex;
flex-direction: column;
}
.topPanel{
  height: 300rpx;
  background-color: #686F79;
  display: flex;
  flex-direction: row; /*水平布局*/
}
/* 腾讯服务栏 */
.servicePanel{
  min-height: 600rpx;
  background-color: white;
   margin: 20px 0;  /*上下外边距20rpx 左右0*/
}

/* 第一行标题样式 */
.serviceTitle{
  padding: 20rpx; /*四周内边距*/
  border: 1rpx solid silver;
  font-size: 30rpx;
  color: gray;
}

/* 九宫格区域样式 */
.serviceBlocks{
  display: flex;
  flex-direction: row; /*水平布局*/
  flex-wrap: wrap; /*允许换行*/
}
<!--index.wxml-->
<view class='container'>
 <view class='topPanel'>
 </view>

<view class='servicePanel'>

<view class='serviceTitle'>腾讯服务</view>
<view class='serviceBlocks'></view>

</view>
 </view>

当前效果如下图所示

面板1设计

 代码片段修改

<!--index.wxml-->
<view class='container'>
  <view class='topPanel'>
    <view class='box1'>
      <image src='/images/money.png'></image>
      <text>收付款</text>
    </view>
  </view>

<view class='servicePanel'>

<view class='serviceTitle'>腾讯服务</view>
<view class='serviceBlocks'></view>

</view>
 </view>

index.wxss代码片段

/**index.wxss**/
.container{
height: 100vh;
background-color: silver;
display: flex;
flex-direction: column;
}
.topPanel{
  height: 300rpx;
  background-color: #686F79;
  display: flex;
  flex-direction: row; /*水平布局*/
}
/* 腾讯服务栏 */
.servicePanel{
  min-height: 600rpx;
  background-color: white;
   margin: 20px 0;  /*上下外边距20rpx 左右0*/
}

/* 第一行标题样式 */
.serviceTitle{
  padding: 20rpx; /*四周内边距*/
  border: 1rpx solid silver;
  font-size: 30rpx;
  color: gray;
}

/* 九宫格区域样式 */
.serviceBlocks{
  display: flex;
  flex-direction: row; /*水平布局*/
  flex-wrap: wrap; /*允许换行*/
}

/* 面板1方格样式 */
.box1{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 33%; /*宽度约占屏幕的1/3*/
  height: 250rpx;
}

/* 面板1方格内图标样式 */
.box1 image{
  width: 110rpx;
  height: 110rpx;
  margin: 20rpx;  /*四周外边距均为20rpx*/
}
/* 方格内文本样式 */
.box1 text{
  text-align: center;
  color: white;
  font-size: 35rpx;
}

设置面板2信用卡还款

 WXML代码片段修改：

<view class='serviceBlocks'>
  <view class='box2'>
    <image src='/images/cardRepay.png'></image>
    <text>信用卡还款</text>
  </view>
</view>

WXSS代码片段修改：

/* 方格内文本样式 */
.box1 text{
  text-align: center;
  color: white;
  font-size: 35rpx;
}
/* 面板2：方格内图标 */
.box2{
  border: 1rpx solid silver;
  display: flex; /*flex布局模型*/
  flex-direction: column; /*垂直布局*/
  align-items: center; /*水平方向居中*/
  justify-content: center; /*垂直方向居中*/
  width: 33%; /*宽度约占屏幕的1/3*/
  height: 230rpx;
}
/* 方格内图标 */
.box2 image{
width: 90rpx;
height: 90rpx;
}
/* 方格内文字 */
.box2 text{
  font-size: 30rpx; /*字号为30rpx*/
}

逻辑实现

面板1逻辑实现

（1）使用动态数据展示方格

由于所有方格的内容布局都是统一的，可以考虑使用wx:for属性配合动态数组渲染全部列表项，以减少WXML页面的代码量

<view class='topPanel'>
    <view class='box1' wx:for='{{array1}}' wx:for='array1_{{index}}'>
      <image src='{{item.icon}}'></image>
      <text>{{item.text}}</text>
    </view>
  </view>

循环下来就是array1_0,array1_1,array1_2....

其中{{array1}}数组表示3个方格，方格区域的图标和文本分别命名为icon,text

{{item}} item是官方给的元素

item.属性名 

item的属性写在page {data：{ array1：[ { icon:.... , text:.... } ] } }

完整代码：

app.json文件代码

{
  "pages":[
    "pages/index/index"
  ]
}

JSON文件-pages/index/index.json

{
  "navigationBarTitleText": "钱包",
  "navigationBarBackgroundColor": "#058b3d"
}

WXML文件-pages/index/index.wxml

<!--index.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'>腾讯服务</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/index/index.wxss

/**index.wxss**/
.container{
height: 100vh;
background-color: rgb(69, 163, 66);
display: flex;
flex-direction: column;
}
.topPanel{
  height: 300rpx;
  background-color: #07a147;
  display: flex;
  flex-direction: row; /*水平布局*/
}
/* 腾讯服务栏 */
.servicePanel{
  min-height: 600rpx;
  background-color: white;
   margin: 20px 0;  /*上下外边距20rpx 左右0*/
}

/* 第一行标题样式 */
.serviceTitle{
  padding: 20rpx; /*四周内边距*/
  border: 1rpx solid silver;
  font-size: 30rpx;
  color: gray;
}

/* 九宫格区域样式 */
.serviceBlocks{
  display: flex;
  flex-direction: row; /*水平布局*/
  flex-wrap: wrap; /*允许换行*/
}

/* 面板1方格样式 */
.box1{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 33%; /*宽度约占屏幕的1/3*/
  height: 250rpx;
}

/* 面板1方格内图标样式 */
.box1 image{
  width: 90rpx;
  height: 90rpx;
  margin: 25rpx;  /*四周外边距均为20rpx*/
}
/* 方格内文本样式 */
.box1 text{
  text-align: center;
  color: white;
  font-size: 35rpx;
}
/* 面板2：方格内图标 */
.box2{
  border: 1rpx solid silver;
  display: flex; /*flex布局模型*/
  flex-direction: column; /*垂直布局*/
  align-items: center; /*水平方向居中*/
  justify-content: center; /*垂直方向居中*/
  width: 32.8%; /*宽度约占屏幕的1/3*/
  height: 230rpx;
}
/* 方格内图标 */
.box2 image{
width: 80rpx;
height: 80rpx;
}
/* 方格内文字 */
.box2 text{
  font-size: 30rpx; /*字号为30rpx*/
}

JS文件-pages/index/index.js

// index.js
// 获取应用实例
Page({

  /**
   * 页面的初始数据
   */
  data: {
    array1:[
      {
        icon:'/images/money.png',
        text:'首付款'
      },
      { icon:'/images/balance.png',
        text:'零钱\n0.00'
      },
      { icon:'/images/cards.png',
        text:'银行卡'
      },
    ],

    array2:[
      {
        icon:'/images/cardRepay.png',
        text:'信用卡还款'
      },
      {
        icon:'/images/mobileTopup.png',
        text:'手机充值'
      },
      {
        icon:'/images/wealth.png',
        text:'理财通'
      },
      {
        icon:'/images/utilities.png',
        text:'生活缴费'
      },
      {
        icon:'/images/qqCoins.png',
        text:'Q币充值'
      },
      {
        icon:'/images/publicService.png',
        text:'城市服务'
      },
      {
        icon:'/images/charity.png',
        text:'腾讯公益'
      },
      {
        icon:'/images/insurance.png',
        text:'保险服务'
      }
    ]
  }

})


http://www.niftyadmin.cn/n/673633.html

相关文章

20家公司公布半年报 中核科技净利润增长约24倍

20家公司公布半年报 中核科技净利润增长约24倍

中报速递(仅供参考&#xff0c;请务必以公司公告为准) 全部>> 代码简称 每股收益净资产收益率净利润净利润同比增长公告摘要(PDF)公告日期600693东百集团0.1946.05%2566.70万元23.87%点击查看2007-08-09000757*ST方向-0.06-2.21%-1713.21万元86.72%点击查看2007-08-09600…
阅读更多...
猜数字游戏-小程序组件-基础入门

猜数字游戏-小程序组件-基础入门

效果展示 1.创建页面文件 首页&#xff1a;index.wxml 开始游戏&#xff1a;game.wxml 游戏规则&#xff1a;rules.wxml 关于我们&#xff1a;about.wxml 需修改aoo.json文件内的pages属性 {"pages":["pages/index/index","pages/game/game&quo…
阅读更多...
上投摩根灵魂人物吕俊辞职

上投摩根灵魂人物吕俊辞职

图&#xff1a;上投摩根投资总监兼上投摩根中国优势基金基金经理吕俊点击此处查看全部财经新闻图片早报记者 肖莉 拥有300万基金持有人的上投摩根基金公司&#xff0c;在经历唐建“老鼠仓”事件之后&#xff0c;基金经理队伍又遭遇重大损失。昨天&#xff0c;上投摩根基金公司发…
阅读更多...
java jtable应用源码_java Swing JTable的实用技巧实例源码

java jtable应用源码_java Swing JTable的实用技巧实例源码

java Swing JTable的实用技巧实例源码。无论对于什么样的一个应用程序来说&#xff0c;用表格的形式来显示数据是再平常不过的事情了。于是JTable就成为我们在所有Swing组件中最不可或缺的朋友。对于JTable的操作&#xff0c;大多数情况下我们都可以不假外求&#xff0c;因为JD…
阅读更多...
计算机图形学-绘制多边形

计算机图形学-绘制多边形

绘制多边形函数 CRect rect;GetClientRect(&rect);CPen NewPen,*pOldPen;NewPen.CreatePen(PS_SOLID,3,RGB(0,0,255));pOldPenpDC->SelectObject(&NewPen);CBrush NewBrush,*pOldBrush;NewBrush.CreateSolidBrush(RGB(0,255,0));pOldBrushpDC->SelectObject(&am…
阅读更多...
linux java测试工具_Linux性能优化（一）——stress压力测试工具

linux java测试工具_Linux性能优化（一）——stress压力测试工具

一、stress简介1、stress简介stress是Linux的一个压力测试工具&#xff0c;可以对CPU、Memory、IO、磁盘进行压力测试。2、stress安装安装&#xff1a;sudo yum install stress二、stress使用1、stress命令stress [OPTION [ARG]]-c, --cpu N&#xff1a;产生N个进程&#xff0c…
阅读更多...
绘制Bezier样条函数-计算机图形学基础

绘制Bezier样条函数-计算机图形学基础

//绘制Bezier函数 CRect rect; CPoint P[7]; P[0]CPoint(100,400); P[1]CPoint(200,200); P[2]CPoint(500,100); P[3]CPoint(550,300); double k(P[3].y-P[2].y)/(P[3].x-P[2].x); double x600,yk*(x-P[3].x)P[3].y; P[4]CPoint(x0.5,y0.5); P[5]CPoint(900,400); P[6]CPoint(8…
阅读更多...
java 获取静态属性值_关于java静态变量取值的问题。

java 获取静态属性值_关于java静态变量取值的问题。

我在AAA类中声明了一个静态变量&#xff0c;并在一个方法中给静态变量赋值&#xff0c;main方法中计时器持续调用这个方法。启动AAA类后&#xff0c;在BBB类中我要获取AAA类中的这个静态变量&#xff0c;但得到的是null。我应该...我在AAA类中声明了一个静态变量&#xff0c;并…
阅读更多...
最新文章

Copyright @ 2022~2023