AI 助理
备案控制台
开发者社区 云计算 文章 正文

万能的微信小程序个人主页：商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】

2024-08-19 243
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这篇文章分享了四个不同应用场景下的微信小程序个人主页的源代码和页面效果展示，包括商城系统、外卖系统、医疗挂号和电影购票系统的个人主页。提供了完整的页面布局和样式代码，允许开发者直接复制粘贴并根据自己的项目需求进行简单的改造使用。

前言

    以下给出来四个常见的小程序个人主页，分别是商城系统个人主页，外卖系统个人主页，挂号系统个人主页，电影购票系统个人主页。包括完整的页面布局代码，完整的样式代码。使用的时候，只需要将页面代码和样式代码复制到自己项目对应的页面即可。而且可以根据已有代码只需稍微改造，便可以作为其他小程序的个人首页。

1、个人主页（商城系统）

1.1 页面效果

在这里插入图片描述

1.2 页面源码（.wxml）

这里的图片地址，修改为自己项目图片地址。也可以引入在线图片链接

<view class="user_info_wrap">
    <view class="user_img_wrap">
        <image class="user_bg" src="/images/back01.jpg" />
        <view class="user_info">
            <image class="user_icon" src="/images/touxiang01.jpg" />
            <view class="user_name">张三牛人</view>
        </view>
    </view>

</view>
<view class="user_content">
    <view class="user_main">
        <!-- 历史足迹 -->
        <view class="history_wrap">
            <navigator>
                <view class="his_num">0</view>
                <view class="his_name">收藏的店铺</view>
            </navigator>
            <navigator url="/pages/collect/index">
                <view class="his_num">0</view>
                <view class="his_name">收藏的商品</view>
            </navigator>
            <navigator>
                <view class="his_num">0</view>
                <view class="his_name">关注的商品</view>
            </navigator>
            <navigator>
                <view class="his_num">0</view>
                <view class="his_name">我的足迹</view>
            </navigator>
        </view>
        <!-- 我的订单 -->
        <view class="orders-wrap">
            <view class="orders_title">我的订单</view>
            <view class="order_content">
                <navigator url="/pages/order/index?type=1">
                    <view class="iconfont icon-ding_dan"></view>
                    <view class="order_name">全部订单</view>
                </navigator>
                <navigator url="/pages/order/index?type=2">
                    <view class="iconfont icon-fukuantongzhi"></view>
                    <view class="order_name">待付款</view>
                </navigator>
                <navigator url="/pages/order/index?type=3">
                    <view class="iconfont icon-receipt-address"></view>
                    <view class="order_name">待收获</view>
                </navigator>
                <navigator>
                    <view class="iconfont icon-tuihuo"></view>
                    <view class="order_name">退货/退货</view>
                </navigator>
            </view>
        </view>
        <!-- 收货地址 -->
        <view class="address_wrap">收获地址管理</view>
        <!-- 应用信息相关 -->
        <view class="app_info_wrap">
            <view class="app_info_item app_info_contact">
                <text>联系客服</text>
                <text>18348392981</text>
            </view>
            <navigator url="/pages/feedback/index" class="app_info_item" >意见反馈</navigator>
            <view class="app_info_item">关于我们</view>
        </view>
        <!-- 推荐 -->
        <view class="recommend_wrap">把应用推荐给其他人</view>
    </view>
</view>

1.3 样式代码 （.wxss）

page {
  background-color: #ccc;
}
.user_info_wrap {
  height: 45vh;
  overflow: hidden;
  background-color: var(--themeColor);
  position: relative;
}
.user_info_wrap .user_img_wrap {
  position: relative;
}
.user_info_wrap .user_img_wrap .user_bg {
    height: 50vh;
    text-align: center;
  /* filter: blur(10rpx); */
}
.user_info_wrap .user_img_wrap .user_info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 20%;
  text-align: center;
}
.user_info_wrap .user_img_wrap .user_info .user_icon {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
}
.user_info_wrap .user_img_wrap .user_info .user_name {
  color: #fff;
  margin-top: 40rpx;
  font-size: 40rpx;
}
.user_info_wrap .user_btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 40%;
  border: 1rpx solid greenyellow;
  color: greenyellow;
  font-size: 38rpx;
  padding: 30rpx;
  border-radius: 10rpx;
}
.user_content {
  position: relative;
}
.user_content .user_main {
  padding-bottom: 90rpx;
  color: #666;
  position: absolute;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  top: -40rpx;
}
.user_content .user_main .history_wrap {
  background-color: #fff;
  display: flex;
}
.user_content .user_main .history_wrap navigator {
  flex: 1;
  text-align: center;
  padding: 10rpx 0;
}
.user_content .user_main .history_wrap navigator .his_num {
  color: var(--themeColor);
}
.user_content .user_main .orders-wrap {
  background-color: #fff;
  margin-top: 30rpx;
}
.user_content .user_main .orders-wrap .orders_title {
  padding: 20rpx;
  border-bottom: 1rpx solid #ccc;
}
.user_content .user_main .orders-wrap .order_content {
  display: flex;
}
.user_content .user_main .orders-wrap navigator {
  padding: 15rpx 0;
  flex: 1;
  text-align: center;
}
.user_content .user_main .orders-wrap navigator .iconfont {
  color: var(--themeColor);
  font-size: 40rpx;
}
.user_content .user_main .address_wrap {
  margin-top: 30rpx;
  background-color: #fff;
  padding: 20rpx;
}
.user_content .user_main .app_info_wrap {
  margin-top: 30rpx;
  background-color: #fff;
}
.user_content .user_main .app_info_wrap .app_info_item {
  padding: 20rpx;
  border-bottom: 1rpx solid #ccc;
}
.user_content .user_main .app_info_wrap .app_info_contact {
  display: flex;
  justify-content: space-between;
}
.user_content .user_main .recommend_wrap {
  margin-top: 30rpx;
  background-color: #fff;
  padding: 20rpx;
}
@font-face {
  font-family: "iconfont";
  /* Project id 4135149 */
  src: url('//at.alicdn.com/t/c/font_4135149_lsktbsemkwh.woff2?t=1687535938174') format('woff2'),
    url('//at.alicdn.com/t/c/font_4135149_lsktbsemkwh.woff?t=1687535938174') format('woff'),
    url('//at.alicdn.com/t/c/font_4135149_lsktbsemkwh.ttf?t=1687535938174') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-fenxiang:before {
  content: "\e600";
}

.icon-shoucang:before {
  content: "\e602";
}

.icon-receipt-address:before {
  content: "\e673";
}

.icon-shoucang1:before {
  content: "\e636";
}

.icon-kefu:before {
  content: "\e625";
}

.icon-fukuantongzhi:before {
  content: "\e60c";
}

.tuikuantuihuo:before {
  content: "\e603";
}

.icon-ding_dan:before {
  content: "\e61b";
}

.icon-jinqian:before {
  content: "\e652";
}

.icon-gouwuchekong:before {
  content: "\e601";
}

.icon-gouwuche:before {
  content: "\e601"
}

.icon-tuihuo:before{
  content: "\e601"
}

2、个人主页（外卖系统）

2.1 页面效果

在这里插入图片描述

2.2 页面源码（.wxml）

<scroll-view class='scbg' scroll-y='true'>
    <view class="parent_catainer">
        <!-- 头部 -->
        <view class="container_head">
            <image class="head_img" src="/images/waimai01.jpg"></image>
            <view class="head_pers_info" bindtap="head_pers_info">
                <view class="head_pic">
                    <image class="head_pic_content" mode="aspectFit" src="/images/waimai.jpg"></image>
                </view>
                <view class="inf_content">
                    <text class="user_info">张麻子</text>
                    <text class="family_info_ct_phone">联系电话：1832437281</text>
                </view>
            </view>
        </view>

        <!-- 我的钱包 -->
        <view class="orders-wrap">
            <view class="orders_title">我的订单</view>
            <view class="order_content">
                <navigator url="/pages/order/index?type=1">
                    <view class="iconfont icon-ding_dan">10.4万</view>
                    <view class="order_name">借钱</view>
                </navigator>
                <navigator url="/pages/order/index?type=2">
                    <view class="iconfont icon-fukuantongzhi">100.34元</view>
                    <view class="order_name">我的账单</view>
                </navigator>
                <navigator url="/pages/order/index?type=3">
                    <view class="iconfont icon-receipt-address">6月</view>
                    <view class="order_name">消费账单</view>
                </navigator>
                <navigator>
                    <view class="iconfont icon-tuihuo">1.66元</view>
                    <view class="order_name">查看卡额度</view>
                </navigator>
            </view>
        </view>

        <view class="userItemListView">
            <view class="my_priview_md" bindtap="myappointpage">
                <text>我的米粒</text>
                <view class="arrow"></view>
            </view>
            <view class="my_priview_md" bindtap="openmyorder">
                <image class="my_priview" src="/images/mine_fiend.png"></image>
                <text>美团红包</text>
                <view class="arrow"></view>
            </view>
            <view class="my_priview_md" bindtap="myaid">
                <image class="my_priview" src="/images/mine_fiend.png"></image>
                <text>商家代金券</text>
                <view class="arrow"></view>
            </view>
            <view class="my_priview_md" bindtap="myfriend">
                <image class="my_priview" src="/images/mine_fiend.png"></image>
                <text>拼好饭代金券</text>
                <view class="arrow"></view>
            </view>
            <view class="my_priview_md" bindtap="mycollection">
                <image class="my_priview" src="/images/mine_fiend.png"></image>
                <text>我的收藏</text>
                <view class="arrow"></view>
            </view>

            <view class="my_priview_md" bindtap="mycollection">
                <image class="my_priview" src="/images/mine_fiend.png"></image>
                <text>我的评价</text>
                <view class="arrow"></view>
            </view>
        </view>

        <view class="userItemListView">
            <view class="my_priview_md" bindtap="bind">
                <image class="my_priview" src="/images/mine_fiend.png"></image>
                <text>个人资料</text>
                <view class="arrow"></view>
            </view>
            <view class="my_priview_md" bindtap="bind">
                <image class="my_priview" src="/images/mine_fiend.png"></image>
                <text>我的地址</text>
                <view class="arrow"></view>
            </view>
            <view class="my_priview_md" bindtap="bind">
                <image class="my_priview" src="/images/mine_fiend.png"></image>
                <text>修改手机号</text>
                <view class="arrow"></view>
            </view>

        </view>

        <view class="my_priview_logout" bindtap="bind"> 退出账号 </view>
    </view>
</scroll-view>

2.3 样式代码 （.wxss）


page {
  width: 100%;
  height: 100%;
  background:#f0f0f0;
}
.parent_catainer{
  background:#f0f0f0;
}

/* 头部背景图片 */
.container_head{
  height: 370rpx;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.head_img {
  position: absolute;
  width: 100%;
  height: 370rpx;
}

.head_pers_info{
   height: 200rpx;
   width: 100%;
   margin-bottom: 50rpx;
   justify-content: left;
   display: flex;
   align-items: center;
   flex-direction: row;
   position: absolute;
}

.head_pic{
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background-color: #08cbb0;
  color: #ffffff;
  align-items: center;
  display: flex;
  justify-content: center;
}
.head_pic_content{
  position: absolute;
  width: 110rpx;
  height: 110rpx;
  border-radius: 55rpx;
  background-color: white;
}

.head_pic{
  margin-left: 5%;
}

.inf_content{
  display: flex;
  flex-direction: column;
  margin-left: 10rpx;
  align-items: flex-start;
  justify-content: center;
   color: #ffffff;
   padding-bottom: 5rpx;
}

.user_info{
  text-align: left;
  font-size: 32rpx;
  font-weight: bold;
    margin-bottom: 8rpx;
    color: black;
}

.family_info_ct_phone{
  text-align: center;
  justify-content: center;
  font-size: 28rpx;
    margin-bottom: 2rpx;
    font-weight: bold;
    color: black;
}

.family_info_ct{
  text-align: center;
  justify-content: center;
  font-size: 28rpx;
  margin-bottom: 2rpx;
  width: 500rpx;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  text-overflow: ellipsis;
}

.userItemListView{
  background: #fff;
  padding: 0 0rpx;
  margin: 24rpx 0;
}

.userItemListView > view{
  height: 94rpx;
  line-height: 94rpx;
  padding-left: 50rpx;
  border-bottom: 1rpx solid #F1F1F1;
  position: relative;
}

/* 移除最后一个元素的下边框 */
.userItemListView > view:last-child{
  border: none;
}

.my_priview_md{
  display: flex;
  align-items: center;
}

.my_priview{
  width: 50rpx;
  height: 50rpx;
  margin-right: 10rpx;
}

.my_priview_logout{
    /* margin-top: 10rpx;
  width: 50rpx;
  height: 50rpx;
    margin-right: 10rpx; */
    text-align: center;
    margin-top: 30rpx;
  background-color: #fff;
  padding: 20rpx;
}
.arrow{
  width: 16rpx;
  height: 16rpx;
  border-top: 4rpx solid #999;
  border-right: 4rpx solid #999;
  /* 旋转45度 */
  transform: rotate(45deg);
  /* 调整位置 */
  position: absolute;
  right: 30rpx;
  top: 38rpx;
}

.userItemListView text{
  font-size: 30rpx;
}

.last_view{
   background:#f0f0f0;
   width: 100%;
   height:1200rpx;
}



 .orders-wrap {
  background-color: #fff;
  margin-top: 30rpx;
}
 .orders-wrap .orders_title {
  padding: 20rpx;
}
 .orders-wrap .order_content {
  display: flex;
}
 .orders-wrap navigator {
  padding: 15rpx 0;
  flex: 1;
  text-align: center;
}
 .orders-wrap navigator .iconfont {
  color: var(--themeColor);
  font-size: 25rpx;
}
 .address_wrap {
  margin-top: 30rpx;
  background-color: #fff;
  padding: 20rpx;
}

3、个人主页（医疗挂号）

3.1 页面效果

在这里插入图片描述

3.2 页面源码（.wxml）

<!-- 用户列表选项 -->
<scroll-view class='scbg' scroll-y='true'>
  <view class="parent_catainer">
    <!-- 头部 -->
    <view class="container_head">
      <image class="head_img" src="/images/back01.jpg"></image>
      <view class="head_pers_info" bindtap="head_pers_info">
        <view class="head_pic">
          <image class="head_pic_content" mode="aspectFit" src="/images/zhangmazi.jpg"></image>
        </view>
        <view class="inf_content">
          <text class="user_info">张麻子</text>
          <text class="family_info_ct_phone">联系电话：1832437281</text>
          <text class="family_info_ct">关联账号：张老师  </text>
        </view>
      </view>
    </view>

    <view class="userItemListView">
      <view class="my_priview_md" bindtap="myappointpage">
        <image class="my_priview" src="/images/mine_fiend.png"></image>
        <text>我的预约</text>
        <view class="arrow"></view>
      </view>
      <view class="my_priview_md" bindtap="openmyorder">
        <image class="my_priview" src="/images/mine_fiend.png"></image>
        <text>我的订单</text>
        <view class="arrow"></view>
      </view>
      <view class="my_priview_md" bindtap="myaid">
        <image class="my_priview" src="/images/mine_fiend.png"></image>
        <text>我的帮助</text>
        <view class="arrow"></view>
      </view>
      <view class="my_priview_md" bindtap="myfriend">
        <image class="my_priview" src="/images/mine_fiend.png"></image>
        <text>我的亲友</text>
        <view class="arrow"></view>
      </view>
      <view class="my_priview_md" bindtap="mycollection">
        <image class="my_priview" src="/images/mine_fiend.png"></image>
        <text>我的收藏</text>
        <view class="arrow"></view>
      </view>
    </view>

    <view class="userItemListView">
      <view class="my_priview_md" bindtap="bind">
        <image class="my_priview" src="/images/mine_fiend.png"></image>
        <text>个人资料</text>
        <view class="arrow"></view>
      </view>
      <view class="my_priview_md" bindtap="updatepassword">
        <image class="my_priview" src="/images/mine_fiend.png"></image>
        <text>修改密码</text>
        <view class="arrow"></view>
      </view>
      <view class="my_priview_md" bindtap="aboutus" hidden="true">
        <image class="my_priview" src="/images/mine_fiend.png"></image>
        <text>关于我们</text>
        <view class="arrow"></view>
      </view>
      <view class="my_priview_md" bindtap="logout">
        <image class="my_priview" src="/images/mine_fiend.png"></image>
        <text>退出登录</text>
        <view class="arrow"></view>
      </view>
    </view>

    <view class="last_view"></view>
  </view>
</scroll-view>

3.3 样式代码 （.wxss）

/* 用户列表选项样式 */
page {
  width: 100%;
  height: 100%;
  background:#f0f0f0;
}
.parent_catainer{
  background:#f0f0f0;
}

/* 头部背景图片 */
.container_head{
  height: 370rpx;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.head_img {
  position: absolute;
  width: 100%;
  height: 370rpx;
}

.head_pers_info{
   height: 200rpx;
   width: 100%;
   margin-bottom: 50rpx;
   justify-content: left;
   display: flex;
   align-items: center;
   flex-direction: row;
   position: absolute;
}

.head_pic{
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background-color: #08cbb0;
  color: #ffffff;
  align-items: center;
  display: flex;
  justify-content: center;
}
.head_pic_content{
  position: absolute;
  width: 110rpx;
  height: 110rpx;
  border-radius: 55rpx;
  background-color: white;
}

.head_pic{
  margin-left: 5%;
}

.inf_content{
  display: flex;
  flex-direction: column;
  margin-left: 10rpx;
  align-items: flex-start;
  justify-content: center;
   color: #ffffff;
   padding-bottom: 5rpx;
}

.user_info{
  text-align: left;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.family_info_ct_phone{
  text-align: center;
  justify-content: center;
  font-size: 28rpx;
  margin-bottom: 2rpx;
}

.family_info_ct{
  text-align: center;
  justify-content: center;
  font-size: 28rpx;
  margin-bottom: 2rpx;
  width: 500rpx;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  text-overflow: ellipsis;
}

.userItemListView{
  background: #fff;
  padding: 0 0rpx;
  margin: 24rpx 0;
}

.userItemListView > view{
  height: 94rpx;
  line-height: 94rpx;
  padding-left: 50rpx;
  border-bottom: 1rpx solid #F1F1F1;
  position: relative;
}

/* 移除最后一个元素的下边框 */
.userItemListView > view:last-child{
  border: none;
}

.my_priview_md{
  display: flex;
  align-items: center;
}

.my_priview{
  width: 50rpx;
  height: 50rpx;
  margin-right: 10rpx;
}

.arrow{
  width: 16rpx;
  height: 16rpx;
  border-top: 4rpx solid #999;
  border-right: 4rpx solid #999;
  /* 旋转45度 */
  transform: rotate(45deg);
  /* 调整位置 */
  position: absolute;
  right: 30rpx;
  top: 38rpx;
}

.userItemListView text{
  font-size: 30rpx;
}

.last_view{
   background:#f0f0f0;
   width: 100%;
   height:1200rpx;
}

4、个人主页（电影购票系统）

4.1 页面效果

在这里插入图片描述

4.2 页面源码（.wxml）

<scroll-view class='scbg' scroll-y='true'>
  <view class="parent_catainer">
    <!-- 头部 -->
    <view class="container_head">
      <image class="head_img" src="/images/back02.jpg"></image>
      <view class="head_pers_info" bindtap="head_pers_info">
        <view class="head_pic">
          <image class="head_pic_content" mode="aspectFit" src="/images/lisi.jpg"></image>
        </view>
        <view class="inf_content">
          <text class="user_info">蛋糕酱</text>
        </view>
      </view>
    </view>

    <view class="userItemListView">
      <view class="my_priview_md" bindtap="myappointpage">
        <text>电影票</text>
                <text class="my_priview_right">点击查看已购电影票</text>
      </view>
      <view class="my_priview_md" bindtap="openmyorder">
        <text>优惠券</text>
                <text class="my_priview_right">点击查看优惠券</text>
      </view>
      <view class="my_priview_md" bindtap="myaid">
        <text>权益卡</text>
                <view class="arrow"></view>
      </view>
      <view class="my_priview_md" bindtap="myfriend">
        <text>我的小食</text>
        <view class="arrow"></view>
      </view>
      <view class="my_priview_md" bindtap="mycollection">
        <text>想看的电影</text>
        <view class="arrow"></view>
      </view>
    </view>

    <view class="userItemListView">
      <view class="my_priview_md" bindtap="bind">
        <text>个人资料</text>
        <view class="arrow"></view>
      </view>
      <view class="my_priview_md" bindtap="updatepassword">
        <text>联系客服</text>
        <text class="my_priview_right">点击咨询票小密</text>
      </view>
      <view class="my_priview_md" bindtap="logout">
        <text>退出登录</text>
        <view class="arrow"></view>
      </view>
    </view>

    <view class="last_view"></view>
  </view>
</scroll-view>

4.3 样式代码 （.wxss）


page {
  width: 100%;
  height: 100%;
  background:#f0f0f0;
}
.parent_catainer{
  background:#f0f0f0;
}

/* 头部背景图片 */
.container_head{
  height: 370rpx;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.head_img {
  position: absolute;
  width: 100%;
  height: 370rpx;
}

.head_pers_info{
   height: 200rpx;
   width: 100%;
   margin-bottom: 50rpx;
   justify-content: left;
   display: flex;
   align-items: center;
   flex-direction: row;
   position: absolute;
}

.head_pic{
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background-color: #08cbb0;
  color: #ffffff;
  align-items: center;
  display: flex;
  justify-content: center;
}
.head_pic_content{
  position: absolute;
  width: 110rpx;
  height: 110rpx;
  border-radius: 55rpx;
  background-color: white;
}

.head_pic{
  margin-left: 5%;
}

.inf_content{
  display: flex;
  flex-direction: column;
  margin-left: 10rpx;
  align-items: flex-start;
  justify-content: center;
   color: #ffffff;
   padding-bottom: 5rpx;
}

.user_info{
  text-align: left;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.family_info_ct_phone{
  text-align: center;
  justify-content: center;
  font-size: 28rpx;
  margin-bottom: 2rpx;
}

.family_info_ct{
  text-align: center;
  justify-content: center;
  font-size: 28rpx;
  margin-bottom: 2rpx;
  width: 500rpx;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  text-overflow: ellipsis;
}

.userItemListView{
  background: #fff;
  padding: 0 0rpx;
  margin: 24rpx 0;
}

.userItemListView > view{
  height: 94rpx;
  line-height: 94rpx;
  padding-left: 50rpx;
  border-bottom: 1rpx solid #F1F1F1;
  position: relative;
}

/* 移除最后一个元素的下边框 */
.userItemListView > view:last-child{
  border: none;
}

.my_priview_md{
  display: flex;
    align-items: center;
    justify-content: space-between;

}

.my_priview_right{
      /* 调整位置 */
        position: absolute;
        right: 30rpx;
        color: #ccc;
}

.my_priview{
  width: 50rpx;
  height: 50rpx;
  margin-right: 10rpx;
}

.arrow{
  width: 16rpx;
  height: 16rpx;
  border-top: 4rpx solid #999;
  border-right: 4rpx solid #999;
  /* 旋转45度 */
  transform: rotate(45deg);
  /* 调整位置 */
  position: absolute;
  right: 30rpx;
  top: 38rpx;
}

.userItemListView text{
  font-size: 30rpx;
}

.last_view{
   background:#f0f0f0;
   width: 100%;
   height:1200rpx;
}
文章标签：
小程序
开发者
关键词：
微信小程序页面
微信页面
微信小程序编译
微信编译
微信小程序源代码
热爱技术的小郑
目录
相关文章
yuanzhengme
|
21小时前
|
小程序 前端开发 开发者
小程序的页面如何布局？
【10月更文挑战第16天】小程序的页面如何布局？
yuanzhengme
6 1
杀死一只知更鸟debug
|
1月前
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件，阐述了小程序的宿主环境和运行机制，包括小程序启动和页面渲染的过程。
杀死一只知更鸟debug
51 1
微信小程序的目录结构及页面结构的说明
我是快乐的嘟嘟
|
2月前
|
小程序
微信小程序多种跳转页面方式
微信小程序多种跳转页面方式
我是快乐的嘟嘟
169 57
杀死一只知更鸟debug
|
1月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航（声明式导航和编程式导航）
这篇文章介绍了微信小程序中页面导航的两种方式：声明式导航和编程式导航，包括如何导航到tabBar页面、非tabBar页面、后退导航，以及如何在导航过程中传递参数和获取传递的参数。
杀死一只知更鸟debug
103 0
微信小程序开发学习之页面导航（声明式导航和编程式导航）
yuanzhengme
|
1月前
|
小程序 前端开发 生物认证
微信小程序如何将一个按钮放到页面的最底下？
微信小程序如何将一个按钮放到页面的最底下？
yuanzhengme
90 5
杀死一只知更鸟debug
|
1月前
|
JSON 小程序 JavaScript
微信小程序页面事件，下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件，包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件，以及监听上拉触底事件和配置上拉触底的距离。
杀死一只知更鸟debug
63 0
邹荣乐
|
5天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
邹荣乐
77 7
邹荣乐
|
5天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
邹荣乐
56 1
yuanzhengme
|
19天前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么？
微信小程序的开发完整流程是什么？
yuanzhengme
68 7
ly~
|
1月前
|
存储 供应链 小程序
除了微信小程序，PHP 还可以用于开发哪些类型的小程序？
除了微信小程序，PHP 还可用于开发多种类型的小程序，包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域，PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时，在企业内部，PHP 可提升工作效率，实现审批流程、文件共享、生产计划等功能；在医疗和教育等行业，PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
67 6

热门文章

最新文章

  • 1
    微信小程序开发— 图片显示错误：VM24966:2
  • 2
    微信小程序：map地图自动缩放自适应大小
  • 3
    微信小程序使用export和import
  • 4
    微信小程序保存海报的过程
  • 5
    【微信小程序】-- 页面导航 -- 导航传参（二十四）
  • 6
    【微信小程序】--WXML & WXSS & JS 逻辑交互介绍（四）
  • 7
    基于微信小程序的护工服务预约管理系统设计与实现(源码+lw+部署文档+讲解等)
  • 8
    微信小程序的音频视屏播放
  • 9
    滇医通微信小程序分析笔记
  • 10
    微信小程序授权登录
  • 1
    小程序和vue写法的区别
    50
  • 2
    小程序和页面生命周期详解
    46
  • 3
    小程序；vue；uniapp优缺点（各5条）
    116
  • 4
    UniApp与微信小程序介绍及区别
    516
  • 5
    微信小程序开发工具的使用，各个配置文件详解，小程序开发快速入门（二）
    487
  • 6
    微信小程序开发工具的使用，各个配置文件详解，小程序开发快速入门（一）
    250
  • 7
    轻松学会微信小程序开发（一）
    204
  • 8
    使用阿里云短信+微信短链接跳转微信小程序
    423
  • 9
    【专栏】小程序图片合成就绪渲染的转变，从异步并发渲染到同步阻塞渲染
    83
  • 10
    微信小程序开发1
    131

    • 相关课程

    更多
  • IoT小程序框架课程
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页
  • 相册服务中的故事生成算法介绍
  • C++ 入门教程开发文档
  • 场景实践- 新手玩转云计算-创建炫酷的简历网页

    • 相关电子书

    更多
  • 《云市场-小程序》
  • 数字乡村建设方案
  • mPaaS 小程序新品发布

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 1分钟SAE部署PHP商城小程序
  • 收银台的场景化界面实践
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • EMAS Serverless搭建《私人云相册》小程序
    • 下一篇
    AI助理直击要害，从繁复中提炼精华——使用CDN加速访问OSS存储的图片