小程序点击切换更改不同的样式

wxml:

<view class="tab_box" catchtap="changeOil">

      <view class='{{num==1?"tab_box_1":"tab_box_1a"}}' data-num='1'>门店自提</view>

      <view class='{{num==2?"tab_box_2":"tab_box_2a"}}' data-num='2'>同城快送</view>

    </view>

 

wxss:

.tab_box{

  width: 750rpx;

  position: relative;

  height: 100rpx;

  margin-top: 10rpx;

}

.tab_box_1{

  position: absolute;

  width: 53%;

  text-align: center;

  height: 100rpx;

  line-height: 120rpx;

  color: #f47767;

  font-size: 30rpx;

  display: inline-block;

}

.tab_box_1::before {

  content: '';

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: -1;

  transform: perspective(2em) rotateX(4deg);

  background: -webkit-gradient(linear,0 0,0 bottom, from(#ffffff),to(#ffffff));

  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgb(255, 255, 255)), to(rgb(255, 255, 255)));

  background-position-x: initial;

  background-position-y: initial;

  background-size: initial;

  background-repeat-x: initial;

  background-repeat-y: initial;

  background-attachment: initial;

  background-origin: initial;

  background-clip: initial;

  background-color: initial;

  transform-origin: bottom left;

}

.tab_box_2{

  position: absolute;

  float: right;

  right: 0;

  width: 53%;

  text-align: center;

  height: 100rpx;

  line-height: 120rpx;

  color: #f47767;

  font-size: 30rpx;

  display: inline-block;

}

.tab_box_2::before {

  content: '';

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: -1;

  transform: perspective(2em) rotateX(4deg);

  background: -webkit-gradient(linear,0 0,0 bottom, from(#ffffff),to(#ffffff));

  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgb(255, 255, 255)), to(rgb(255, 255, 255)));

  background-position-x: initial;

  background-position-y: initial;

  background-size: initial;

  background-repeat-x: initial;

  background-repeat-y: initial;

  background-attachment: initial;

  background-origin: initial;

  background-clip: initial;

  background-color: initial;

  transform-origin: bottom right;

}

/* 未点击的样式 */

.tab_box_1a{

  position: absolute;

  width: 53%;

  text-align: center;

  height: 100rpx;

  line-height: 120rpx;

  color: #777;

  font-size: 30rpx;

}

.tab_box_2a{

  position: absolute;

  float: right;

  right: 0;

  width: 53%;

  text-align: center;

  height: 100rpx;

  line-height: 120rpx;

  color: #777;

  font-size: 30rpx;

}

 

 

 

 

js:

data: {

    num:1,

}

 // 切换自提跟快送

  changeOil:function(e){

    wx.showLoading({

      title: '加载中',

    })

    setTimeout(function () {

      wx.hideLoading()

    }, 500)

    this.setData({

      num:e.target.dataset.num

    })

  },

 

 

 

 

个别view需要不同展示，wxml里面这样改class='{{num==2?"flow-delivery":"disp_none"}}'

wxss：

 

.disp_none{

  display: none;

}

就可以分别点击之后显隐不一样的view了

 

参考链接：https://blog.csdn.net/chendongpu/article/details/114132915