微信小程序开发之——个人中心-个人详情页(6)
一 概述
- 个人详情页对应的页面为：
pages/detail/detail - 页面搭建
- 页面逻辑
二 页面搭建
2.1 布局文件(detail.wml)
<view class="info"><!--头像--><view><view class="fl">头像</view><view class="rl"><image src="{{imgUrl}}" mode="aspectFill" bindtap="changeAvatar"></image><image class="arrow" src="/images/arrow.png"></image></view></view><!--昵称--><view><view class="fl">昵称</view><view class="rl">{{username}}<view class="arrow"></view></view></view><!--性别--><view><view class="fl">性别</view><view class="rl">{{gender}}<view class="arrow"></view></view></view><button class="button" bindtap="jump" type="primary">修改资料</button>
</view>
2.2 页面样式文件(detail.wxss)
page{background: white;font-size: 32rpx;
}
.info>view{background: white;display: flex;flex-direction: row;align-items: center;justify-content: center;padding: 20rpx;line-height: 80rpx;border-bottom: 1px solid gray;height: 80rpx;
}
.info>view:last-child{border: none;
}
.fl{flex: 1;
}
.rl{flex: 1;text-align: right;
}
.info image{width: 50rpx;height: 50rpx;margin-top: 20rpx;
}
.info .arrow{width: 30rpx;height: 32rpx;float: right;margin: 26rpx 0 0 15rpx;
}
2.3 标题内容(detail.json)
{"usingComponents": {},"navigationBarTitleText": "个人资料详情页"s
}
三 页面逻辑(detail.js)
Page({/*** 页面的初始数据*/data: {gender: '女',username: '5秒种的记忆',imgUrl: '/images/avatar.png'},//选择头像changeAvatar: function () {wx.chooseImage({count: 1, //最多可以选择9张图片sizeType: ['original', 'compressed'], //图片尺寸原图，压缩图sourceType: ['album', 'camera'], //图片来源， 从相册选图，使用相机success: res => {//tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePathsthis.setData({imgUrl: tempFilePaths})}})},//跳转到"个人资料修改页"jump: function () {wx.navigateTo({//为了避免用户名中的特殊字符破坏字符串结构，使用encodeURIComponent()编码url: '/pages/modify/modify?username=' + encodeURIComponent(this.data.username) + '&gender=' + encodeURIComponent(this.data.gender),})}
})
四 源码
- 源码
- 物流查询服务器
微信小程序开发之——个人中心-个人详情页(6)相关推荐
- 微信小程序开发（九）————文章详情页的实现
我们在上一篇文章中已经制作出来了个人博客列表页,本篇实现详细内容. 首先第一步我们肯定是要创建文件夹,我们选择在pages目录下面的post目录里面创建post-detail的文件夹,如图: 教给大家 ...
- 微信小程序实现商品列表跳转详情页
实验要求 模仿京东小程序,实现下列功能 首页包含了手机图片,手机的描述,手机的价格,购物车图标 首页显示两行文字,多余的文字隐藏,以3个点代替 点击页面不同的地方,能够跳转到不同的手机详情页面 手机详 ...
- 微信小程序开发之——个人中心-订单物流查询(8)
一 概述 订单服务器搭建 订单物流查询页面对应的页面为pages/order/order 二 订单服务器搭建 2.1 配置及模块安装 2.1.1 初始化项目,自动创建package.json配置文件 ...
- 微信小程序开发之——个人中心-介绍(1)
一 概述 个人中心展示图 个人中心各个页面展示及功能介绍 二 个人中心页面介绍 2.1 展示 2.2 页面构成 2.2.1 首页 说明: 首页包含:昵称,星座,兴趣,QQ,电话 点击头像:跳转个人中心 ...
- 微信小程序开发之——个人中心-个人中心(5)
一 概述 个人中心对应的页面为:pages/person/person 页面搭建 页面逻辑 二 页面搭建 2.1 布局文件(person.wml) <!--头像--> <view c ...
- 微信小程序开发之——个人中心-个人资料修改(7)
一 概述 个人资料修改对应的页面为:pages/modify/modify 页面搭建 页面逻辑 二 页面搭建 2.1 布局文件(modify.wml) <form bindsubmit=&quo ...
- 微信小程序开发之——个人中心-收货地址(9)
一 概述 个人详情页对应的页面为:pages/address/address 页面搭建 页面逻辑 二 页面搭建 2.1 布局文件(address.wml) <view class="l ...
- 微信小程序开发之——个人中心-首页(4)
一 概述 首页对应的页面为pages/index/index 首页页面搭建 页面逻辑-点击头像完成页面跳转 二 首页页面搭建 2.1 布局文件(index.wml) <view class=&q ...
- 微信小程序开发之——个人中心-API(2)
一 概述 页面跳转方法:wx.switchTab/wx.navigateTo/wx.redirectTo/wx.reLaunch 从本地相册或照相机拍照:wx.chooseImage 选择用户地址:w ...
最新文章
- Selenium最全超时等待问题的处理方案
- JavaScript数据迭代方法差别
- Nginx（二）：反向代理原理 与 配置文件详解
- python不同模块间传递数据_Python模块-数据传送模块
- 工厂模式 + 反射 ？= 灵活多变的数据库
- gitmaven命令
- linux coreutils升级,Linux命令01--Coreutils软件包01--认识coreutils
- Spring Boot官宣：正式弃用 Java 8
- Java NIO概述（1）
- 第八章 程序的分支结构
- JAVA 高频算法面试题汇总
- 饿了么微信小程序抓取
- sunlight的中文_DianaVickersSunlight中文歌词
- android编译成功闪退,编译调试-android-app闪退定位
- 华硕重装后进入bios_华硕电脑如何进入bios,教您如何华硕进入bios
- 计算机的服务桌面,比较实用的电脑桌面软件值得入手，个个精选
- 苏州新导RFID化工厂人员定位系统中的应用,化工厂人员定位你get到了吗?
- b站pink老师JavaScript的jQuery 案例代码——电梯导航案例
- load forecasting（一）
- AWS S3数据传输实验