微信小程序项目_秋泊优选54

50、我的中心_背景展现

pages\user\index.jsonjavascript

{ 
  "usingComponents": { },
  "navigationBarTitleText": "我的中心"
}

pages\user\index.wxmlcss

<view class="user_info_wrap">
    <view class="user_img_wrap">
       <image class="user_bg" src="{ {userinfo.avatarUrl}}"></image> 
       <view class="user_info">
        <image class="user_icon" src="{ {userinfo.avatarUrl}}"></image>
        <view class="user_name"></view>
       </view>
    </view>
</view>

pages\user\index.jshtml

// pages/user/index.js
Page({ 
  data: { 
    userinfo:{ }
  },
  onShow(){ 
    const userinfo=wx.getStorageSync( "userinfo");
    this.setData({ userinfo})
  }
})

pages\user\index.wxml
java

<view class="user_info_wrap">
    <view class="user_img_wrap">
       <image class="user_bg" src="{ {userinfo.avatarUrl}}"></image> 
       <!-- <view class="user_info"> <image class="user_icon" src="{ {userinfo.avatarUrl}}"></image> <view class="user_name"></view> </view> -->
    </view>
</view>

pages\user\index.lesscss3

.user_info_wrap{ 
    height: 45vh;
    overflow: hidden;
    background-color: var(--themeColor); .user_img_wrap{ 
        .user_bg{ 
            height: 50vh;
            //css3的filter: blur高斯模糊
            filter: blur(10rpx);
        }
    }
}

pages\user\index.wxml
json

<view class="user_info_wrap">
    <view class="user_img_wrap">
       <image class="user_bg" src="{ {userinfo.avatarUrl}}"></image> 
       <view class="user_info">
        <image class="user_icon" src="{ {userinfo.avatarUrl}}"></image>
        <view class="user_name">{
  
  {userinfo.nickName}}</view>
       </view>
    </view>
</view>

pages\user\index.less缓存

.user_info_wrap{ 
    height: 45vh;
    overflow: hidden;
    background-color: var(--themeColor); .user_img_wrap{ 
        //位置：相对
        position: relative; .user_bg{ 
            height: 50vh;
            //css3的filter: blur高斯模糊
            filter: blur(10rpx);
        }
        .user_info{ 
            position: absolute;
            left: 50%;
            transform: translatex(-50%);
            top:20%;
            text-align: center; .user_icon{ 
                width: 150rpx;
                height: 150rpx;
                border-radius: 50%;
            }
            .user_name{ 
                color:#fff;
                margin-top:40rpx;
                font-size: 30rpx;
            }
        }
    }
}

我的中心当缓存存在用户信息就显示图片和名字不然显示登陆按钮
pages\user\index.wxml

微信

<view class="user_info_wrap">
    <view wx:if="{ {userinfo.avatarUrl}}" class="user_img_wrap">
       <image class="user_bg" src="{ {userinfo.avatarUrl}}"></image> 
       <view class="user_info">
        <image class="user_icon" src="{ {userinfo.avatarUrl}}"></image>
        <view class="user_name">{
  
  {userinfo.nickName}}</view>
       </view>
    </view>
    <view wx:else class="user_btn">
        <navigator url="/pages/login/index">登陆</navigator>
    </view>
</view>

按钮样式
pages\user\index.less

less

.user_info_wrap{ 
    height: 45vh;
    overflow: hidden;
    background-color: var(--themeColor);
    position: relative; .user_img_wrap{ ...}
    .user_btn{ 
        position:absolute;
        left:50%;
        transform: translatex(-50%);
        top:40%;
        border: 1rpx solid greenyellow;
        color:#ffffff;
        font-size: 38rpx;
        padding: 30rpx;
        border-radius: 10rpx;
    }
}

清所有缓存——>点登陆——>跳转登陆页面_登陆——>微信受权容许

this