小程序选项卡（01初步）+边框border-radius 和 border-image冲突

方法:在选择边框外面加一个盒子，用怪异盒子padding把中间的盒子固定在中间然后加背景色。border-radius 和 border-image冲突。思路：用background-image解决。这样padding的范围就等于内部盒子的边框。

I_Do_Well

652人浏览 · 2023-03-08 17:30:12

I_Do_Well · 2023-03-08 17:30:12 发布

border-radius 和 border-image冲突

思路：用background-image解决

方法:在选择边框外面加一个盒子，用怪异盒子padding把中间的盒子固定在中间然后加背景色

这样padding的范围就等于内部盒子的边框

<view class="swiper-tab">
  <view class="out {{currentTab==0?'active':''}}">
    <view class="swiper-tab-item" data-current="0" bindtap="on"></view>
  </view>
  <view class="out {{currentTab==1?'active':''}}">
    <view class="swiper-tab-item " data-current="1" bindtap="on"></view>
  </view>
  <view class="out {{currentTab==2?'active':''}}">
    <view class="swiper-tab-item " data-current="2" bindtap="on"></view>
  </view>
</view>

.out {
  height: 200rpx;
  width: 30%;
  box-sizing: border-box;
  padding: 6rpx;
  border-radius: 48rpx;
  border: 6rpx solid gray;
}
.swiper-tab-item {
  width: 100%;
  height: 100%;
  border-radius: 48rpx;
  background-color: #fff;
}
.active {
  border: none;
  background-image: linear-gradient(90deg, rgba(160, 198, 255, 1), rgba(255, 137, 208, 1));
}


//page 里的初始数据
currentTab:0

on(e){
    if(this.data.currentTab === e.target.dataset.current){
      return false;
    }else{
      this.setData({
        currentTab:e.target.dataset.current
      })
    }
  },