【小程序】014 高亮显示当前选中内容
【摘要】 相关内容思维导图：如果图片被压缩，请点击高亮显示当前选中内容下面实现点击列表的歌曲时，歌曲的内容（名字、作者、别名、序号...）转变高亮样式。1、组件musiclist上绑定事件// components/musiclist/musiclist.wxmlbindtap="handleSelect"创建绑定函数handleSelect(event)// components/musiclist...
相关内容思维导图：
如果图片被压缩，请点击高亮显示当前选中内容
下面实现点击列表的歌曲时，歌曲的内容（名字、作者、别名、序号...）转变高亮样式。
1、组件musiclist上绑定事件
// components/musiclist/musiclist.wxml
bindtap="handleSelect"
创建绑定函数handleSelect(event)
// components/musiclist/musiclist.js
methods: {
/**
* 点击歌曲处理
* @param {Event} event
*/
handleSelect(event) {
}
2、设置高亮样式
/* components/musiclist/musiclist.wxss */
.playing view, .playing text {
font-family: Arial, Helvetica, sans-serif;
color: #d4237a;
}
3、自定义传值data-
用于传递歌曲唯一标识
data-music-id="{{ item.id }}"
该值会随着事件触发传入绑定函数handleSelect（event）。
event是随便设置的形参，通过event传入了点击所携带的事件信息
4、在event中注意两个对象
target倘若该标签有绑定事件，所存的内容来自点击的标签
currenttarget倘若冒泡过程中的标签有绑定事件，所存的内容来自点击的标签向上冒泡
事件源：musiclist-name..
事件处理函数：handleSelect（event）
事件对象：event
事件类型：触摸点击
冒泡和捕获
在页面中点击一个标签，标签是从这个标签的祖先元素中逐层传递下来的，这个阶段为事件的捕获阶段。当事件传递到这个标签之后，又会把事件逐成传递回去，直到根标签为止，这个阶段是事件的冒泡阶段。
冒泡可以理解为一层一层标签互相包裹着，点击里面一层标签会触发外面一层标签的事件简单来说如果我们点击了musiclist-name产生的类型事件，事实上意味着musiclist-info、musiclist-index、musiclist-container也产生了该类型事件
将绑定函数，自定义data-的设置放在musiclist-container，使得无论是点击歌曲序号、名字还是歌曲创造者都可以触发函数，若只设置在musiclist-name，触摸其他标签便不会响应
5、存放相关id
// components/musiclist/musiclist.js
this.setData({ playerId: event.cunrrentTarget.dataset.music-id });
6、初始化playerId
设置初始id为-1
// components/musiclist/musiclist.js
/**
* 组件的初始数据
*/
data: {
playerId: -1
},
7、wxml标签根据id判断是否高亮
<block wx:for="{{ musiclist }}" wx:key="id">
<view class="musiclist-container {{ item.id === playerId ? 'playing': '' }}" bindtap="handleSelect" data-music-id="{{ item.id }}" data-index="{{ index }}">
item是musiclist （存于properties的musiclist对象）的成员
如果item.id 相等于playerId则使用playing样式，否则不高亮
8、在handleSelect(event)补全跳转歌曲播放页面player
handleSelect(event) {
const musicid = event.currentTarget.dataset.music-id;
this.setData({ playerId: musicid });
wx.navigateTo({
url: `../../pages/player/player?musicid=${ musicid }`,
});
}
es6语法url: `../../pages/player/player?musicid=${ musicid }`,
？前为跳转的相对地址
？后卫携带跳转内容
第一个musicid是用于传给页面的变量，后一个musicid 是event.currentTarget.dataset.music-id
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）