10分钟入门 - 微信小程序开发

{{lesson}}

mode=‘widthFix’ 表示以宽度不变，高度自动变化，保持原图宽高比不变的方式进行缩放以适应屏幕大小。

接下来还需要修改 index.wxss 文件来设置样式：

/**index.wxss**/.userinfo { display: flex; flex-direction: column; align-items: center;}.userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%;}.userinfo-nickname { color: #aaa;}.usermotto { margin-top: 200px;}.ID_Badge { padding-top: 20rpx; color: blue;}.ID_info { display: flex; flex-direction: column; align-items: center;}.pics { width: 400rpx;}

保存刷新，“个人中心” 页面就完成了。

生活指南

原来的项目中 pages 目录下只有 index 和 logs 两个目录，因此我们还需要为第二个页面创建一个目录。

创建页面有两种方法：

在目录结构的 pages 图表上，新建目录，然后在目录下逐一创建页面构成文件在 app.json 下，直接添加

建议采用第二种方法，修改 app.json 文件：

{ "pages":[ "pages/index/index", "pages/logs/logs", "pages/details/details" ],

保存刷新之后就会发现，目录结构里自动创建了这一页。对应的，也要修改 app.json 中的 tabBar 的链接（实际上我们已经做了）：

{ "pagePath": "pages/details/details", "iconPath": "image/icon_API.png", "selectedIconPath": "image/icon_API_HL.png", "text": "生活指南" }

然后修改 details.wxml 设置这一页的标题：

21天零垃圾生活指南

修改 details.wxss 设置样式：

/* pages/details/details.wxss */ .title { display: flex; flex-direction: column; align-items: center; margin-top: 40rpx; margin-bottom: 40rpx; font-size: 40rpx; }

这个页面是一个列表展示的页面，我们先在 details.js 文件中准备好数据：

// pages/details/details.jsPage({ /** * 页面的初始数据 */ data: { showModalStatus: false, list: [ { id: 0, name : "写一篇《垃圾日记》", introduce: "零垃圾并不是一项宏大的工程，而是由日常生活中一个个小小的习惯和选择组成的。最难的，是迈出第一步。", src: '../../image/day01.jpg', showModalStatus: false, catalog: [ { section: "1. xxx" }, { section: "2. xxx" }, { section: "3. xxx" }, { section: "4. xxx" }, ] }, { id: 1, name: "带上自己的购物袋", introduce: "在我们家，当时垃圾桶里最多的就是塑料袋，而这些袋子跟着我回家后，都几乎难逃被丢进垃圾桶的命运。", src: '../../image/day02.jpg', showModalStatus: false, catalog: [ { section: "1. xxx" }, { section: "2. xxx" }, { section: "3. xxx" }, { section: "4. xxx" }, ] }, /* 省略 */ ] },

接下来我们要使用列表渲染（​​wx:for​​）的方法将这些数据绑定一个数组，并在页面上重复渲染。修改 details.wxml 文件：

然后在 details.wxml 中插入弹窗，并用条件渲染（​​wx:if​​）来判断是否渲染（显示）弹窗。同时为每一个 item 添加 data-statu 来表示弹窗的状态。如下：

最后在 details.wxss 设置一下弹窗和遮罩层的样式：

.drawer_box { width: 650rpx; overflow: hidden; position: fixed; top: 50%; z-index: 1001; background: #FAFAFA; margin: -150px 50rpx 0 50rpx; } .drawer_content { border-top: 1.5px solid #E8E8EA; height: 210px; overflow-y: scroll; /* 超出父盒子高度可滚动 */ } .btn_ok { padding: 10px; font: 20px "microsoft yahei"; text-align: center; border-top: 1.5px solid #E8E8EA; color: #3CC51F; } .drawer_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background: black; opacity: 0.5; overflow: hidden; }

OK，模拟弹窗也实现了。

预览图片

Page({ data: { motto: 'Hello World', company: "GoZeroWaste", lesson: "21天零垃圾生活指南", position: "垃圾魔法师", imgalist: [' userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo') }, previewImage: function (e) { wx.previewImage({ current: this.data.imgalist, // 当前显示图片的 urls: this.data.imgalist // 需要预览的图片 }) },

教程就到这里囖，再见吧～

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。