微信小程序修改点击样式

最新推荐文章于 2025-07-09 09:13:44 发布

原创最新推荐文章于 2025-07-09 09:13:44 发布 · 9.7k 阅读

1 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在微信小程序中使用弹性盒子布局并设置点击样式。通过为第一个`view`元素添加`active`类，并在JS中使用`setData`根据用户点击事件动态改变样式，实现了点击不同选项时的高亮效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我用弹性盒子写四个< view>< /view>.
要求.第一个< view>默认显示已点击状态
这里写图片描述
解决方法就是给第一个view单独加一个叫“active”的类名，加个样式，其他三个不加就行了。
.active{
background-color: #eaeaea;
color:purple;
}

上一下代码：
< view class=’choose flex’>
< view class=”flex flex-center choose-item active” bindtap=’checked’ data-app=”first” style=’background-color:{{ first }}; color:{{ firstcolor }}’>
< view class=’choose-icon’>< image src=” style=’width:100%;height:100 image>< /view>
< view class=’choose-text’>001< /view>
< /view>

< view class=”flex flex-center choose-item” bindtap=’checked’ data-app=”second” style=’background-color:{{ second }}; color:{{ secondcolor }}’>
< view class=’choose-icon’>< image src=” style=’width:100%;height:100%;’>< /image>< /view>
< view class=’choose-text’>002< /view>
< /view>

< view class=”flex flex-center choose-item” bindtap=’checked’ data-app=”third” style=’background-color:{{ third }}; color:{{ thirdcolor }}’>
< view class=’choose-icon’>< image src=” style=’width:100%;height:100%;’>< /image>< /view>
< view class=’choose-text’>003< /view>
< /view>

< view class=”flex flex-center choose-item” bindtap=’checked’ data-app=”fourth” style=’background-color:{{ fourth }}; color:{{ fourthcolor }}’>
< view class=’choose-icon’>< image src=” style=’width:100%;height:100%;’>< /image>< /view>
< view class=’choose-text’>004< /view>
< /view>
< /view>

给每个view绑定一个bindtap事件，再自定义一个data-app属性，然后再样式上进行数据绑定，在JS里用setData来改变样式。微信里没有DOM操作。。。
JS代码：
data: {
first:”,
firstcolor:”,
second:”,
secondcolor:”,
third:”,
thirdcolor:”,
fourth:”,
fourthcolor:”
},
checked:function(e) {
// 获取到HTML页面上定义的data-app的值
var app=e.currentTarget.dataset.app;
if(app==”first”){
this.setData({
first:’#eaeaea’,
firstcolor:’purple’,
second:’#fafafa’,
secondcolor:’#000’,
third:’#fafafa’,
thirdcolor:’#000’,
fourth:’#fafafa’,
fourthcolor:’#000’
})
};
if(app==”second”){
this.setData({
first: ‘#fafafa’,
firstcolor:’#000’,
second: ‘#eaeaea’,
secondcolor: ‘purple’,
third: ‘#fafafa’,
thirdcolor: ‘#000’,
fourth: ‘#fafafa’,
fourthcolor: ‘#000’
})
};
if(app==’third’){
this.setData({
first: ‘#fafafa’,
firstcolor: ‘#000’,
second: ‘#fafafa’,
secondcolor: ‘#000’,
third: ‘#eaeaea’,
thirdcolor: ‘purple’,
fourth: ‘#fafafa’,
fourthcolor: ‘#000’
})
};
if(app==’fourth’){
this.setData({
first: ‘#fafafa’,
firstcolor: ‘#000’,
second: ‘#fafafa’,
secondcolor: ‘#000’,
third: ‘#fafafa’,
thirdcolor: ‘#000’,
fourth: ‘#eaeaea’,
fourthcolor: ‘purple’
})
}
}