【微信小程序】仿Instagram个人界面

朱雀 2023-10-11 23:28 134阅读 0赞

![50fb35acdd0d4a569669feea3e0527aa.png][]

### 1. home.wxml ###

<view wx:if="{
       {flag==0}}">
    <view style="color: white" style="text-align: center">
      <image src="/image/flow.png" style="width: 300rpx; height: 90rpx; margin-top: 340rpx"></image>
    </view>
    <view>
    <input type="text" placeholder="输入手机号" bindinput="usernameInput" style="color: white; border-radius: 8rpx; margin: 50rpx 80rpx; background-color: #262626; height: 90rpx; padding-left: 20rpx">
    </input>
    <input type="password" placeholder="输入密码" bindinput="passwordInput" style="color: white; border-radius: 8rpx; margin: 50rpx 80rpx; background-color: #262626; height: 90rpx; padding-left: 20rpx"></input>
    <button style="width: 588rpx" bindtap="signIn">登录</button>
    <view style="color: white; text-align: center; margin-top: 300rpx; padding: 30rpx;border-top: 1px solid #262626; font-size: 26rpx">
    没有账户？<span style="color: #DAF7A6" bindtap="login">立即注册/重置密码。</span>
    </view>
    </view>
    </view>
    
    <view wx:if="{
       {loading != 5 && loading!=6}}" style="text-align:center; margin-top: 450rpx">
    <image src="/image/flow.gif" style="width: 100px; height: 100px;"></image>
    </view>
    <view wx:if="{
       {flag==1 && loading==6}}" style="margin:80rpx 40rpx">
    <view style="display: flex; align-items:center; justify-content: space-between">
    <view style="color: white; margin-bottom:50rpx; font-size: 40rpx; font-weight: 550; margin-left:10rpx">
    {
       {userinfo.name}}
    </view>
    <view style="color: white; margin-bottom:0rpx; font-size: 40rpx; font-weight: 550; margin-left:10rpx"><image src="/image/home_more.png" style="width: 50rpx; height:50rpx;" bindtap="clickme"></image></view>
    </view>
    <view style="display: flex; color: white; align-items: center; justify-content: space-between">
    <image src="{
       {userinfo.avatar}}" style="border-radius: 50%; width: 150rpx; height: 150rpx"></image>
    <view style="display: flex; flex-direction: column; align-items: center">
    <view>1</view>
    <view>帖子</view>
    </view>
    <view style="display: flex; flex-direction: column; align-items: center">
    <view>1</view>
    <view>粉丝</view>
    </view>
    <view style="display: flex; flex-direction: column; align-items: center; margin-right: 50rpx">
    <view>1</view>
    <view>关注</view>
    </view>
    </view>
    <view style="color: white; margin-top: 30rpx; margin-bottom: 20rpx">{
       {userinfo.signature}}</view>
    <button style="width: 100%; height: 60rpx; font-size: 30rpx; line-height: 30rpx; color: #FAFAFA; background-color: #262626; font-weight: 550">编辑主页</button>
    
    <view style="border-bottom: 1px solid #1E1E1E; padding-bottom: 20rpx">
    <image src="/image/grid.png" style="width: 40rpx; height: 40rpx; margin-top: 60rpx"></image> 
    </view>
    <view wx:for="{
       {grid}}" wx:key="index" style="float: left; margin-top: 30rpx;">
    <image wx:if="{
       {item.mediaList.length > 1 && item.mediaList[0].thumb != ''}}" src="{
       {item.mediaList[0].thumb}}" style="width: 200rpx; height:200rpx; margin-right: 23rpx; position: relative;" mode="aspectFill" bindtap="flow" data-id="{
       {item.id}}">
      <image src="/image/list.png" style="width: 50rpx; height: 50rpx;   position: absolute; right: 10rpx; top: 10rpx; width: 30rpx; height: 30rpx;"></image>
    </image>
    <image wx:elif="{
       {item.mediaList.length > 1 && item.mediaList[0].thumb == ''}}" src="{
       {item.mediaList[0].url}}" style="width: 200rpx; height:200rpx; margin-right: 23rpx; position: relative;" mode="aspectFill" bindtap="flow" data-id="{
       {item.id}}">
      <image src="/image/list.png" style="width: 50rpx; height: 50rpx;   position: absolute; right: 10rpx; top: 10rpx; width: 30rpx; height: 30rpx;"></image>
    </image>
    <image wx:elif="{
       {item.mediaList[0].thumb != ''}}" src="{
       {item.mediaList[0].thumb}}" style="width: 200rpx; height:200rpx; margin-right: 23rpx; position: relative;" mode="aspectFill" bindtap="flow" data-id="{
       {item.id}}">
      <image src="/image/video.png" style="width: 50rpx; height: 50rpx;   position: absolute; right: 10rpx; top: 10rpx; width: 40rpx; height: 40rpx;"></image>
    </image>
    <image wx:else src="{
       {item.mediaList[0].url}}" style="width: 200rpx; height:200rpx; margin-right: 23rpx; position: relative;" mode="aspectFill" bindtap="flow" data-id="{
       {item.id}}">
      <image src="/image/picture.png" style="width: 50rpx; height: 50rpx;   position: absolute; right: 10rpx; top: 10rpx; width: 40rpx; height: 40rpx;"></image>
    </image>
    </view>
    </view>
    
    
    <l-toast
      show="{
       {loading_show}}"
      icon="{
       {loading_icon}}"
      title="{
       {loading_title}}"
      placement="right"
      duration="1500"
      icon-size="40"
    />
    
    
    <view class="commodity_screen" bindtap="hideModal" wx:if="{
       {showModalStatus}}"></view>
    
    <view animation="{
       {animationData}}" class="commodity_attr_box" wx:if="{
       {showModalStatus}}" style="color: white">
    <view style="display: flex; align-items: center; margin-left: 30rpx">
    <image src="/image/collect-s.png" style="width: 50rpx; height: 50rpx"></image>
    <view style="margin-left: 10rpx; font-size: 35rpx; font-weight: 550">收藏夹</view>
    </view>
    </view>

### 2. home.js ###

### 3. home.wxss ###

.commodity_screen {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: #000;
      opacity: 0.2;
      overflow: hidden;
      z-index: 1000;
      color: #fff;
    }
    /*对话框 */
    .commodity_attr_box {
      border-radius: 25rpx 25rpx 0 0;
      height: 300rpx;
      width: 100%;
      overflow: hidden;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 2000;
      background: #262626;
      padding-top: 20rpx;
    }

### 4. home.json ###

{
      "navigationStyle": "custom",
      "usingComponents": {
        "l-toast": "/miniprogram_npm/lin-ui/toast/index",
        "l-arc-pop": "/miniprogram_npm/lin-ui/arc-popup/index"
      }
    }

[50fb35acdd0d4a569669feea3e0527aa.png]: https://img-blog.csdnimg.cn/50fb35acdd0d4a569669feea3e0527aa.png