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

    万次阅读 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

    展开全文
  • 上次我们登陆成功后,应该在内存中,保存登陆的...这里我们看到用到了 reLauch ,这样能保证个人中心页面重新加载,onload 方法重新执行 然后动态的修改页面的展示 行了,有了数据后,我们爱干嘛干嘛! ...

    上次我们登陆成功后,应该在内存中,保存登陆的信息,然后再跳转到 个人中心页面

     

    这里我们看到用到了 reLauch ,这样能保证个人中心页面重新加载,onload 方法重新执行

     

    然后动态的修改页面的展示

     

    行了,有了数据后,我们爱干嘛干嘛!

     

    展开全文
  • 餐饮行业常用获客渠道 ...现在还有小程序解决方案助力餐饮行业获客。 个人中心页设计 个人中心功能模块有: 获取微信头像、昵称 开通会员 我的订单 我的优惠券 我的积分 积分商城 推荐给好友 在线客服 ...

    餐饮行业常用获客渠道

    1. 地推:派发传单等

    2. 网络推广:搜索引擎、自有媒体、垂直媒体、自媒体、电视广告、网页广告等

    3. 户外广告:户外海报、大屏广告等

    4. 活动:会员活动、店庆活动等

     

    现在还有小程序解决方案助力餐饮行业获客。

    个人中心页设计

    个人中心功能模块有:

    • 获取微信头像、昵称
    • 开通会员
    • 我的订单
    • 我的优惠券
    • 我的积分
    • 积分商城
    • 推荐给好友
    • 在线客服
    展开全文
  • 每个小程序基本上都会使用到,里面可以设置保存每个用户的数据和操作习惯等等,界面也很美观,看起来很舒服,希望大家能够喜欢
  • } json { "navigationBarTitleText": "个人中心", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#3478F7", "navigationBarTextStyle": "white", "enablePullDownRefresh": true } 撒花!...

    演示

    在这里插入图片描述
    wxml

    <view class="view_contain">
     
     <!-- 第一部分 -->
     <view wx:if="{{userinfo}}">
       <view class="view_1">
         <view class="view_image_text">
           <view>
             <image class="image_radius" src="{{userinfo.head_portrait}}" />
           </view>
           <view class="uname">
             <text>{{userinfo.username}}</text>
             <text>{{userinfo.tel}}</text>
           </view>
           </view>
         </view>
       </view>
    
     <view wx:else class="view_1">
         <view class="view_image_text">
           <view>
             <image class="image_radius" src="/image/tutu.png" />
           </view>
           <view class="uname">
             <navigator url="/pages/login/login">
             <text>未登录</text>
           </navigator>
             <!-- <text>{{userinfo.tel}}</text> -->
           </view>
         </view>
       </view>
    
     <!-- 第三部分 -->
     <view class="big3">
       <view wx:for="{{info}}" wx:key="item" class="view_3 {{item.class}}">
         <navigator url="{{item.url}}">
           <view class="list-item">
             <image class="item-image" src="/image/tutu.png"></image>
             <text class="item-text">{{item.title}}</text>
             <image class="image-jiantou"
               src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2979651982,619079820&fm=26&gp=0.jpg"></image>
           </view>
         </navigator>
       </view>
     </view>
    </view>
    

    js

    var plugin = requirePlugin("ykfchat")
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        info:[
          {title:"我的钱包",url:"/pages/patientment/patientment"},
          {title:"邀请有礼"},{title:"认证中心"},
          {title:"联系客服",url:"plugin://ykfchat/chat-page?wechatapp_id=251563&channel_id=27679&scene=p98503hqaepl"},
          {title:"帮助与反馈"},
          {title:"直播",url:"/pages/live/live"},
          {class:"box",title:"设置"}
        ],
        userinfo:''
      },
    
       // 传参
       jump() {
        plugin.callback.on("getSessionFrom", this.session, this); // 事件名称, 事件函数,this作用域
        wx.navigateTo({
          url: 'plugin://ykfchat/chat-page?wechatapp_id=251563&channel_id=27679&scene=p98503hqaepl'
        })
      },
      session(callback) {
        // 組裝数据
        let data = {
          sessionFrom: {
            channel_logo: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1504788190,2342400802&fm=26&gp=0.jpg',//需为网络资源
            channel_nickname: '宝宝'
          }
        }
        callback(data)
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        let _this = this
        // 根据缓存id查询该用户
       wx.getStorage({
         key: 'user_tel',
         success:function(res){
           // console.log(res.data);
           wx.request({
             url: 'http://www.teacherapi.com/api/getLogin',
             data:{
               phone: res.data
             },
             success: (result) => {
               console.log(result.data.data)
               _this.setData({
                 userinfo:result.data.data
               })
             },
           })
         }
       })
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })
    

    css

    /* pages/personal_center/personal_center.wxss */
    /* 使用page就是为了保证  满屏 */
    
    page {
      width: 100%;
      height: 100%;
    }
    
    .view_contain {
      width: 100%;
      height: 100%;
      background: white
    }
    
    /* 第一部分 */
    
    .view_1 {
      display: flex;
      justify-content: center;
      width: 100%;
      height: 350rpx;
      background: rgb(52,120,247);
    }
    
    .view_image_text {
      width: 100%;
      display: flex;
      justify-content: left;
      /* flex-direction: column; */
        /* align-items: center; */
      color: white;
      margin-left: 40rpx;
      margin-top: 80rpx;
    }
    
    .uname{
      display: flex;
      flex-direction: column;
      margin-left: 45rpx;
    
      /* align-items: center; */
      margin-top: 6rpx;
    }
    
    .image_radius {
      height: 50px;
      width: 50px;
      border-radius: 30px;
    }
    
    
    
    /* 第三部分 */
    .big3{
      width: 90%;
      margin: 0rpx auto;
      margin-top: -120rpx;
      border: 1rpx solid lightgray;
      border-radius: 20rpx;
      background: white;
    }
    .view_3 {
      width: 100%;
      height: 100rpx;
      /* background: #f0eeed; */
      border-bottom: 1rpx solid lightgray;
    }
    
    .list-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      height: 100rpx;
      /* margin-top: 20rpx; */
      position: relative; /*父元素位置要设置为相对*/
     
      
    }
    
    .item-image {
      width: 50rpx;
      height: 50rpx;
      margin: 20rpx;
      border-radius: 12px;
      border:1px solid white;
      
    }
    
    .item-text {
      color: gray;
      /* color: rgb(51,51,51); */
      font-size: 30rpx;
      margin-left: 20rpx;
    }
    
    .image-jiantou {
      width: 20rpx;
      height: 35rpx;
      position: absolute; /* 要约束所在位置的子元素的位置要设置成绝对 */
      right: 0; /* 靠右调节 */
      margin-right: 35rpx;
    }
    
    /*去掉最后面的下画线*/
    .box{
      border: none;
    }
    
    

    json

    {
      "navigationBarTitleText": "个人中心",
      "backgroundTextStyle": "light",
      "navigationBarBackgroundColor": "#3478F7",
      "navigationBarTextStyle": "white",
      "enablePullDownRefresh": true
    }
    

    撒花!!!!

    在这里插入图片描述

    展开全文
  • 微信小程序个人中心的列表控件

    千次阅读 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我的收藏wxss.list-item {display: flex;flex-direction: row;align-items: center;width: 100%;height: 80rpx;margin-top: 10rpx;position: relative; /*父元素位置要设置为...
  • 通常我们的个人中心页面,都具备有其他模块的入口方式。入口方式主要有以下两种: 例如: 将小程序的跳转页面的链接,放入JS中的 data 数据。wxml中通过使用wx:for 实现入口模块跳转问题。 HTML: &lt;...
  • &lt;template&gt; &lt;view class="mine_container" &gt; &lt;!--style="height:{{wh}}px;"--&gt; &lt;view class="user_info"&...
  • 小程序个人中心(我的页面)

    千次阅读 2020-07-27 22:00:07
    1.点击我的,跳转到我的页面,有组件获取头像和名字,开放能力里的open-type标签,设置类名,直接调用头像或者地址和个人信息。 2.点击联系客服,触发绑定事件调用api: uni.makePhoneCall({ phoneNumber: “10086”...
  • <template> <view class="container"> <view class="user-section"> <image class="bg" src="/static/user-bg.jpg"></image> <view cl...
  • 小程序侧滑个人中心

    2018-09-17 14:41:05
    手指触摸页面向左滑动开始到结束的距离超过设定的距离就会滑出个人中心 (2).手指触摸页面向右滑动开始到结束的距离超过设定的距离就会隐藏个人中心 2.点击事件 (1).点击图标滑出侧滑栏 (2).出现个人中心的...
  • 微信小程序实战篇-个人中心

    万次阅读 多人点赞 2017-08-04 14:57:16
    哈喽,大家好,又到周五啦,有木有期待今天的更新呀~今天要教大家的是制作个人中心界面,先上效果图 个人中心制作 1. mine.js // pages/mine/mine.js var app = getApp() Page({ data: { userInfo: {},...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,209
精华内容 483
关键字:

小程序个人中心