通常,页面呈现的效果,我们直接在css中进行,可是有时我们需要进行通过一系列操作比如点击后,要使得样式进行改变。我们知道微信小程序也可以使用一些伪类进行这类操作样式的改变,比如hover等。毕竟小程序是基于数据驱动的,也为了便于后续修改与维护,我们利用数据绑定来实现它。
******第一种方法******
one->进行布局wxml:
<view class="mn">点击样式改变</view>
two->样式美化wxss:
.mn{
width: 300rpx ;
height: 80rpx;
border: 1rpx solid red;
line-height: 80rpx;
text-align: center;
margin-left: 100rpx;
}
未点击时的样式
.bg1{
background-color: yellow;
color: coral;
}
点击以后的样式
.bg2{
background-color: green;
color: white;
}
three->样式改变js:
布好局与样式准备好后,怎样进行样式的改变呢?在wxml中绑定数据(数据绑定的方法很多,比如像下面的三目运算符判断,也可以直接绑定单个变量,在data设置出它的初始值,然后通过setData改变值等,实现过程不同,最终的结果都可以达到相同),并绑定点击事件。
<view class="mn {{bg?'bg1':'bg2'}}" bindtap="change">点击样式改变</view>
绑定好事件后,我们在js中实现这个方法。
Page({
data: {
// 一开始,我们将bg设为true,通过bg?'bg1':'bg2'得知,未点击时效果为bg1
bg: true
},
// 当点击以后, bg由true变为false,通过bg?'bg1':'bg2'得知,点击以后的效果为bg2
change: function(){
this.setData({
bg: false
})
}
})
four->最后,得到我们想要的效果,如下:
*******第二种方法******
此外,除了上述三目运算符数据绑定的方式外,我们还可以这样绑定数据等等:
wxml代码:
<view class="mn {{bg}}" bindtap="change">点击样式改变</view>
wxss代码:
.mn{
width: 300rpx ;
height: 80rpx;
border: 1rpx solid red;
line-height: 80rpx;
text-align: center;
margin-left: 100rpx;
}
/* 未点击时的样式 */
.bg1{
background-color: yellow;
color: coral;
}
/* 点击以后的样式 */
.bg2{
background-color: green;
color: white;
}
js代码:
Page({
data: {
bg:"bg1"
},
change: function(){
this.setData({
bg:"bg2"
})
}
})
效果与上面一样:
说明:这种方法对于实现与图片相关的改变,非常好,我们知道在微信小程序中,wxss不能直接添加图片。
wxml代码:
<view class="Img" bindtap="change" style="background:url({{url}}) no-repeat">图片</view>
wxss代码:
.Img{
width: 160rpx ;
height: 60rpx;
border: 1rpx solid green;
text-align: center;
margin-left: 100rpx;
font-size: 28rpx;
}
js代码:
Page({
data: {
url:"../../images/reserve1.png"
},
change: function(){
this.setData({
url: "../../images/reserve2.png"
})
}
})
效果(点击前后):
******第三种方法******
说明:对于改变控件样式,除了像上面这样外,我们还可以把样式直接写在wxml,像下面这样
<view class="ch" bindtap="change" style="{{bg?'color:red':'color:green'}}">改变</view>
.ch{
width: 160rpx ;
height: 60rpx;
border: 1rpx solid green;
text-align: center;
margin-left: 100rpx;
font-size: 28rpx;
}
Page({
data: {
bg:true
},
change: function(){
this.setData({
bg:false
})
}
})
效果(点击前后):
------>这种方法不太推荐使用,一般用来测试,不利于代码维护。
******总结@当样式要发生改变时******
对于直接的样式wxss,我们就用第一与第二种方法------>在wxss中写好需要的样式,在wxml中进行数据绑定与事件绑定,在js中实现;
对于图片相关的,我们就用第二种方法;
第三种不太推荐。