回顾上节课的知识，为大家介绍了模板Template的使用方法，切记，在需要使用的页面文件中，要导入template的路径(.wxml和wxss).
我们也已经实现了从服务器动态地获取数据并进行页面显示，但是我们并没有实现任何交互的动作，所以这节课就为大家介绍点击的交互事件和数据传递。
Event1:点击图片预览功能
首先在需要进行交互的view上，绑定触摸事件，然后在js文件中去实现函数事件的方法。
<image class="contentImg" catchtap="lookUpPhoto" mode="aspectFill" src="{{url}}"></image>
代码分析：
<1>
首先我们为图片的控件绑定触摸事件，而触摸事件分为两类
catchTap：事件不进行向下分发，即实现完图片的触摸之后，停止向下级视图分发事件
bindTap:事件会进行向下分发，即实现完图片的触摸之后，会继续查找下级视图的分发事件
这里我们只需要点击图片就能预览图片，并不需要后续动作，故此地方，我们使用catchTap。
接下来，我们在home.js文件中来实现lookUpPhoto函数。
lookUpPhoto:function(res){
console.log("点击了图片");
},
编译运行之后发现
每次点击图片，都会在控制台输出打印“点击了图片”。
<2>
这里我们并没有实现预览的图片，我们需要知道点击的是哪张图片，这样我们才能在lookUpPhoto函数中取实现预览图片的功能，这时候我们就需要进行dataset了。
<image class="contentImg" catchtap="lookUpPhoto" data-photourl="{{url}}" mode="aspectFill" src="{{url}}"></image>
这里我们为触摸的image设置了一个data-photoUrl的数据，其值为本身的图片链接，
并且我们在home.js文件中去取到设置的值。
lookUpPhoto:function(res){
var photoUrl = res.currentTarget.dataset.photourl;//取得设置的值
wx.previewImage({//图片预览的方法
urls: [photoUrl],//预览的总图片链接
});
},
res.currentTarget //此为获取当前触摸事件的view，这里我们得到的是点击的image
res.currentTarget.dataset //获取触模视图的设置值（这里是一个对象）
res.currentTarget.dataset.photourl //获取触模视图的设置值（设置了什么参数，就取什么参数）
完成 ：这样我们就取到了当前点击的图片链接，并进行了预览
Event2:点击更多功能拉黑和举报
首先还是在“更多”按钮的视图上绑定触摸事件
<image src="/images/home/moreIcon.png" class="moreIcon" catchtap="moreTap" data-userid="{{user_id}}"></image>
这里我们为image视图绑定了“ moreTap”的事件并且设置了参数为userid的用户id。
接着我们在home.js文件中实现函数方法
moreTap:function(res){
var that = this;//防止指针指向错误
var userId = res.target.dataset.userid;
console.log("点击了用户" + userId);
wx.showActionSheet({
itemList: ["拉黑","举报"],
itemColor:"red",
success:function(res){
console.log(res.tapIndex);
if (res.tapIndex == 0){//举报
that.reportUser(userId);
} else if (res.tapIndex == 1){//拉黑
wx.showActionSheet({
itemList: ['语言辱骂','发布不良信息','传播色情暴力','设计敏感话题'],
itemColor: "red",
success:function(res){
wx.showModal({
title: '举报成功',
content: '平台将在一个工作日内做出相应处理',
cancelText:'',
showCancel:false
});
}
})
}
}
});
},
reportUser:function(userId){
wx.showModal({
title: '拉黑成功',
content: '已屏蔽此用户的所有动态信息',
showCancel: false,
});
},
Event3:进入动态详情（去到下一页面）
首先在dynamic-template中添加触摸事件，并且绑定帖子的id
<view class="dynamicContainer" catchtap="dynamicTap" data-dynamicid="{{_id}}">
然后在home.js文件中实现函数
dynamicTap:function(res){
var dynamicId = res.currentTarget.dataset.dynamicid;
console.log("点击了动态" + dynamicId);
wx.navigateTo({
url: '/pages/home/dynamicDeatil/dynamicDeatil?dynamicId=' + dynamicId,
})
},
*小知识：
向下一级页面传参可以用下面的方法传递，将参数拼接在新页面路径的后面，作为参数来传递
url: '/pages/home/dynamicDeatil/dynamicDeatil?dynamicId=' + dynamicId,
下一级页面接受参数用以下方式来获取（在dynamicDeatil页面中来获取上级页面传下来的dynamicId）
** dynamicDeatil.js文件**
onLoad: function (options) {
console.log(options.dynamicId);//获取从上级页面传下来的动态id
},
同样，进入新页面的时候，需要在app.json中添加新页面的路径
"pages": [
"pages/login/login",
"pages/home/home",
"pages/home/dynamicDeatil/dynamicDeatil",
"pages/home/addNewDynamic/addNewDynamic"
],
Event4:添加动态（去到下一页面）
首先在home.wxml中新增“添加动态”按钮，并且绑定事件“addNewDynamic”
<view>
<view class="addNewDynamicBtn" catchtap="addNewDynamic">
<image class="addIcon" src="/images/home/fabu.png"></image>
</view>
</view>
在home.wxss中添加样式
.addNewDynamicBtn {
position: fixed;
bottom: 40rpx;
left: 610rpx;
background-color: #50c4e7;
width: 100rpx;
height: 100rpx;
border-radius: 50rpx;
}
.addIcon{
width: 70rpx;
height: 70rpx;
margin-left: 15rpx;
margin-top: 15rpx;
}
在home.js中添加
addNewDynamic:function(res){
console.log("新增动态");
wx.navigateTo({
url: 'addNewDynamic/addNewDynamic',
});
},
ps：记住凡是要跳转到新页面，必须在app.json中添加新页面的路径。
"pages": [
"pages/login/login",
"pages/home/home",
"pages/home/addNewDynamic/addNewDynamic"
],
总结：
事件传递：
根据实际需求来选择catchTap(不向下传递)和bindTap(向下传递)事件。
需要在事件中获取什么值，就要配套在绑定中设置什么值
*单个参数
设置：
data-key = value
取值：
dataset.key
*多个参数
设置：
data-key = {'key1' : value1 ,'key2' : value2}
取值：
dataset.key.key1 ; dataset.key.key2
下一节：
网友评论