首页 > 小程序教程 > 微信小程序黑色背景头像美食类个人中心样式模板制作设计下载

微信小程序黑色背景头像美食类个人中心样式模板制作设计下载

上一篇 下一篇
制作好以后效果图如下:
一、wxml页面代码如下:
<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>
 
二、wxss样式文件代码如下:
.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;
}
三、js页面代码如下:
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
      }
    })
  }
})

模板简介:该模板名称为【微信小程序黑色背景头像美食类个人中心样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 21,902次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-07
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信模板 响应式 企业网站 微信图片 微信素材 微信公众平台 微信文章 自适应 html5 单页式简历模板
您可能会喜欢的其他模板