欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序黄色背景我的个人中心页面模板样式制作设计教程

    2018-06-22 09:45 来源/作者:懒人模板 分类:小程序教程  « »
    本文给大家带来的是微信小程序黄色背景我的个人中心页面模板样式制作设计教程,制作好以后效果图如下:
    一、wxml页面代码如下:
    <view class="page">
     <!--页头-->
     <view class="page__hd">
      <view class="head">   
        <view><navigator url="/pages/my/info"><image src="{{userInfo.avatarUrl}}"></image></navigator></view>
        <view><text>{{userInfo.nickName}}</text></view>
      </view>
     </view>
     <!--主体-->
     <view class="page__bd"> 
      <view class="list">
    
        <view class="page__bd">
            <view class="weui-cells weui-cells_after-title">
                <navigator url="/pages/my/list" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
                    <view class="weui-cell__hd">
                       <image src="/img/edit.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
                    </view>
                    <view class="weui-cell__bd">发布记录</view>
                    <view class="weui-cell__ft weui-cell__ft_in-access">{{infoCount}}</view>
                </navigator>
                <navigator url="/pages/my/appointment" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
                    <view class="weui-cell__hd">
                        <image src="/img/appointment.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
                    </view>
                    <view class="weui-cell__bd">我的预约</view>
                    <view class="weui-cell__ft weui-cell__ft_in-access"><view class="weui-badge" wx:if="{{appointmentCount>0}}" style="margin-left: 5px;">{{appointmentCount}}</view></view>
                </navigator>
                <navigator url="/pages/my/fav" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
                    <view class="weui-cell__hd">
                       <image src="/img/fav1.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
                    </view>
                    <view class="weui-cell__bd">我的收藏</view>
                    <view class="weui-cell__ft weui-cell__ft_in-access"></view>
                </navigator>
                <navigator url="/pages/my/mydyn" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
                    <view class="weui-cell__hd">
                       <image src="/img/dy.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
                    </view>
                    <view class="weui-cell__bd">我的动态</view>
                    <view class="weui-cell__ft weui-cell__ft_in-access"></view>
                </navigator>
                <navigator url="/pages/my/info" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
                    <view class="weui-cell__hd">
                        <image src="/img/me.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
                    </view>
                    <view class="weui-cell__bd">个人信息</view>
                    <view class="weui-cell__ft weui-cell__ft_in-access"></view>
                </navigator>
            </view>
        </view>
    
    
      </view>
     </view>
     <!--没有页脚-->
    </view>
    

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议