微信小程序实现盒子点击高亮效果

在index.wxml中

<!--pages/interface/index.wxml-->

<view>

事件处理-事件对象

</view>

<!-- 实现盒子点击高亮效果 -->

<view class="page-body">

<scroll-view scroll-y class="aside">

<!-- mark:test="test" 在调⽤组件时为事件处理函数传递参数。 -->

<view wx:for="{{10}}" wx:key="*this" bind:tap="onMenuTap" mark:index="{{index}}" class="item {{index === menuIndex ? 'active': ''}}"></view>

</scroll-view>

<scroll-view scroll-y class="content">

<view wx:for="{{10}}" wx:key="*this" class="item"></view>

</scroll-view>

</view>

在index.wxss中

.page-body{

height: 700rpx;

display: flex;

margin-top: 20rpx;

}

.aside {

width: 200rpx;

padding: 20rpx;

background-color: #fff;

}

.page-body .aside .item {

height: 60rpx;

margin-bottom: 20rpx;

border-radius: 10rpx;

background-color: #eee

}

.page-body .content {

flex: 1;

padding: 20rpx;

margin-left: 20rpx;

background-color: #fff;

}

.page-body .content .item {

float: left;

width: 215rpx;

height: 215rpx;

margin: 0 20rpx 20rpx 0;

border-radius: 10rpx;

background-color: #eee;

}

.page-body .aside .active{

background: burlywood;

}

在index.wxjs中

// pages/interface/index.js

Page({

data:{

menuIndex:0

},

onMenuTap(ev){

// 获取事件对象

// console.log(ev);

//在调⽤组件时为事件处理函数传递参数。

// console.log(ev.mark.test);

// console.log(ev.mark.index);

this.setData({

menuIndex:ev.mark.index

})

},

/**

* 页面的初始数据

*/

data: {

},

/**

* 生命周期函数--监听页面加载

*/

onLoad(options) {

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady() {

},

/**

* 生命周期函数--监听页面显示

*/

onShow() {

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide() {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload() {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh() {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom() {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage() {

}

})