<view class="page-body"> <view class="header"> <image src="{{userHeaderUrl}}" class="userheadImg" mode="aspectFill"></image> <view> <text style="color:white;font-size:30rpx">蛋壳儿</text> </view> </view> <view class="option-view"> <block wx:for="{{optionNamas}}" wx:key="*this"> <view class="option-item" bindtap="selectoption" data-index="{{index}}"> <image class="item-icon" src="{{optionIcons[index]}}" style="width:45rpx;height:45rpx;"></image> <text style="font-size:28rpx;">{{item}}</text> </view> </block> <!--此处为分割线--> <view class="line_h_1 line_h"></view> <view class="line_h_2 line_h"></view> <view class="line_v_1 line_v"></view> <view class="line_v_2 line_v"></view> </view> <view class="tel-view" bindtap="makePhone"> <text style="color:#c30000;font-size:30rpx">4008-166-188</text> </view> </view> |
.page-body{ background-color: #f5f4f4; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; } .header{ width: 100%; height: 380rpx; background-color: #000000; display: flex; flex-direction: column; align-items: center; } .header .userheadImg{ width: 180rpx; height: 180rpx; border-radius: 90rpx; margin-top: 70rpx; margin-bottom: 30rpx; } .option-view{ width: 100%; height: 400rpx; display: flex; flex-direction: row; flex-wrap:wrap; position: relative; } .option-view .option-item{ width: 250rpx; height: 200rpx; display: flex; flex-direction: column; align-items: center; } .item-icon{ width: 40px; height: 40px; margin-top: 45rpx; margin-bottom: 15rpx; } .line_h_1{ position: absolute; top: 200rpx; left: 0; } .line_h_2{ position: absolute; top: 399rpx; left: 0; } .line_v_1{ position: absolute; left: 249.5rpx; top: 0; bottom: 0; width: 1rpx; background-color: #dedede; } .line_v_2{ position: absolute; left: 499.5rpx; top: 0; bottom: 0; } .line_h{ width: 100%; height: 1rpx; background-color: #dedede; } .line_v{ width: 1rpx; background-color: #dedede; } .tel-view{ position: absolute; bottom: 40rpx; background-color: white; display: flex; justify-content: center; align-items: center; height: 80rpx; left: 0; right: 0; } |
Page({ data:{ userHeaderUrl:"../../images/useravatar.png", optionNamas:['我的订单','我的优惠','麻小e卡','收货地址','设置','关于我们'], optionIcons:['../../images/mine_1.png','../../images/mine_2.png','../../images/mine_3.png','../../images/mine_4.png','../../images/mine_5.png','../../images/mine_6.png',] }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 }, makePhone:function(){ wx.showModal({ title:"提示", content:"你将使用运营商拨打电话4008166188", success:function(res){ if (res.confirm) { wx.makePhoneCall({ phoneNumber:'4008166188' }) } } }) }, selectoption:function(event){ console.log(event) let index = event.currentTarget.dataset.index switch(parseInt(index)){ case 0: this.navigationTo("order",'') break; case 1: this.navigationTo("coupon",'') break; case 2: this.navigationTo("ecard",'') break; case 3: this.navigationTo("address",'') break; case 4: this.navigationTo("setting",'') break; case 5: this.navigationTo("aboutus",'') break; default: break; } }, navigationTo:function(pageName,params){ console.log('跳转' + '../' + pageName + '/' + pageName + params) wx.navigateTo({ url: '../' + pageName + '/' + pageName + params, success: function(res){ // success }, fail: function() { // fail }, complete: function() { // complete } }) } }) |
模板简介:该模板名称为【微信小程序黑色背景头像美食类个人中心样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。