微信小程序我的界面设计

效果图及结构

效果图

结构

完整源码

my.wxml

<!--pages/my/my.wxml-->
<view class="my_view1"><image class="my_head" src="./images/头像.jpg"></image>
</view><view class="my_zhongbu"><view class="my_zhongbu_zong"><image class="my_zhongbu_image1" src="./images/门票.png" bindtap="my_zhongbu_image1"></image><text class="my_zhongbu_text">已约活动</text></view><view class="my_zhongbu_zong"><image class="my_zhongbu_image2" src="./images/报名活动.png" bindtap="my_zhongbu_image2"></image><text class="my_zhongbu_text">已报活动</text></view><view class="my_zhongbu_zong"><image class="my_zhongbu_image3" src="./images/消息.png" bindtap="my_zhongbu_image3"></image><text class="my_zhongbu_text">已报活动</text></view>
</view><view class="my_my">我 的</view>
<view class="my_line"></view><view class="my_xiabu"><view class="my_xiabu_zong"><image class="my_xiabu_image1" src="./images/我的.png" bindtap="my_xiabu_image1"></image><text class="my_xiabu_text">我的用户</text></view><view class="my_xiabu_zong"><image class="my_xiabu_image2" src="./images/资料.png" bindtap="my_xiabu_image2"></image><text class="my_xiabu_text">我的资料</text></view><view class="my_xiabu_zong"><image class="my_xiabu_image3" src="./images/意见.png" bindtap="my_xiabu_image3"></image><text class="my_xiabu_text">意见反馈</text></view>
</view>

my.wxss

/* pages/my/my.wxss */
/* 头像部分 */
.my_view1 {width: 100%;height: auto;display: flex;justify-content: center;
}.my_head {margin-top: 30px;width: 80px;height: 80px;border-radius: 500px;}/* 中部 */
.my_zhongbu {padding-top: 100rpx;display: flex;
}.my_zhongbu_zong {width: 300rpx;display: flex;align-items: center;flex-direction: column;}.my_zhongbu_image1 {width: 70rpx;height: 70rpx;}.my_zhongbu_image2 {width: 70rpx;height: 70rpx;}.my_zhongbu_image3 {width: 70rpx;height: 70rpx;}.my_zhongbu_text {margin-top: 25rpx;font-size: 32rpx;color: rgb(0, 0, 0);font-weight: bolder;}/* 我的部分 */
.my_my {margin-top: 40px;font-size: 35rpx;font-weight: bolder;margin-left: 10px;font-style: italic;
}
.my_line {margin-top: 5px;width: 100%;height: 1px;background-color: rgb(184, 184, 184);
}/* 下部部分 */
.my_xiabu {padding-top: 50rpx;display: flex;
}.my_xiabu_zong {width: 300rpx;display: flex;align-items: center;flex-direction: column;}.my_xiabu_image1 {width: 70rpx;height: 70rpx;}.my_xiabu_image2 {width: 70rpx;height: 70rpx;}.my_xiabu_image3 {width: 70rpx;height: 70rpx;}.my_xiabu_text {margin-top: 25rpx;font-size: 32rpx;color: rgb(0, 0, 0);}

my.js

//获取应用实例
const app = getApp()
Page({data: {},my_zhongbu_image1:function() {wx.navigateTo({url: './ticket/ticket',})},my_zhongbu_image2:function() {wx.navigateTo({url: './act/act',})},my_zhongbu_image3:function() {wx.navigateTo({url: './news/news',})},my_xiabu_image1:function() {wx.navigateTo({url: './user/user',})},my_xiabu_image2:function() {wx.navigateTo({url: './datas/datas',})},my_xiabu_image3:function() {wx.navigateTo({url: './idea/idea',})}
})

my.json

微信小程序我的界面设计相关推荐

微信小程序的开发界面设计
微信小程序的开发界面设计需要遵循微信官方的设计规范和标准,以确保小程序具有一致的外观和用户体验.以下是一些微信小程序开发界面设计的建议: 界面布局:微信小程序的界面布局应该简洁明了,易于使用.界面中应 ...
微信小程序汇率计算界面
微信小程序汇率计算界面最近在学习微信小程序,自己制作了一个自己想制作的小应用--汇率计算界面(真不知道为什么自己对汇率那么感兴趣XD ) 数据接入在获取数据之前先在data里面添加几个参数 mon ...
【来一杯word】微信小程序项目需求分析及设计初稿
[来一杯word]微信小程序从零到上线一.[来一杯word]微信小程序项目需求分析及设计初稿文章目录 [来一杯word]微信小程序从零到上线前言一.需求分析.功能实现 1.界面设计 2.单位转 ...
在微信小程序上,帮助中心界面实现类似手风琴案例
在微信小程序上,帮助中心界面实现类似手风琴案例 wxml <view class="container"><block wx:for="{{arrdat ...
微信小程序的登录界面实现
微信小程序的登录界面实现 <view class="container"><view class="wrapper"><view ...
第十五周——微信小程序简单的界面
第十五周--微信小程序简单的界面前言一.Pages 二.TabBar 总结前言本篇文章是向大家分享一下怎样简单制作一个微信小程序的界面一.Pages 这里要写的是小程序里面你所创建界面的路径 ...
微信小程序：简洁界面清爽让人非常舒服的一款短视频去水印微信小程序
总得来说这是一款以各大平台短视频去水印为主的一款小程序源码内含支持多平台的接口支持短视频和图集去水印小编个人觉得界面让人看起来特别的清爽特别的舒服没有那么多的花里胡哨的,另外小编也给它添加了多 ...
微信小程序志愿者服务的设计与实现
源码获取:https://www.bilibili.com/video/BV13m4y1c7NW/ 技术要求: (1)微信小程序开发工具开发: (2)后端:ssm + mysql + b ...
微信小程序个人简历界面（编辑版）
微信小程序个人简历界面.可编辑修改(包含全部源码) 1.微信小程序实现简单的个人简历界面,包含基本信息.教育背景.获奖证书.兴趣爱好等,简历信息支持修改编辑内容. 2.通过此文章,希望能带给更多学习微 ...

微信小程序我的界面设计

效果图及结构

效果图

结构

完整源码

my.wxml

my.wxss

my.js

my.json

微信小程序我的界面设计相关推荐

最新文章

热门文章