微信小程序 —— 多选选中之后改变样式( 2 )
微信小程序 —— 多选选中之后改变样式
在微信小程序开发中,经常会遇到需要根据用户的选择状态改变页面元素样式的情况。例如,在一个评论列表中,如果用户选择了多个评论项,我们可能希望将这些选中的评论项高亮显示出来。这就涉及到了如何根据用户的选择状态改变页面元素的样式。
WXML 中的 class 属性
在 WXML 中,class 属性用于设置 HTML 元素的类名。我们可以使用 JavaScript 来动态地改变这个类名,从而实现样式的变化。
```html
view class="flex-wrap" wx:for="{{comments}}" wx:key="{{comments}}">
view class="item {{ item.checked ? 'checked' : '' }}">
image mode='widthFix' src="{{item.url}}"/>
text>{{item.content}}
/view>
/view>
```
在上面的代码中,我们定义了一个 `checked` 类名,用于表示选中的评论项。我们使用 JavaScript 来动态地改变这个类名。
JavaScript 中的 class 切换
在 JavaScript 中,我们可以使用 `classList` 属性来切换元素的类名。
```javascript// 获取所有评论项const comments = this.data.comments;
// 定义一个函数来切换选中状态function toggleChecked(item) {
// 切换选中状态 item.checked = !item.checked;
// 更新数据 this.setData({
comments: comments.map((i) => i.id === item.id ? item : i)
});
}
// 绑定事件监听器view class="flex-wrap" wx:for="{{comments}}" wx:key="{{comments}}">
view class="item {{ item.checked ? 'checked' : '' }}" bindtap="toggleChecked" data-item="{{item}}">
image mode='widthFix' src="{{item.url}}"/>
text>{{item.content}}
/view>
/view>
```
在上面的代码中,我们定义了一个 `toggleChecked` 函数来切换选中状态。我们使用 `bindtap` 属性绑定事件监听器,并传递当前评论项的数据。
样式变化
当用户选择多个评论项时,我们需要改变页面元素的样式。例如,我们可以将选中的评论项高亮显示出来。
```css/* 样式定义 */
.checked {
background-color: f0f0f0;
}
/* 页面样式 */
page {
background-color: f7f7f7;
}
```
在上面的代码中,我们定义了一个 `checked` 类名来表示选中的评论项。我们使用 CSS 来改变页面元素的样式。
总结
在微信小程序开发中,需要根据用户的选择状态改变页面元素样式时,可以使用 WXML 中的 class 属性和 JavaScript 中的 class 切换功能。通过定义一个函数来切换选中状态,并绑定事件监听器,我们可以实现样式的变化。
参考内容
* 微信小程序官方文档: WXML 文档: JavaScript 文档: