失眠网 > 微信小程序我的界面设计

微信小程序我的界面设计

时间：2021-10-23 15:21:47

相关推荐

微信小程序我的界面设计

效果图及结构

效果图

结构

完整源码

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',})}})