精华内容
下载资源
问答
  • 主要介绍了微信小程序个人中心的列表控件实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序个人中心-我的界面

    万次阅读 2020-04-24 17:14:51
    我们在开发微信小程序的时候,基本上都会有一个个人中心的界面,简称我的界面,里面有保存每个用户的个人信息,个人设置,个人的数据记录。所以本文主要针对这个页面做了一个自己熟练的界面,下面来看看效果图: ...

    个人中心-我的界面

    简介

    我们在开发微信小程序的时候,基本上都会有一个个人中心的界面,简称我的界面,里面有保存每个用户的个人信息,个人设置,个人的数据记录。所以本文主要针对这个页面做了一个自己熟练的界面,下面来看看效果图:
    效果图
    在这里插入图片描述

    .
    .
    .
    这种效果的整体布局固定不变,如果想要更好看的效果,可以修改里面的图片小图标,还有背景颜色,又或者加上动图都是可以的,但是整体的框架基本就是这样,所以下面来看看代码是怎么实现的

    代码

    .
    wxml

    <view class="view_contain">
      <!-- 第一部分 -->
      <view class="view_1">
        <view class="view_image_text">
          <image class="image_radius" src="../images/timg.png" />
          <text>张三</text>
        </view>
      </view>
      <!-- 第二部分 -->
      <view class="view_2">
        <view class="view_tupianwenzi">
          <image class="image_tupian" src="../images/test1.png"></image>
          <text class="text_saoyisao">待付款</text>
        </view>
        <view class="view_tupianwenzi">
          <image class="image_tupian" src="../images/test2.png"></image>
          <text class="text_saoyisao">待发货</text>
        </view>
        <view class="view_tupianwenzi">
          <image class="image_tupian" src="../images/test3.png"></image>
          <text class="text_saoyisao">待收货</text>
        </view>
        <view class="view_tupianwenzi">
          <image class="image_tupian" src="../images/test4.png"></image>
          <text class="text_saoyisao">待评价</text>
        </view>
    
      </view>
      <!-- 第三部分 -->
      <view class="view_3">
        <view class="list-item">
          <image class="item-image" src="../images/test5.png"></image>
          <text class="item-text">我的收藏</text>
          <image class="image-jiantou" src="../images/jiantou.png"></image>
        </view>
        <view class="line"></view>
        <view class="list-item">
          <image class="item-image" src="../images/test6.png"></image>
          <text class="item-text">我的评价</text>
          <image class="image-jiantou" src="../images/jiantou.png"></image>
        </view>
        <view class="line"></view>
        <view class="list-item">
          <image class="item-image" src="../images/test8.png"></image>
          <text class="item-text">版本更新</text>
          <image class="image-jiantou" src="../images/jiantou.png"></image>
        </view>
        <view class="line"></view>
        <view class="list-item">
          <image class="item-image" src="../images/test9.png"></image>
          <text class="item-text">售后记录</text>
          <image class="image-jiantou" src="../images/jiantou.png"></image>
        </view>
        <view class="line"></view>
        <view class="list-item">
          <image class="item-image" src="../images/test12.png"></image>
          <text class="item-text">分享邀请</text>
          <image class="image-jiantou" src="../images/jiantou.png"></image>
        </view>
        <view class="line"></view>
      </view>
    </view>
    

    .
    .
    wxss

    /* 使用page就是为了保证  满屏 */
    
    page {
      width: 100%;
      height: 100%;
    }
    
    .view_contain {
      width: 100%;
      height: 100%;
      background: #f0eeed
    }
    
    /* 第一部分 */
    
    .view_1 {
      display: flex;
      justify-content: center;
      width: 100%;
      height: 25%;
      background: #a0deee;
    }
    
    .view_image_text {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    
    .image_radius {
      height: 50px;
      width: 50px;
      border-radius: 30px;
    }
    
    /* 第二部分 */
    
    .view_2 {
      width: 100%;
      height: 15%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background: white;
    }
    
    .view_tupianwenzi {
      display: flex;
      flex-direction: column;
      width: 120rpx;
      align-items: center;
      margin-left: 25rpx;
      margin-right: 25rpx;
    }
    
    .image_tupian {
      display: flex;
      width: 100rpx;
      height: 100rpx;
    }
    
    /* 第三部分 */
    
    .view_3 {
      width: 100%;
      height: 50%;
      /* background: #f0eeed; */
    }
    
    .list-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      height: 80rpx;
      margin-top: 20rpx;
      position: relative; /*父元素位置要设置为相对*/
      background: white;
    }
    
    .item-image {
      width: 50rpx;
      height: 50rpx;
      margin: 20rpx;
    }
    
    .item-text {
      color: gray;
      font-size: 35rpx;
      margin-left: 20rpx;
    }
    
    .image-jiantou {
      width: 20rpx;
      height: 35rpx;
      position: absolute; /* 要约束所在位置的子元素的位置要设置成绝对 */
      right: 0; /* 靠右调节 */
      margin-right: 35rpx;
    }
    
    /* 黑线 使得产生阴影效果 */
    
    .line {
      width: 100%;
      height: 3rpx;
      background: lightgray;
      margin-left: 90rpx;
    }
    
    
    

    最后附上下载地址:
    https://download.csdn.net/download/wy313622821/12366619

    展开全文
  • 每个小程序基本上都会使用到,里面可以设置保存每个用户的数据和操作习惯等等,界面也很美观,看起来很舒服,希望大家能够喜欢
  • 微信小程序个人中心的列表控件

    千次阅读 2020-04-24 11:30:45
    个人中心的列表控件 首先来看效果图 wxml <view class="list-item"> <image class="item-image" src="../images/fuwu.png"></image> <text class="item-text">我的收藏</text> &...

    个人中心的列表控件

    首先来看效果图
    在这里插入图片描述
    wxml

    <view class="list-item">
        <image class="item-image" src="../images/fuwu.png"></image>
        <text class="item-text">我的收藏</text>
        <image class="image-jiantou" src="../images/jiantou.png"></image>
      </view>
      <view class="line"></view>
    

    wxss

    
    .list-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      height: 80rpx;
      margin-top: 10rpx;
      position: relative; /*父元素位置要设置为相对*/
    }
    
    .item-image {
      width: 50rpx;
      height: 50rpx;
      margin: 20rpx;
    }
    
    .item-text {
      color: gray;
      font-size: 35rpx;
      margin-left: 20rpx;
    }
    
    .image-jiantou {
      width: 20rpx;
      height: 35rpx;
      position: absolute; /* 要约束所在位置的子元素的位置要设置成绝对 */
      right: 0; /* 靠右调节 */
      margin-right: 35rpx
    }
    
    .line {
      width: 100%;
      height: 3rpx;
      background: lightgray;
      margin-left: 90rpx;
    }
    
    展开全文
  • 一:准备工作①将图片引入页面②将文字引入页面③wxss基本语法如果还不熟悉这些知识,请伙伴们查看前几节的内容哦,如果遇到无法解决的问题,可以关注公众号添加作者菌微信~二:ui设计提示:图标可以使用阿里...

    一:准备工作

    ①将图片引入页面

    ②将文字引入页面

    ③wxss基本语法

    如果还不熟悉这些知识,请小伙伴们查看前几节的内容哦,如果遇到无法解决的问题,可以关注公众号添加作者菌微信~


    二:ui设计

    小提示:

    图标可以使用阿里巴巴矢量图标库的免费图标

    地址:https://www.iconfont.cn/

    328fc4fcd4a753a972e30174ba92d8dc.png

    ui可以借鉴花瓣的设计2288eed0646d8ceda0572692c2383f4d.png

    地址:https://huaban.com


    ebe7eaf376a3cb713cb1779598f3f150.png

    本节内容效果图如下:

    76ae774a5450ebe7173a0cb40472653c.png

    三:组件引入

    (一):“关于我们”实现

    在我们的设计中,“关于我们”由两部分组成,图标和文字

    ①通过image引入图标

    ②通过view组件写入“关于我们四个字”

    如下图:

    daf552c2974896a3bdf4d374477cf346.png

    af985dc36a571385c4197a6eee50fb38.png

    f6793ec2879e1b2d190b4a875ec740f4.png

    结果分析:

    图片gywm.png成功引入,但是图片效果非常不理想,查看Wxml一栏样式情况。

    4a88a9df17845c5800b2e4de9c695cd8.png

    显然,这是因为我们在设置上面那张图片(bg.jpg)的样式作用在了gywm.png上。与图片被原来所写的样式影响一样,我们也并未对“关于我们”四个字设置为居中,但是我们在上一节中对所有的view设置了text-align:center,所以现在这四个字也居中了。

    解决方法:

    在上一节中我们讲了通过id选择器选取同名不同内容的组件,现在又可以派上用场了。将两张图片分别设置id名为bg和gywm。并将wxss页面作用于bg.jpg的样式选择器名更改,再单独设置gywm.png的样式。最后将两个view组件设置成不同的id再对样式进行更改。如下图:

    df052640b6b0335ac5c29c8515529468.png

    edd71fdcfebd71c272f9c2bc517f16d3.png

    7b5408e10c8d61f4624d68ab4edc2725.png

    6e4fb4d43c041f928d2b1e9adad8973b.png

    再对view样式进行更改:

    3935478eba9846705019799fe588612e.png

    7892c03fc9fa26833161075808e46363.png

    8a81dd636728de1c551ceb75f52c8d53.png

    结果分析:

    关于我的这四个字与我们预想的不一样。打开Wxml一栏查看样式

    fcb1438b44e96f672940b6d7e8645580.png

    在Styles中我们发现这四个字被设置了width和height都是35rpx,再观察其他样式,发现“关于我们”图标的id名为gywm,而“关于我们”四个字的id名也叫gywm,显然图标的样式被应用到这四个字上面去了。

    解决方法:

    分别将关于我们的图标和文字设置为不同的id并设置不同的样式即可。

    如下图

    3aa0344567d5ee994cd64cb6885d9f93.png

    0ea19f3f2194bd40843c3247a5297196.png

    a4dcada266975dec446bd86ae3719596.png

    23284ad4154759f1f4421d87ae33b88a.png

    总结提升:

    按照程序员约定俗成的习惯,使用id选择器时注意id名应该唯一,且id名命名要做到见名知意,尽量不要出现像a1,a2,a3这种没有内涵的命名。

    合理选择wxss选择器的类型,无特殊情况少使用组件名选择器,便于我们对同组件名设置不同样式。

    (二):“收藏的书实现

    在我们的设计中,收藏的书由两个部分组成,书的总数和“收藏的书”四个字。

    ①引入书的总数

    在开发完成的小程序中,收藏的书总数显然需要从服务器拉取,关于这点我们后面再进行介绍。现在我们通过直接写入数字进行模拟数据。

    ②通过view组件引入“收藏的书四个字

    dbfb33807d36b7e76aa05f3c2103f300.png

    b235aab1dd3e9f2ccd3d43f2a4a34158.png

    组件引入成功,但组件的空间位置与我们预想的有些差距,这时,有的小伙伴想到了用我们在上节使用的position配合top和left对组件进行定位。这样做确实可行,但却不是最合适的选项。(四)flex布局,Flex是Flexible Box的缩写,意为"弹性布局"(重点)我们在wxml中写下组件作为页面内容之后,通常需要在wxss中调整组件的样式,而这调整组件从默认的样式到我们想要的样式的过程就叫做布局。布局的方式不止一种,小程序官方推荐我们使用flex布局。①使用方式:设置父组件display:flex回顾在我们对用户头像的样式设置中,为了让头像可以设置宽高,我们将头像display的值设置为block或者inline-block。两个取值都能设置宽高,但设置为block时该组件将独占一行,两种设置方式各有优缺点,但都是相应组件进行设置。而flex则不同,它不是对相应组件进行设置,而是对它的父组件进行设置。例如:

    1dee30b1571c41e5d7d2188a69cfdd91.png

    我们用一个view去包裹着这两个“于我们”组件,这个外面的view称为里面那两个组件的父组件,而里面那两个组件称为这个view的子组件。将父组件display设置为flex的作用:所有的子组件样式将会类似于内联块(inline-block)组件。
    如图所示:

    21f0ab8f1bc74eb68205aa9cb525a971.png

    57b8f39f224d1554808ad57733d160a0.png

    b1f6b3ff906f589aa60850a94955b0df.png

    74fef3c17f726ca6eb0fe655e01db8cc.png

    分析:由于图标和关于我们四个字的父组件的display为了flex,所以引入“关于我们”这四个字的view组件block级特性被转换成inline-block级特性,而image组件本来就是inline-block级组件,导致图片和文字出现在同一行。但是,现在我们需要的是这两个组件分别出现在两行。这时候,就需要一些特殊属性进行配合了。flex-direction属性,设置flex布局子元素的排列方式。常用取值为row(行)和column(列),默认情况(不写)取值为row。如图:

    1cb9d8b80852010537c759a7ef145795.png

    20b7cecd3c971e1f5ebe3304ee003d75.png

    我们通过设置flex-direction实现了两个组件分别在两行,但仅仅是这样还不够,观察ui图,我们可以发现“关于我们”部分和“收藏的书”部分各占了屏幕宽度的一半,并且各自都在半个屏幕的水平方向上居中。

    这时候,我们需要用到一个新的属性:align-items:用来设置子组件在交叉轴上的排列方式,常用取值为center(居中)。补充说明:flex-direction的取值叫主轴,与主轴垂直的叫交叉轴,例如在这里flex-direction取值是column(列),所以row(行)是交叉轴,而align-items设置的就是子组件的排列方式,所以align-items:center在这里的作用是设置子组件在每一行的排列方式。

    0d029d967ab16fc6a420d286e8407791.png

    a3bc10f67f162e07a6a642b5d85e8549.png

    7510e56375de3bc2a4dbab0421a12c6c.png

    0bc891d155f3f61ec01a25119c434953.png

    60680c15c6346a965ba2f0e4c0ab3df4.png

    6543033e86460900af04227caf04c1fc.png

    align-items除了center还有flex-start和flex-end等取值,分别指从左边开始排列和从右边开始排列。注意:我们在这里设置每个组件在每行居中是建立在交叉轴是row的基础上的。根据上述知识,我们让“收藏的书”部分也使用flex布局。具体代码如下:

    a7102ee073de7d1fa7a142d226639da3.png

    b08e61cb2e9bde91a928f83eceb41205.png

    31a3bc00644743d09334ad7b4baf0766.png

    分析:

    下一步我们就应该将两个部分平行。

    注意:我们说display:flex将子组件的性质设置为inline-block,而包裹着子组件的父组件(view组件)本身还是block级组件,所以如果将两部分分别看成整体,那么只需在这两部分外再加一个view使用flex布局即可。

    45c5aa83baaab0a78782e190add748c3.png

    bedbb8de67f99c335de7622ce3f14441.png

    3c6af5bfc4516e5707b8137ae473d3a3.png

    分析:两部分看起来好像是在同一行了,但是,有两个问题。一是两部分挤一起去了,二是字体不对称。显然,这是因为id为gywm和collectBook的两个view组件变成了inline-block级组件,而inline-block级组宽度由内容撑开,所以我们只需将两个view都设置为width:50%,再配上我们在前面设置的align-items:center即可解决问题。

    caf05347b617263facf45f7767fc5787.png

    7ab9c053a5b7d72653487f9e7e9f88d6.png

    cee46b4a74ac04fa71e9da11f34e921d.png

    关于字体不对称的问题我们下节再解决喔~布局最重要的是整体和分割思想,一个页面是大整体,而大整体由哪些小整体组成,都需要好好研究。
    展开全文
  • <template> <view class="container"> <view class="user-section"> <image class="bg" src="/static/user-bg.jpg"></image> <view cl...

     

    <template>
        <view class="container">

            <view class="user-section">
                <image class="bg" src="/static/user-bg.jpg"></image>
                <view class="user-info-box">
                    <view class="portrait-box">
                        <image :src='userInfo.headPhoto' mode='aspectFill' class="portrait" v-if="userInfo.headPhoto"></image>
                        <view v-else>
                            <image :src='userInfo.photo[userInfo.photo.length - 1].image || "/static/missing-face.png"' mode='aspectFill' class="portrait"></image>
                        </view>
                    </view>
                    <view class="info-box">
                        <text class="username">{{userInfo.username || '游客'}}</text>
                    </view>
                </view>
                <view class="vip-card-box">
                    <image class="card-bg" src="/static/vip-card-bg.png" mode=""></image>
                    <view class="b-btn">
                        立即开通
                    </view>
                    <view class="tit">
                        <text class="yticon icon-iLinkapp-"></text>
                        DCloud会员
                    </view>
                    <text class="e-m">DCloud Union</text>
                    <text class="e-b">开通会员开发无bug 一测就上线</text>
                </view>
            </view>

            <view class="cover-container" :style="[{
                    transform: coverTransform,
                    transition: coverTransition
                }]"
             @touchstart="coverTouchstart" @touchmove="coverTouchmove" @touchend="coverTouchend">
                <image class="arc" src="/static/arc.png"></image>

                <view class="tj-sction">
                    <view class="tj-item">
                        <text class="num">128.8</text>
                        <text>余额</text>
                    </view>
                    <view class="tj-item">
                        <text class="num">0</text>
                        <text>优惠券</text>
                    </view>
                    <view class="tj-item">
                        <text class="num">20</text>
                        <text>积分</text>
                    </view>
                </view>
                <!-- 订单 -->
                <view class="order-section">
                    <view class="order-item" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover" :hover-stay-time="50">
                        <text class="yticon icon-shouye"></text>
                        <text>全部订单</text>
                    </view>
                    <view class="order-item" @click="navTo('/pages/order/order?state=1')" hover-class="common-hover" :hover-stay-time="50">
                        <text class="yticon icon-daifukuan"></text>
                        <text>待付款</text>
                    </view>
                    <view class="order-item" @click="navTo('/pages/order/order?state=2')" hover-class="common-hover" :hover-stay-time="50">
                        <text class="yticon icon-yishouhuo"></text>
                        <text>待收货</text>
                    </view>
                    <view class="order-item" @click="navTo('/pages/order/order?state=4')" hover-class="common-hover" :hover-stay-time="50">
                        <text class="yticon icon-shouhoutuikuan"></text>
                        <text>退款/售后</text>
                    </view>
                </view>
                <!-- 浏览历史 -->
                <view class="history-section icon">
                    <view class="sec-header">
                        <text class="yticon icon-lishijilu"></text>
                        <text>浏览历史</text>
                    </view>
                    <scroll-view scroll-x class="h-list">
                        <image @click="navTo('/pages/product/product')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553105186633&di=c121a29beece4e14269948d990f9e720&imgtype=0&src=http%3A%2F%2Fimg004.hc360.cn%2Fm8%2FM04%2FDE%2FDE%2FwKhQplZ-QteEBvsbAAAAADUkobU751.jpg"
                         mode="aspectFill"></image>
                        <image @click="navTo('/pages/product/product')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553105231218&di=09534b9833b5243296630e6d5b728eff&imgtype=0&src=http%3A%2F%2Fimg002.hc360.cn%2Fm1%2FM05%2FD1%2FAC%2FwKhQcFQ3iN2EQTo8AAAAAHQU6_8355.jpg"
                         mode="aspectFill"></image>
                        <image @click="navTo('/pages/product/product')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553105320890&di=c743386be51f2c4c0fd4b75754d14f3c&imgtype=0&src=http%3A%2F%2Fimg007.hc360.cn%2Fhb%2FMTQ1OTg4ODY0MDA3Ny05OTQ4ODY1NDQ%3D.jpg"
                         mode="aspectFill"></image>
                        <image @click="navTo('/pages/product/product')" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2691146630,2165926318&fm=26&gp=0.jpg"
                         mode="aspectFill"></image>
                        <image @click="navTo('/pages/product/product')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553105443324&di=8141bf13f3f208c61524d67f9bb83942&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01ac9a5548d29b0000019ae98e6d98.jpg"
                         mode="aspectFill"></image>
                        <image @click="navTo('/pages/product/product')" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=191678693,2701202375&fm=26&gp=0.jpg"
                         mode="aspectFill"></image>
                    </scroll-view>
                    <list-cell icon="icon-iconfontweixin" iconColor="#e07472" title="我的钱包" tips="您的会员还有3天过期"></list-cell>
                    <list-cell icon="icon-dizhi" iconColor="#5fcda2" title="地址管理" @eventClick="navTo('/pages/address/address')"></list-cell>
                    <list-cell icon="icon-share" iconColor="#9789f7" title="分享" tips="邀请好友赢10万大礼"></list-cell>
                    <list-cell icon="icon-pinglun-copy" iconColor="#ee883b" title="晒单" tips="晒单抢红包"></list-cell>
                    <list-cell icon="icon-shoucang_xuanzhongzhuangtai" iconColor="#54b4ef" title="我的收藏"></list-cell>
                    <list-cell icon="icon-shezhi1" iconColor="#e07472" title="设置" border="" @eventClick="navTo('/pages/set/set')"></list-cell>
                </view>
            </view>


        </view>
    </template>
    <script>
        import listCell from '@/components/mix-list-cell';
        import {
            mapState,
            mapGetters
        } from 'vuex';
        let startY = 0,
            moveY = 0,
            pageAtTop = true;
        export default {
            components: {
                listCell
            },
            data() {
                return {
                    // token: '',
                    coverTransform: 'translateY(0px)',
                    coverTransition: '0s',
                    moving: false,
                    photo: '',
                }
            },
            // 初始化只执行一次
            onLoad() {

            },
            // 监听页面显示,切回页面时重新执行
            onShow() {
                // console.log(this.token)
                // console.log(this.hasLogin)
                // console.log(this.userInfo)
            },
            // #ifndef MP
            onNavigationBarButtonTap(e) {
                const index = e.index;
                if (index === 0) {
                    this.navTo('/pages/set/set');
                } else if (index === 1) {
                    // #ifdef APP-PLUS
                    const pages = getCurrentPages();
                    const page = pages[pages.length - 1];
                    const currentWebview = page.$getAppWebview();
                    currentWebview.hideTitleNViewButtonRedDot({
                        index
                    });
                    // #endif
                    uni.navigateTo({
                        url: '/pages/notice/notice'
                    })
                }
            },
            // #endif
            computed: {
                ...mapState(['hasLogin', 'userInfo','token']),
            },
            methods: {

                /**
                 * 统一跳转接口,拦截未登录路由
                 * navigator标签现在默认没有转场动画,所以用view
                 */
                navTo(url) {
                    // 必需用!
                    if (!this.token) {
                        url = '/pages/public/login';
                    } 
                    uni.navigateTo({
                        url
                    })
                },

                /**
                 *  会员卡下拉和回弹
                 *  1.关闭bounce避免ios端下拉冲突
                 *  2.由于touchmove事件的缺陷(以前做小程序就遇到,比如20跳到40,h5反而好很多),下拉的时候会有掉帧的感觉
                 *    transition设置0.1秒延迟,让css来过渡这段空窗期
                 *  3.回弹效果可修改曲线值来调整效果,推荐一个好用的bezier生成工具 http://cubic-bezier.com/
                 */
                coverTouchstart(e) {
                    if (pageAtTop === false) {
                        return;
                    }
                    this.coverTransition = 'transform .1s linear';
                    startY = e.touches[0].clientY;
                },
                coverTouchmove(e) {
                    moveY = e.touches[0].clientY;
                    let moveDistance = moveY - startY;
                    if (moveDistance < 0) {
                        this.moving = false;
                        return;
                    }
                    this.moving = true;
                    if (moveDistance >= 80 && moveDistance < 100) {
                        moveDistance = 80;
                    }

                    if (moveDistance > 0 && moveDistance <= 80) {
                        this.coverTransform = `translateY(${moveDistance}px)`;
                    }
                },
                coverTouchend() {
                    if (this.moving === false) {
                        return;
                    }
                    this.moving = false;
                    this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
                    this.coverTransform = 'translateY(0px)';
                }
            }
        }
    </script>
    <style lang='scss'>
        %flex-center {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        %section {
            display: flex;
            justify-content: space-around;
            align-content: center;
            background: #fff;
            border-radius: 10upx;
        }

        .user-section {
            height: 520upx;
            padding: 100upx 30upx 0;
            position: relative;

            .bg {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                filter: blur(1px);
                opacity: .7;
            }
        }

        .user-info-box {
            height: 180upx;
            display: flex;
            align-items: center;
            position: relative;
            z-index: 1;

            .portrait {
                width: 130upx;
                height: 130upx;
                border: 5upx solid #fff;
                border-radius: 50%;
            }

            .username {
                font-size: $font-lg + 6upx;
                color: $font-color-dark;
                margin-left: 20upx;
            }
        }

        .vip-card-box {
            display: flex;
            flex-direction: column;
            color: #f7d680;
            height: 240upx;
            background: linear-gradient(left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));
            border-radius: 16upx 16upx 0 0;
            overflow: hidden;
            position: relative;
            padding: 20upx 24upx;

            .card-bg {
                position: absolute;
                top: 20upx;
                right: 0;
                width: 380upx;
                height: 260upx;
            }

            .b-btn {
                position: absolute;
                right: 20upx;
                top: 16upx;
                width: 132upx;
                height: 40upx;
                text-align: center;
                line-height: 40upx;
                font-size: 22upx;
                color: #36343c;
                border-radius: 20px;
                background: linear-gradient(left, #f9e6af, #ffd465);
                z-index: 1;
            }

            .tit {
                font-size: $font-base+2upx;
                color: #f7d680;
                margin-bottom: 28upx;

                .yticon {
                    color: #f6e5a3;
                    margin-right: 16upx;
                }
            }

            .e-b {
                font-size: $font-sm;
                color: #d8cba9;
                margin-top: 10upx;
            }
        }

        .cover-container {
            background: $page-color-base;
            margin-top: -150upx;
            padding: 0 30upx;
            position: relative;
            background: #f5f5f5;
            padding-bottom: 20upx;

            .arc {
                position: absolute;
                left: 0;
                top: -34upx;
                width: 100%;
                height: 36upx;
            }
        }

        .tj-sction {
            @extend %section;

            .tj-item {
                @extend %flex-center;
                flex-direction: column;
                height: 140upx;
                font-size: $font-sm;
                color: #75787d;
            }

            .num {
                font-size: $font-lg;
                color: $font-color-dark;
                margin-bottom: 8upx;
            }
        }

        .order-section {
            @extend %section;
            padding: 28upx 0;
            margin-top: 20upx;

            .order-item {
                @extend %flex-center;
                width: 120upx;
                height: 120upx;
                border-radius: 10upx;
                font-size: $font-sm;
                color: $font-color-dark;
            }

            .yticon {
                font-size: 48upx;
                margin-bottom: 18upx;
                color: #fa436a;
            }

            .icon-shouhoutuikuan {
                font-size: 44upx;
            }
        }

        .history-section {
            padding: 30upx 0 0;
            margin-top: 20upx;
            background: #fff;
            border-radius: 10upx;

            .sec-header {
                display: flex;
                align-items: center;
                font-size: $font-base;
                color: $font-color-dark;
                line-height: 40upx;
                margin-left: 30upx;

                .yticon {
                    font-size: 44upx;
                    color: #5eba8f;
                    margin-right: 16upx;
                    line-height: 40upx;
                }
            }

            .h-list {
                white-space: nowrap;
                padding: 30upx 30upx 0;

                image {
                    display: inline-block;
                    width: 160upx;
                    height: 160upx;
                    margin-right: 20upx;
                    border-radius: 10upx;
                }
            }
        }
    </style>
     

    展开全文
  • shopApp 移动商城微信小程序 截图 扫码打开小程序 首页 新品上线 购物车 个人中心 视频演示 demo.mp4
  • 上一篇:微信小程序微商城(八):缓存实现商品购物车功能 看效果 开发计划 1、实现微信授权并获取用户信息 2、个人中心页面布局 一、实现微信授权并获取用户信息 mine.js onLoad: function () { if...
  • 2.1 微信小程序 16 2.1.1 微信小程序简介 16 2.1.2 微信小程序生命周期 17 2.1.3 微信小程序的数据请求和过程 18 2.2 C/S模式 19 2.4 MySQL数据库 20 2.4.1 MySQL简介 20 2.4.2 MySQL应用 22 2.4.3 PHP 和 MySQL 的...
  • 微信小程序实战篇-个人中心

    万次阅读 多人点赞 2017-08-04 14:57:16
    哈喽,大家好,又到周五啦,有木有期待今天的更新呀~今天要教大家的是制作个人中心界面,先上效果图 个人中心制作 1. mine.js // pages/mine/mine.js var app = getApp() Page({ data: { userInfo: {},...
  • 微信小程序实战 版本:0.17.172600(wxss背景图设置会不成功) 转载请标明来处 先上一波gif图片 gif对应功能块 > 首页(定位成功情况且有门店) > 门店列表(定位成功情况却没有门店) > 更多(定位没有成功情况也...
  • 5.个体户和个人类型主体最多可注册5个小程序个人微信小程序上线流程1.准备资料:未被使用的邮箱、个人银行卡绑定的微信号、身份证信息、手机号申请小程序的流程比较简单,点击官方链接 https:/...
  • 点击观看视频 ↓↓↓微信小程序个人中心页面搭建https://www.zhihu.com/video/1196110860186255360课程文字版​1、创建个人中心页面文件夹(1)在src/pages文件夹下面新建一个命名为me的文件夹,并且在文件夹下创建...
  • 第一个微信小程序demo 项目简介  这个demo有8个页面:欢迎页、登录注册页、场馆首页、场馆详情页、课程首页、个人中心、我的订单、我的收藏。场馆首页中的场馆列表加载更多出的数据是请求的接口数据,场馆详情页...
  • 微信小程序

    2018-05-02 19:46:45
    微信小程序源码,简易版商城开发,主页,分类浏览,购物车,个人中心
  • 微信小程序编程学习,一种专门学习微信小程序的小程序 不多说,先看效果图 已实现功能 1,post请求json列表 2,首页列表 3,学习详情页 4,个人中心 5,登陆获取用户名和头像 6,openid的获取 7,你问我答模块 8,...
  • 微信小程序-个人中心/钱包

    千次阅读 2018-09-28 15:32:32
    效果: .wxml页面 &lt;view class="user_content"&gt; &lt;!--表头--&gt; &lt;view class="user_head"&gt; &lt;...userinfo-avatar"
  • 微信小程序列表开发-个人中心界面(一)

    万次阅读 多人点赞 2019-04-21 00:30:34
    先放个效果图让你们看一下是不是你们需要的,到时候会写几篇博客把里面的组件也讲一下 .wxml .wxss .js ...我里面的引用的照片都放在...第三行是获取微信微信的头像,第四行是获取微信的名字,是个固定的语法...
  • 个人微信小程序

    2020-04-26 13:20:18
    个人微信小程序小程序简介功能介绍个人简历旅游摄影旅途感悟个人计划系统中心小程序技术点总结总结 小程序简介 小程序开发主要基于两个目的,一是为了记录自己的生活及旅游,记录旅游途中的摄影及体会。二是为了...
  • 微信小程序源码

    2018-05-02 19:51:26
    微信小程序源码,简易版商城开发,主页,分类浏览,购物车,个人中心地址管理,订单管理
  • 微信小程序个人中心 包含功能点: tab切换-高级版 全部订单-待付款-待收货-退款退货 结构:user.wxml <view class="user_info_wrap"> <view class="user_img_wrap" wx:if="{{userinfo.avatarUrl}}"&...
  • 微信小程序好看的个人中心界面之水波纹

    千次阅读 热门讨论 2019-08-13 22:20:26
    正如下面所示,在基本信息卡片下方会一直有水波纹在流动,很适合放在个人中心界面,效果很好 实现的基本原理:用一张水波纹的gif图片,设置为和背景图同样的色调,将水波纹设置为绝对定位,固定在下方,并且显示的...
  • 方法:首先在微信中打开小程序,点击“个人中心”;接着点击“待发货”;然后点击“申请退款”按钮,选择“退款理由”,选择“提交申请”;最后等待卖家回复,等待退款即可。操作方法:以拼多多为例,打开微信中的拼...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 504
精华内容 201
关键字:

微信小程序个人中心

微信小程序 订阅