9、列表渲染wx:for
小程序提供了一个wxml组件的for循环，称为列表渲染
9.1.1 将3篇文章的数据提取到js中
post.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var postList=[
{
object: {
date: "Jan 28 2017"
},
title: "小时候的冰棍儿与雪糕",
postImg: "/images/post/post-1.jpg",
avatar: "/images/avatar/avatar-1.png",
content: "冰棍与雪糕绝对不是同一个东西。3到5毛钱的雪糕犹如现在的哈根达斯，而5分1毛的冰棍儿就像现在的老冰棍。时过境迁",
readingNum: 92,
collectionNum: {
array: [108]
},
commentNum: 7
},
{
object: {
date: "Jan 28 2017"
},
title: "世界杯乌龙球",
postImg: "/images/post/post-2.jpg",
avatar: "/images/avatar/avatar-2.png",
content: "冰棍与雪糕绝对不是同一个东西。3到5毛钱的雪糕犹如现在的哈根达斯，而5分1毛的冰棍儿就像现在的老冰棍。时过境迁",
readingNum: 92,
collectionNum: {
array: [108]
},
commentNum: 7
},
{
object: {
date: "Jan 28 2017"
},
title: "端午节，跟随习近平找寻中华民族“精气神”",
postImg: "/images/post/post-3.jpg",
avatar: "/images/avatar/avatar-3.png",
content: "体现一个国家综合实力最核心的、最高层的，还是文化软实力，这事关一个民族精气神的凝聚。”习近平总书记曾在众多场合阐释中华优秀传统文化的价值与力量，深入挖掘中华优秀传统文化的时代内涵，展现对中华优秀传统文化的深刻思考。",
readingNum: 50,
collectionNum: {
array: [1000]
},
commentNum: 8
}
]
this.setData({
postList: postList
})
},
})
9.1.2 使用列表渲染改写文章列表
post.wxml
<block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx">
<view class='post-container'>
<view class='post-author-date'>
<image src='{{item.avatar}}'></image>
<text>{{item.object.date}}</text>
</view>
<text class='post-title'>{{item.title}}</text>
<image class='post-image' src='{{item.postImg}}' mode='aspectFill' />
<text class='post-content'>{{item.content}}</text>
<view class='post-like'>
<image src='/images/icon/wx_app_collect.png'></image>
<text>{{item.readingNum}}</text>
<image src='/images/icon/wx_app_view.png'></image>
<text>{{item.collectionNum.array[0]}}</text>
<image src='/images/icon/wx_app_message.png'></image>
<text>{{item.commentNum}}</text>
</view>
</view>
</block>
<block>标签没有实际意义，它并不是组件，所以我们称为“标签”，它仅仅是一个包装，不会在页面内被渲染可以理解为常见编程语言里的括号，在block标签中被包裹的元素将被重复渲染。
wx:for并不是一定要作用在block标签上，也可以作用于view上，但不推荐使用view等组件来做列表渲染。因为同HTML一样，我们希望标签或者组件元素是语义明确的，view组件通常被用来当作容器或者是区域分隔，它有它的使命，不应该被滥用。
事实上，不定义数组元素的变量名，小程序默认子元素的变量名就是item
image.png
10、配置单个页面导航栏背景色
10.1 更改全局导航栏配色
app.json
"window": {
"navigationBarBackgroundColor": "#4A6141"
}
image.png
10.2 配置页面的导航栏颜色
welcome.json
{
"navigationBarBackgroundColor": "#ECC0A8"
}
image.png
10.3 页面的json文件配置和app.json文件的配置有什么不同？
- 页面的json文件只能配置和window相关的属性，但是app.json除了可以配置window外还可以配置pages、tabBar等选项
- 页面的json配置不需要像app.json那样，加上window这个对象，直接编写window下面的配置项即可
11、从欢迎页面跳转到文章页面
11.1 将welcome页面设置为启动页
app.json
"pages":[
"pages/welcome/welcome",
"pages/post/post"
],
11.2 事件
事件是视图层（wxml）到逻辑层（js）的通信方式，简单的说，事件可以让我们在js里处理一些用户在界面上的一些操作并对这些操作做出反馈。
11.2.1 添加tap事件
welcome.wxml
image.png
对view添加了一个catchtap="onTapJump"的事件绑定，意思是，监听点击这个动作，当用户点击这个动作之后，将会执行一个onTapJump的函数
11.2.2 添加tap操作的事件处理函数
welcome.js
onTapJump:function(event){
wx.navigateTo({
url: '../post/post',
success:function(){
console.log("跳转页面成功")
},
fail:function(){
console.log("跳转页面失败")
},
complete: function () {
console.log("跳转页面完成")
},
});
},
11.3 navigateTo 与 redirectTo
- 不同点
1）redirectTo：将关闭当前页面并且将页面卸载，跳转到指定页面
image.png
2）navigateTo : 保留当前页面，跳转到指定页面时隐藏当前页面，点击下图所示的返回键可以返回上一个页面
image.png
-
相同点
在使用方式上完全相同，都接受一个Object对象作为参数，Object对象中最重要的属性是url，它指定要跳转的页面路径，此外还可以接受如下的3个方法
image.png
11.4 小程序最多有5层页面
当我们使用navigateTo的时候，可以从父页面跳转到子页面，还可以从子页面跳转到子子页面，以此类推，层次最深为5
11.5 冒泡事件与非冒泡事件
- 冒泡事件
指某个组件上的事件被触发后，事件还会向父级元素传递，父级元素还会继续向父级的父级传递，一直到页面的顶级元素
冒泡事件的类型：
1）touchstart：手指触摸动作开始
2）touchmove：手指触摸后移动
3）touchcancel：手指触摸动作被打断，如来电提醒、弹框
4）touchend：手指触摸动作结束
5）tap：手指触摸后马上离开
6）longtap：手指触摸后，超过350ms再离开
-
非冒泡事件
指的是不会向父级元素传递事件 -
注意点
1）小程序需要在事件名之前添加catch或者bind前缀
2）catch将阻止事件继续向父节点传播，而bind不会阻止事件传播
网友评论